我正在尝试编译 ES6 js 文件。我在 gulp 管道中使用 gulp-traceur 和 gulp-wepback。
gulp.task('default', function () {
return gulp.src('js/app.js')
.pipe(traceur())
.pipe(webpack())
.pipe(concat('app.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js'));
运行 gulp 时。我认为错误:意外的保留字。您可能需要一个合适的加载器来处理这种文件类型。其中包含一个“类”字的行。 (ES6 语法)
我不知道如何一起使用这些插件?
最佳答案
此设置会将 'js/app.js'
传递给 traceur,但不会传递任何相关文件,然后 webpack 将从该转译后的文件开始,并像普通 JS 一样处理其余部分。实际上我什至不确定 webpack 是否会得到 app.js
的转译版本。
正确的方法是使用 webpack 作为主要入口点,并告诉 webpack 转译它遇到的所有文件。我还建议使用 Webpack 的 uglifyjs 逻辑,而不是事后用 gulp 将其添加。
gulp.task('default', function () {
return gulp.src('js/app.js')
.pipe(webpack({
module: {
loaders: [{
test: /^(?!.*(bower_components|node_modules))+.+\.js$/,
loader: 'traceur'
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
})
.pipe(concat('app.js'))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/js'));
});
关于javascript - 如何使用 gulp-traceur 和 gulp-webpack?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28313476/