var gulp = require('gulp')
var fs = require("fs")
var babelify = require('babelify')
var browserify = require('browserify')
var rename = require('gulp-rename')
var uglifyjs = require('gulp-uglifyjs')
var vendors = ['react','react-dom','jquery'];//定义不打包到js文件中的模块，或者vender公共模块
gulp.task('es2015', () => {
browserify({
entries: ['./src/main.js'],
extensions: ['.js', '.jsx'],
debug: true
})
.external(vendors) //这个功能就是排除打包某些模块的
.transform(["babelify", {
babelrc: false,
presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],
plugins: ['transform-decorators-legacy']
}])
.bundle()
.pipe(fs.createWriteStream("bundle.js"));
})
gulp.task('vender', () => {
var bf = browserify({
debug: true
});
vendors.forEach(lib => {
bf.require(lib); //这里require公共模块，下面将额外打包vender的模块
});
bf.transform(["babelify", {
babelrc: false,
presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],
plugins: ['transform-decorators-legacy']
}])
.bundle()
.pipe(fs.createWriteStream("vender.js"));
})
gulp.task('uglifyjs', () => {
gulp.src('./bundle.js')
.pipe(uglifyjs())
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('./dist'))
})
gulp.task('default', () => {
gulp.run('vender');
gulp.watch('./src/**/*.js', () => {
gulp.run('es2015')
})
})
browserify 不打包某些文件或者把公共文件提取出来
这里重点的方法就是external，至于写法就按上面那样。
另外，你要让没打包那些模块的程序能够正常运行，就需要额外打包一个公共模块的js文件。或者你在程序中不要import模块，直接接口用着，这样你额外再链接进来那个插件也可以使用。
比如：
$(()=>{
console.log('start===')
})
$ 是jquery接口，和jquery接口一模一样，这样你依然可以在有链接入jquery插件的文档里正常运行程序。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app"></div>
</body>
<!-- <script type="text/javascript" src='./vender.js'></script>
<script type="text/javascript">
var $=require('jquery');
$(function(){
console.log('jjjjj')
})
</script> -->
<script type="text/javascript" src='./dist/jquery.min.js'></script>//jquery插件，确保$接口可以正常使用
<script type="text/javascript" src='./bundle.js'></script> //bundle.js 里面没有import jquery ，这样还是依然可以使用jquery的接口，和正常运行
</html>
前端工程师、程序员
