問題描述

我嘗試編寫這些代碼

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

但它顯示了一些錯(cuò)誤:

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 沒有轉(zhuǎn)換 jsx 代碼.但是如果我只是刪除 .pipe(browserify()) 我發(fā)現(xiàn)確實(shí)轉(zhuǎn)換了，就不能讓 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 并不是這樣工作的.你不會(huì)給它一堆緩沖區(qū)來收集和捆綁.

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

你給它一個(gè)文件——入口文件——它傳遞給 Browserify.Browserify 會(huì)檢查條目文件引用的 other 文件，然后直接從文件系統(tǒng)加載這些文件，這意味著您不能事先使用 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 應(yīng)該是這樣的，只傳入入口文件:

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

但是，請(qǐng)注意 gulp-browserify 不再維護(hù)，這正是原因.gulp 插件不應(yīng)該直接從文件系統(tǒng)中讀取.這就是為什么你應(yīng)該直接使用 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.

這就是我對(duì)您問題的回答，但我想補(bǔ)充一點(diǎn):如果您使用的是 ES2015 模塊語法(您可能應(yīng)該使用)，那么有更好的方法來做到這一點(diǎn).Browserify 將所有模塊單獨(dú)包裝在一堆代碼中，以使編程的 CommonJS API 正常工作，但是 ES2015 模塊具有聲明性語法，這使得工具更容易靜態(tài)地對(duì)其進(jìn)行操作.有一個(gè)名為 Rollup 的工具利用了這一點(diǎn)，允許它生成比 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'));
});

這篇關(guān)于如何同時(shí)使用“gulp-babel"和“gulp-browserify"的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！