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

丹尼斯·雅科文科(Denis Yakovenko)

我有一个吞吞吐吐的任务,该任务使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

字谜排序最后一步

来自分类Dev

下一步取决于django的最后一步的最佳方法是什么?

来自分类Dev

N Queen,F#在最后一步获取异常

来自分类Dev

我的Prestashop 1.5.6在最后一步安装时冻结

来自分类Dev

在单行中表示SQL结果-最后一步

来自分类Dev

打印PDF的代码在最后一步不起作用

来自分类Dev

Angular Crossfade动画跳到最后一步

来自分类Dev

For循环-如果输出为NULL,则缺少最后一步

来自分类Dev

在安装的最后一步运行静脉示例时出错

来自分类Dev

gcc make 的最后一步出现错误

来自分类Dev

Dijkstra 一步一步

来自分类Dev

如何一步一步将前缀复制并添加到文件名?

来自分类Dev

使用“下一步”作为返回键

来自分类Dev

一步登录

来自分类Dev

一步将元素迭代添加到列表

来自分类Dev

向CSS动画添加另一步

来自分类Dev

詹金斯(Jenkins):即使最后一步不稳定,即使最后一步成功,也将构建标记为成功

来自分类Dev

gulp + browserify转换配置

来自分类Dev

Browserify和Babel gulp任务

来自分类Dev

检索列表中的最后一个节点以进行进一步处理

来自分类Dev

一步一步向前声明和使用

来自分类Dev

一步一步汇总和计算

来自分类Dev

使用Quanteda一步一步创建DFM

来自分类Dev

如何一步一步登录到ftp?

来自分类Dev

Python Code 一步一步理解代码

来自分类Dev

一步一步加载div(淡入)

来自分类Dev

循环范围,一步一步?

来自分类Dev

一步一步构建 url - Angular

来自分类Dev

Matplotlib动画的一步