Question

我正在使用带反应和浏览器的gulp

这是我的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，如果可能来自您需要的其中一个库，例如反应CSSTransitionGroup

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

2 个答案: