添加 Browserify 作为 gulp 任务转换的最后一步

Question

我有一个 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(...) 块时抛出错误。

你能帮我让它正常工作吗？

Answer 1

您需要 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。

添加 Browserify 作为 gulp 任务转换的最后一步

Add Browserify as the last step in gulp task's transformations

gulp

ecmascript-6

browserify