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

Question

我有一个使用Babel转换ES6/ES7的gulp任务，进行uglifying，concatenation和eslinting。但是，当我完成我的吞咽任务时，我意识到require函数在浏览器中不起作用，所以现在我需要将browserify转换添加到我的任务中。添加了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'; 

我的第一个吞噬任务工作得很好，因为它只做转换从ES6到浏览器兼容的js。

但我的第二一饮而尽任务给了我以下错误：

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')); 

也许通天任务太：

// ... 
    .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，其代码示例位于页面底部。