browserify的一些用法

1. 伪例子

var b = browserify({    noParse: [path.resolve(__dirname, 'public/bower-libs/ace/build/src/ace.js')],  // 这里存放的是绝对路径或者已经安装的模块名，noParse的模块内部的require会被忽略。    debugs: true,    cache: {},    // browserify的插件watchify需要开启这个缓存    packageCache: {} // 同上});b.add('./public/src/index.js');// b.ignore('externalAce');  // ignore 模块A后，再require模块A，会得到一个空的对象: {}，参数可以是路径，可以是模块名// b.exclude('externalAce');  // exclude模块A后，再require模块A，会得到undefined，参数可以是路径可以是模块名// b.require('./public/bower-libs/ace/build/src/ace.js', {expose: 'externalAce'}); // 有些是外部的库，内部require路径，或者像这样操作。在内部引用的时候可以用过require （expose出来的变量）b.plugin(watchify);b.transform('debowerify');  // bower的插件无法直接require，所以需要这个插件b.transform('cssify', { 'auto-inject': true });b.transform('lessify', { plugins: [inlineurl], 'auto-inject': true });b.transform('jadeify', { pretty: true});// 以上都是一些插件b.on('update', bundle);  // watchify的用法gulp.task('js', bundle);  // 结合gulp使用效果更佳。function bundle (){    return  b.bundle()        .on('error', function (err){            console.log(err.message);        })        .pipe(vinylSourceStream('index.js'))        .pipe(gulpRename('output.js'))        .pipe(gulp.dest('./build/'));}

2. 代码分割实践

1. 手动提取模块

提取npm 或者 bower 安装的jquery模块

browserify -r jquery > jquery-bundle.js   // 命令行方式// API方式var fs = require('fs');var browserify = require('browserify');var outputfile = fs.createWriteStream('jquery-bundle.js');var b = browserify();       b.require('jquery');    b.bundle()     .pipe(outputfile);

提取外部的bootstrap模块
这里需要用到browserify-shim，安装好后，在package.json中添加以下内容

  "browser": {    "bootstrap": "./bootstrap/js/bootstrap.js"  },  "browserify": {    "transform": [ "browserify-shim" ]  // 这里的transform也可以在下面的代码中指定，比较灵活  },  "browserify-shim": {    "bootstrap":  { "depends": ["jquery:jQuery"] }  // depends `jquery`代表require('jquery'),需要jquery的依赖，冒号后面代表将依赖输出为全局的jQuery变量。很有用  }

使用browserify-shim插件的使用

browserify -r bootstrap > bootstrap-bundle.js  // 命令行方式// API方式var fs = require('fs');var browserify = require('browserify');var outputfile = fs.createWriteStream('bootstrap-bundle.js');var b = browserify();       b.require('bootstrap');    b.bundle()     .pipe(outputfile);

入口文件entry.js

var $ = require('jquery');    require('bootstrap');  // bootstrap不需要输出东西

编译入口文件

// 命令行方式browserify entry.js --exclude jquery --exclude bootstrap > index.js  // 在package.json中已经指定browserify-shim transform,可以这么用。browserify entry.js -t browserify-shim  --exclude jquery --exclude bootstrap > index.js // 没有指定的在这里指定transform// --exclude 参数的指定，browserify 在打包entry时将默认排除jquery 和 bootstrap。// API方式var fs = require('fs');var browserify = require('browserify');var outputfile = fs.createWriteStream('index.js');var b = browserify();   // 当然首先得require('browserify');    b.add('entry.js');    b.exclude('jquery');    b.exclude('bootstrap');    b.transform('browserify-shim');    b.bundle()     .pipe(outputfile);

html中如何使用

<script src="./jquery-bundle.js"/><script src="./bootstrap-bundle.js"/><script src="./index.js"/> // 保证入口在最后就行

3.异步代码分割

需要安装partition-bundle

npm install --save partiion-bundle

文件

├── a.js├── b.js├── .gulpfile.js├── index.js├── mapping.json└── package.json

a.js

module.exports = function() {    alert('a.js');}

b.js

module.exports = function() {    alert('b.js');}

index.js

loadjs(['./a', './b'], function(e, d) {    console.log(e, d);  });

mapping.json

{  "entry.js": ["./index"],  "common.js": ["./b", "./a"]}

.gulpfile.js

var child_process = require('child_process');child_process.exec('browserify -p [ partition-bundle --map mapping.json --output output --url output --main ./index ]', function(err) {    if (err) {        console.log(err);    }    else {        console.log("browserify done");    }});

运行

node .gulpfile.js

打包结果是

.├── output│   ├── common.js│   └── entry.js   // 在html中放入entry.js即可使用├── a.js├── b.js├── .gulpfile.js├── index.js├── mapping.json└── package.json