browserify babel gulp 没有编译import的文件

1.遇到坑的gulp配置:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

var gulp = require('gulp'),     watch = require('gulp-watch'),     babel = require('gulp-babel'); var envify = require('gulp-envify'); var browserify = require('gulp-browserify'); var SourceMap = require('gulp-sourcemaps'); var uglify = require('gulp-uglifyjs'); var SourceMapSupport = require('gulp-sourcemaps-support'); gulp.task('react', () => {     var environment = {         NODE_ENV: 'production'     };     gulp.src('./es/index.js')         .pipe(SourceMap.init())         .pipe(babel({             babelrc: false,             plugins: ['transform-es2015-modules-commonjs']         }))         .pipe(browserify({             insertGlobals: true,             debug: !gulp.env.production         }))         .pipe(envify(environment))         .pipe(uglify())         .pipe(SourceMap.write('.'))         .pipe(gulp.dest('js')) });   gulp.task('default', () => {     return watch('./es/*.js', function() {         gulp.run('react');     }); });

　　

　　今天我遇到了这个问题，babel运行了先把es6文件编译，然后交给browserify 处理import的文件，可是报错了，因为先用babel编译es6文件后，import export 编译成了require module exports 这类，这样browserify就可以识别，然后browserify就会导入这些import的文件，然后打包进去到js文件里面。可是回到babel编译上，有一个问题是babel没有把import的文件也给编译了，因为babel不能导入import文件来处理，babel只是编译了es6代码，并不进行import的文件的打包处理，所以import的文件就没有被babel编译，然后交给browserify处理后，会出现import文件里的es6语法没有被编译。

 

      这时候解决思路就是再babel编译一遍经过babel->browserify后的文件，也就是babel->browserify->babel,这样import的文件也会被编译成es6语法，不过babel->browserify过程 import自己写的文件需要用require方式导入，export也是需要exports方式导出，这样browserify才能识别，因为browserify不认识import文件里的import类语法。

2.改进配置：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

var gulp = require('gulp'),     watch = require('gulp-watch'),     babel = require('gulp-babel'); var envify = require('gulp-envify'); var browserify = require('gulp-browserify'); var SourceMap = require('gulp-sourcemaps'); var uglify = require('gulp-uglifyjs'); var SourceMapSupport = require('gulp-sourcemaps-support'); gulp.task('react', () => {     var environment = {         NODE_ENV: 'production'     };     gulp.src('./es/index.js')         .pipe(SourceMap.init())         .pipe(babel({             babelrc: false,             presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],             plugins: ['transform-decorators-legacy']         }))  //编译es6文件         .pipe(browserify({             insertGlobals: true,             debug: !gulp.env.production         })) //打包require文件到js包里面         .pipe(babel({             babelrc: false,             presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],             plugins: ['transform-decorators-legacy']         })) //再编译一次require文件里的es6语法         .pipe(envify(environment))         .pipe(uglify())         .pipe(SourceMap.write('.'))         .pipe(gulp.dest('js')) });   gulp.task('default', () => {     return watch('./es/*.js', function() {         gulp.run('react');     }); });

　　2.优化gulp配置：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

var gulp = require('gulp'),     watch = require('gulp-watch'),     babel = require('gulp-babel'); var envify = require('gulp-envify'); var browserify = require('gulp-browserify'); var SourceMap = require('gulp-sourcemaps'); var uglify = require('gulp-uglifyjs'); var SourceMapSupport = require('gulp-sourcemaps-support'); gulp.task('react', () => {     var environment = {         NODE_ENV: 'production'     };     gulp.src('./es/index.js')         .pipe(SourceMap.init())         .pipe(babel({             babelrc: false,             plugins: ['transform-es2015-modules-commonjs']         })) //这里只需要把import export 编译成commonjs规范即可，这样browserify就可以识别了         .pipe(browserify({             insertGlobals: true,             debug: !gulp.env.production         }))         .pipe(babel({             babelrc: false,             presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],             plugins: ['transform-decorators-legacy']         })) //最终这里再把js文件中所有的es6语法编译成es5语法         .pipe(envify(environment))         .pipe(uglify())         .pipe(SourceMap.write('.'))         .pipe(gulp.dest('js')) });   gulp.task('default', () => {     return watch('./es/*.js', function() {         gulp.run('react');     }); });