如何使用'gulp-babel'和'gulp-browserify'

问题描述

我尝试写这些代码

pre $ g $ p $ gulp.task（'script'，function（）{
'使用严格的'
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：意外的令牌
，位于wrapWithPluginError（/Users/Zizy/Programming/learn-react-js/node_modules/gulp-browserify/index.js:44:10）
  

看起来在 .pipe（browserify（））该吞咽并没有改变jsx代码。但是，如果我只是删除 .pipe（browserify（）），我发现它确实转换了，但不能让babel和browserify一起工作。

我知道也许我可以像 babelify 或 browserify插件用于babel ，但我只想图出于原因。

解决方案

gulp-browserify并不像那样。您不要给它一堆缓冲区来收集和捆绑。

您给它一个文件—它传递到Browserify的条目文件— Browserify会检查输入文件引用的其他文件，然后直接从文件系统加载这些文件，这意味着您无法事先使用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 。它更具惯用性，不太令人困惑。

这包括了我对您问题的回答，但是我想补充一句：如果您使用的是ES2015模块语法（和你可能应该），有一个更好的方法来做到这一点。 Browserify将所有模块分别包装在一堆代码中，以使编程的CommonJS API正常工作，但ES2015模块具有声明性语法，这使得工具可以更容易地静态操作它们。有一种名为的工具可以利用此工具，从而可以生成比Browserify更小，更快速，更易于理解的捆绑包。 / p>

以下是您如何使用它的方法：

  var gulp = require''gulp'），
 rollup = require（'rollup-stream'），
 babel = require（'gulp-babel'），
 source = require（'vinyl-source-流'），
 buffer = require（'vinyl-buffer'）; 
 $ b gulp.task（'script'，function（）{
 return rollup（{entry：'app.js'}）
 .pipe（source（'app.js '））
 .pipe（buffer（））
 .pipe（babel（））
 .pipe（gulp.dest（'dist'））; 
}）; 
  

I try to write these code

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

but it shows some error:

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)

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.

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

解决方案

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

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.

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"));
});

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.

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.

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'));
});

这篇关于如何使用'gulp-babel'和'gulp-browserify'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！