我有一个吞吞吐吐的任务,该任务使用Babel转换ES6 / ES7,进行丑化,串联和拖尾处理。但是,当我完成gulp任务的编写时,我意识到该require
功能在浏览器中不起作用,因此现在我需要在任务中添加browserify转换。添加了browserify后,出现错误。
这是没有浏览器的情况下我的吞咽任务的样子:
gulp.task('js', () => {
gulp
.src('./js/**/*.js')
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.pipe(babel({
plugins: ['transform-runtime'],
presets: ['es2015']
})
)
.pipe(uglify({ mangle: false }))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./production/js/'));
});
当我添加browserify时,它开始看起来像这样:
gulp.task('js', () => {
// Clean tmp/js directory
gulp
.src('./tmp/js/*.js')
.pipe(clean());
// Transform all js and throw it into tmp/js directory
gulp
.src('./js/**/*.js')
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.pipe(babel({
plugins: ['transform-runtime'],
presets: ['es2015']
})
)
.pipe(uglify({ mangle: false }))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./tmp/js/'));
// Browserify the all.min.js file and throw it
// into ./production/js directory
browserify('./tmp/js/all.min.js')
.bundle()
.pipe(source('all.min.js'))
.pipe(gulp.dest('./production/js'));
});
这是我在任务中使用的一些导入:
import babel from 'gulp-babel';
import clean from 'gulp-clean';
import uglify from 'gulp-uglify';
import source from 'vinyl-source-stream';
import browserify from 'browserify';
import concat from 'gulp-concat';
import eslint from 'gulp-eslint';
我的第一个Gulp任务工作得很好,因为它只完成了从ES6到与浏览器兼容的js的转换。
但是我的第二项任务给了我以下错误:
events.js:85 throw er; //未处理的“错误”事件^错误:无法从'/ home / denis / WEB / Eclipse / workspace / BlackJack / Application / BlackJack / servletBlackJack / WebContent / tmp / js'中找到模块'babel-runtime / helpers / typeof'
错误恰恰在执行该browserify(...)
块时抛出。
您能帮我正确地完成这项工作吗?
您需要extension
从这里切换:
将具有指定扩展名的文件视为模块,此选项可以多次使用。
您可能需要通过以下方式更新他们的gulpfile:
browserify({
entries: './tmp/js/all.min.js',
extensions: ['.js'] // wanna add '.jsx' ?
})
.bundle()
.pipe(source('all.min.js'))
.pipe(gulp.dest('./production/js'));
也许也是通天的任务:
// ...
.pipe(babel({
plugins: ['transform-runtime'],
presets: ['es2015'],
extensions: ['.js'] // wanna add .jsx?
})
// ...
尝试命令行:
browserify --extension=.js src/**/*.js -o bundle.js -t [ babelify --presets [ es2015 ] ]
另外,请参阅页面底部的带有代码示例的文章。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句