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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。