1.遇到坑的gulp配置:
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.改进配置:
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配置:
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'); }); });
前端工程师、程序员