如何同时使用“gulp-babel”和“gulp-browserify”答案

【问题标题】：How to use both 'gulp-babel' and 'gulp-browserify'如何同时使用“gulp-babel”和“gulp-browserify”
【发布时间】：2019-03-07 04:07:29
【问题描述】：

我尝试编写这些代码

 gulp.task('script', function() {
  'use strict'
  return gulp.src(['app.js', 'components/**/*.jsx'])
    .pipe(babel())
    .pipe(browserify())
    .pipe(gulp.dest("dist"));
});

但它显示了一些错误：

SyntaxError: 
/Users/Zizy/Programming/learn-react-js/components/CommentBox.jsx:58
    <div className="commentBox">
    ^
ParseError: Unexpected token
    at wrapWithPluginError (/Users/Zizy/Programming/learn-react-js/node_modules/gulp-browserify/index.js:44:10)

似乎在.pipe(browserify()) 之前，gulp 并没有转换 jsx 代码。但是如果我只是删除 .pipe(browserify()) 我发现它确实转换了，就不能让 babel 和 browserify 一起工作。

我知道也许我可以像 babelify 或 browserify plugin for babel 这样使用，但我只是想弄清楚原因。

【问题讨论】：

你使用的 babel 版本是什么？

标签： javascript gulp browserify babeljs

【解决方案1】：

gulp-browserify 并不是这样工作的。你不会给它一堆缓冲区来收集和捆绑。

你给它一个文件——入口文件——它传递给 Browserify。 Browserify 会检查条目文件引用的 other 文件，然后直接从文件系统加载这些文件，这意味着您无法事先使用 gulp 插件修改它们。

所以，真的，如果我们假装你不想在你的源文件上使用 Babel，你的 gulpfile 应该是这样的，只传入入口文件：

 gulp.task('script', function() {
  'use strict'
  return gulp.src('app.js')
    .pipe(browserify())
    .pipe(gulp.dest("dist"));
});

但是，请注意 gulp-browserify 不再维护，这正是原因。 gulp 插件不应该直接从文件系统中读取。这就是为什么你应该直接使用 Browserify（或者，在你的情况下，Babelify）和vinyl-source-stream as recommended in the gulp recipes。它更惯用，更不容易混淆。

这就是我对您问题的回答，但我想补充一点：如果您使用的是 ES2015 模块语法（并且您可能应该使用），那么有更好的方法来做到这一点。 Browserify 将所有模块单独包装在一堆代码中，以使程序化的 CommonJS API 正常工作，但是 ES2015 模块具有声明性语法，这使得工具更容易对其进行静态操作。有一个名为 Rollup 的工具利用了这一点，允许它生成比 Browserify 的更小、更快、更适合小型化的包。

下面是你可以如何使用 gulp：

var gulp = require('gulp'),
    rollup = require('rollup-stream'),
    babel = require('gulp-babel'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer');

gulp.task('script', function() {
  return rollup({entry: 'app.js'})
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(babel())
    .pipe(gulp.dest('dist'));
});

【讨论】：

【解决方案2】：

从 Babel 6 开始你需要手动声明预设，检查this。

基本上，在您的项目的根目录中，您需要一个.babelrc，其内容如下：

{
  "presets": [ "es2015", "react" ]
}

以及package.json中对应的npm模块：

// package.json

{
  "devDependencies": {
    ...
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    ...
  }
}

【讨论】：

【解决方案3】：

这是sample repository 与gulp、babel 和browserify

下面是代码sn-p

gulp.task("js", (done) => {
  const bundler = browserify({ entries: paths.js.source }, { debug: true }).transform(babel);
  bundler.bundle()
    .on("error", function (err) { console.error(err); this.emit("end"); })
    .pipe(source(paths.build.destMinJSFileName))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify())
    .pipe(sourcemaps.write(paths.js.destMapFolder))
    .pipe(gulp.dest(paths.build.destBuildFolder));

  done();
});

【讨论】：