browserify babel gulp 沒有編譯import的文件

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