添加 Browserify 作为 gulp 任务转换的最后一步
Add Browserify as the last step in gulp task's transformations
我有一个 gulp 任务,它使用 Babel 转换 ES6/ES7,进行丑化、连接和 eslinting。然而,当我写完我的 gulp 任务时,我意识到 require
函数在浏览器中不起作用,所以现在我需要将 browserify 转换添加到我的任务中。添加 browserify 后,出现错误。
这是我的 gulp 任务在没有 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 的转换。
但是我的第二个 gulp 任务给了我以下错误:
events.js:85
throw er; // Unhandled 'error' event
^ Error: Cannot find module 'babel-runtime/helpers/typeof' from
'/home/denis/WEB/Eclipse/workspace/BlackJack/Application/BlackJack/servletBlackJack/WebContent/tmp/js'
恰好在执行 browserify(...)
块时抛出错误。
你能帮我让它正常工作吗?
您需要 extension
从 here 切换:
Consider files with specified EXTENSION as modules, this option can used multiple times.
您可能需要这样更新您的 gulpfile:
browserify({
entries: './tmp/js/all.min.js',
extensions: ['.js'] // wanna add '.jsx' ?
})
.bundle()
.pipe(source('all.min.js'))
.pipe(gulp.dest('./production/js'));
也许 babel 任务也是:
// ...
.pipe(babel({
plugins: ['transform-runtime'],
presets: ['es2015'],
extensions: ['.js'] // wanna add .jsx?
})
// ...
尝试命令行:
browserify --extension=.js src/**/*.js -o bundle.js -t [ babelify --presets [ es2015 ] ]
另请参阅页面底部的代码示例 my article。
我有一个 gulp 任务,它使用 Babel 转换 ES6/ES7,进行丑化、连接和 eslinting。然而,当我写完我的 gulp 任务时,我意识到 require
函数在浏览器中不起作用,所以现在我需要将 browserify 转换添加到我的任务中。添加 browserify 后,出现错误。
这是我的 gulp 任务在没有 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 的转换。
但是我的第二个 gulp 任务给了我以下错误:
events.js:85 throw er; // Unhandled 'error' event ^ Error: Cannot find module 'babel-runtime/helpers/typeof' from '/home/denis/WEB/Eclipse/workspace/BlackJack/Application/BlackJack/servletBlackJack/WebContent/tmp/js'
恰好在执行 browserify(...)
块时抛出错误。
你能帮我让它正常工作吗?
您需要 extension
从 here 切换:
Consider files with specified EXTENSION as modules, this option can used multiple times.
您可能需要这样更新您的 gulpfile:
browserify({
entries: './tmp/js/all.min.js',
extensions: ['.js'] // wanna add '.jsx' ?
})
.bundle()
.pipe(source('all.min.js'))
.pipe(gulp.dest('./production/js'));
也许 babel 任务也是:
// ...
.pipe(babel({
plugins: ['transform-runtime'],
presets: ['es2015'],
extensions: ['.js'] // wanna add .jsx?
})
// ...
尝试命令行:
browserify --extension=.js src/**/*.js -o bundle.js -t [ babelify --presets [ es2015 ] ]
另请参阅页面底部的代码示例 my article。