Question

我有一个gulp任务，使用Babel转换ES6 / ES7，进行uglifying，连接和eslinting。但是，当我完成编写gulp任务时，我意识到require函数在浏览器中不起作用，所以现在我需要将browserify转换添加到我的任务中。添加了browserify后，我收到了错误。

如果没有浏览器，我的gulp任务就是这样的：

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 扔掉//未处理的'错误'事件 ^错误：无法找到模块'babel-runtime / helpers / typeof' '/家庭/尼/ WEB / Eclipse的/工作区/酒杯/应用/酒杯/ servletBlackJack /的WebContent / TMP / JS'

执行browserify(...)块时会完全抛出错误。

你能帮我正确地完成这项工作吗？

Answer 1

您需要extension切换here：

将具有指定EXTENSION的文件视为模块，此选项可多次使用。

他们可能需要以这种方式更新你的gulp文件：

 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任务转换的最后一步

1 个答案: