添加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，其代碼示例位於頁面底部。