browserify 不打包某些文件或者把公共文件提取出来教程

时间 2019-11-24

标签 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 不打包某些文件或者把公共文件提取出来javascript

　　这里重点的方法就是external，至于写法就按上面那样。html

另外，你要让没打包那些模块的程序可以正常运行，就须要额外打包一个公共模块的js文件。或者你在程序中不要import模块，直接接口用着，这样你额外再连接进来那个插件也能够使用。java

好比：react

$(()=>{
	console.log('start===')
})

　　$ 是jquery接口，和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>