如何同时使用 'gulp-babel' 和 'gulp-browserify'
How to use both 'gulp-babel' and 'gulp-browserify'
我试着写这些代码
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 6 开始,您需要手动声明预设,检查 this。
基本上,在您项目的根目录中,您需要一个包含以下内容的 .babelrc
:
{
"presets": [ "es2015", "react" ]
}
以及package.json中对应的npm模块:
// package.json
{
"devDependencies": {
...
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
...
}
}
gulp-browserify 并不是那样工作的。你不会给它一堆缓冲区来收集和捆绑。
你给它一个文件——入口文件——它传递给 Browserify。 Browserify 检查入口文件引用了哪些 other 文件,然后直接从文件系统加载这些文件,这意味着您不能事先使用 gulp 插件修改它们。
所以,真的,如果我们假装你不想在你的源文件上使用 Babel,你的 gulp 文件应该看起来像这样,只传递入口文件:
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'));
});
这是一个 sample repository 和 gulp
、babel
和 browserify
以下是代码片段
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();
});
我试着写这些代码
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 6 开始,您需要手动声明预设,检查 this。
基本上,在您项目的根目录中,您需要一个包含以下内容的 .babelrc
:
{
"presets": [ "es2015", "react" ]
}
以及package.json中对应的npm模块:
// package.json
{
"devDependencies": {
...
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
...
}
}
gulp-browserify 并不是那样工作的。你不会给它一堆缓冲区来收集和捆绑。
你给它一个文件——入口文件——它传递给 Browserify。 Browserify 检查入口文件引用了哪些 other 文件,然后直接从文件系统加载这些文件,这意味着您不能事先使用 gulp 插件修改它们。
所以,真的,如果我们假装你不想在你的源文件上使用 Babel,你的 gulp 文件应该看起来像这样,只传递入口文件:
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'));
});
这是一个 sample repository 和 gulp
、babel
和 browserify
以下是代码片段
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();
});