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>

posted on 2017-04-15 22:09 joken1310 阅读(1101) 评论(1) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）

joken-前端工程师

最新随笔

我的标签

阅读排行榜

评论排行榜

最新评论