当我使用gulp时，我得到了一个奇怪的js输出？

Question

我在reactjs和browserify中使用gulp

这是我的吞咽文件

var gulp = require('gulp'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    reactify = require('reactify'),
    rename = require('gulp-rename')


gulp.task('js-build', function() {
      // converts jsx to js
    var b = browserify({
        entries: ['./lib/main.jsx'],
        transform: [reactify],
        extensions: ['.js','.jsx'],
        debug: false,
        cache: {},
        packageCache: {},
        fullPaths: false
    });

    function build(file) {
        return b
        .plugin('minifyify', {
            map: false
        })
        .bundle()
        .pipe(source('main.js'))
        .pipe(gulp.dest('./js/'));
    }
});

gulp.task('default', ['js-build']);

当我运行gulp将我的jsx转换成一个js文件时，我的js文件输出真的很长很复杂，并且具有超出我在jsx文件中指定的函数？例如，有一个名为cleanUpNextTick()的函数，我从未声明过它。

这是正常的吗？

这是我的package.json

"dependencies": {
    "browserify": "^11.0.1",
    "expect": "^1.9.0",
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-react": "^3.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-watch": "^4.3.4",
    "jest-cli": "^0.5.0",
    "jquery": "^2.1.4",
    "marked": "^0.3.5",
    "minifyify": "^7.0.5",
    "react": "^0.13.3",
    "react-tools": "^0.13.3",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "jest": {
    "moduleFileExtensions": [
      "jsx",
      "js"
    ],
    "scriptPreprocessor": "preprocessor.js",
    "unmockedModulePathPatterns": [
      "node_modules/react"
    ]
  },
  "devDependencies": {
    "jest-cli": "^0.4.19"
  }

Answer 1

是的，这是正常的，你的代码被reactify转换成了Javascript ES5，它在幕后使用ReactTools.transform。

该语言的新功能正在被ES5兼容的代码替换，并且可以在转换期间将新功能添加到最终代码中。

此外，browserify将您引用的所有依赖项与require (或ES6的import)捆绑在一起，因此您还会在最终捆绑包中看到第三方代码。

Answer 2

是的，这绝对是正常的。捆绑包文件编译项目中的所有javascript，包括节点模块。这意味着您将能够看到所需的任何函数，如果可能来自所需的某个库，则可以使用cleanUpNextTick，例如react的CSSTransitionGroup