如何同时使用“gulp-babel"和“gulp-browserify"

2022-01-12 00:00:00 javascript gulp browserify babeljs

我尝试编写这些代码

 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 一起工作.

It seems that before .pipe(browserify()) the gulp did't transform the jsx code. But if I just remove .pipe(browserify()) I find that did transform, just cannot let babel and browserify work together.

我知道也许我可以使用 babelify 或 browserify plugin for babel 之类的东西，但我只是想弄清楚原因.

I know maybe I can use like babelify or browserify plugin for babel though, I just want figure out the reason.

推荐答案

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

gulp-browserify doesn't quite work like that. You don't give it a bunch of buffers to collect and bundle.

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

You give it one file—the entry file—which it passes into Browserify. Browserify checks to see what other files the entry file references, then loads those files directly from the file system, meaning that you can't modify them with gulp plugins beforehand.

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

So, really, if we pretend you don't want to use Babel on your source files, your gulpfile should look like this, only passing in the entry file:

 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 按照 gulp 配方中的建议.它更惯用，更不容易混淆.

However, note that gulp-browserify is no longer maintained, and this is exactly why. gulp plugins aren't supposed to read directly from the file system. That's why you're supposed to use Browserify (or, in your case, Babelify) directly with vinyl-source-stream as recommended in the gulp recipes. It's more idiomatic and less confusing.

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

That wraps up my answer to your question, but I'd like to add: if you're using the ES2015 module syntax (and you probably should be), there's a better way to do this. Browserify wraps all your modules separately in a bunch of code to make the programmatic CommonJS API work properly, but ES2015 modules have a declarative syntax, which makes it much easier for tools to operate on them statically. There's a tool called Rollup that takes advantage of this, allowing it to produce bundles that are smaller, faster, and more minfication-friendly than Browserify's.

下面是你可以如何使用它与 gulp:

Here's how you might use it with 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'));
});

相关文章