browserify 不打包某些文件或者把公共文件提取出来教程
Posted jake-前端工程师
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了browserify 不打包某些文件或者把公共文件提取出来教程相关的知识，希望对你有一定的参考价值。
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>
以上是关于browserify 不打包某些文件或者把公共文件提取出来教程的主要内容，如果未能解决你的问题，请参考以下文章
如何从代码覆盖率数字中排除 browserify 生成的代码？