概述
最近在使用vue框架重构公司的一个微信端产品，要想发挥vue的强大功能，离不开browserify或者webpack这些构建工具，基于这些构建工具可以在vue开发中使用ES6语法，单文件组件等特性，我个人更倾向于使用browserify构建工具,使用browserify工具可以在浏览器平台上提供像在node平台一样的开发体验，下面几篇文章将介绍下browserify构建的详细用法。
安装
cd app;
//初始化项目
npm init
//安装browserify
npm install browserify --save-dev
基本用法
在package.json中的scripts属性中添加以下命令：
"xxx" : "browserify ./source/module.js -o ./dist/dist.js"
或者
"xxx" : "browserify ./source/module.js > ./dist/dist.js"
在当前目录打开命令窗口:
npm run xxx
即可在dist目录下看到打包后的dist.js文件。
browserify 后面的第一个参数表示要打包的前端程序的入口，-o或者>表示打包后的输出文件。browserify会根据入口文件中的require或者import(ES6,需要安装babel)自动完成依赖分析，并将依赖文件打包为一个单文件。
下面是API的调用方式:
var Browserify = require("browserify");
var fs = require("fs");
var b = new Browserify();
//入口文件
b.add("../source/module.js");
//打包输出
b.bundle().pipe(fs.createWriteStream("../dist/dist.js"));
将部分依赖文件打包为符合commonjs规范的模块，外部可以通过require调用其中暴露的api,输入结果仍为单文件
下面是测试代码，有三个模块(文件):modulea,moduleb,module,其中module依赖modulea和moduleb
modulea:
module.exports = {
name:"moduleA",
getName:function(){
console.log(this.name);
}
}
moduleb:
module.exports = {
name:"moduleB",
getName:function(){
return this.name;
}
}
module:
var moduleA = require("ma");
var moduleB = require("mb");
moduleA.getName();
命令脚本:
browserify -r ./source/modulea.js:ma -r ./source/moduleb.js:mb ./source/module.js > ./dist/bundle.js
新建index.html，源码如下:
<body>
<script type="text/javascript" src="./dist/bundle.js"></script>
<script type="text/javascript">
var mb = require("mb");
console.log(mb.getName()+"========");
</script>
</body>
控制台打印如下:
上述过程也可以通过调用API编码实现,结果和上面是一样的:
var browserify = require("browserify");
var path = require("path");
var fs = require("fs");
var sourcepath = path.resolve(__dirname,"../","source");
var dist = path.resolve(__dirname,"../","dist");
var b = browserify();
b.add(path.join(sourcepath,"module.js"));
b.require(path.join(sourcepath,"modulea.js"),{expose:"ma"});
b.require(path.join(sourcepath,"moduleb.js"),{expose:"mb"});
b.bundle().pipe(fs.createWriteStream(path.join(dist,"bundle.js")));
将依赖模块独立打包，最终输出多个文件，模块间可以通过require调用
有些场景下，比如有多个页面，每个页面都需要依赖common.js，这个时候将每个页面的js打包为一个文件就不合适，commonjs的代码会重复出现在多个文件中，而且也不利于缓存优化。
browserify提供了三种方式支持多JS文件：
- -i(–ignore),将依赖的文件以{}空对象替代，这个命令看起来没什么用处啊，依赖一个空的对象，不能提供任何属性和方法，暂时没发现这个命令的使用场景。
- -u(–exclude),忽略依赖的对象,该依赖对象不会被打包，依赖的对象可以是第三方的或者是通过-r命令生成的另外一个bundle文件，可以通过-u命令指定一些第三方类库，比如vue的类库。
- -x(external),-x指向的文件是通过-r命令生成的另外一个文件，该文件不会被打包。
第一种方式目前不知道有什么用处，第三种方式打包的时候，我在win10平台上打包的文件路径有问题，需要对引用路径特别注意，尤其是调用API打包的时候。因此我推荐使用第二种打包方式。
举例：有两个文件base.js和demo2.js，其中base.js是基础类包，可能在多个页面中都需要，现在将base.js和demo2.js分别打包：
base.js:
module.exports = {
name:"base",
getName:function(){
return this.name;
}
}
demo2.js:
var com = require("common");
console.log(com.getName());
打包脚本:
browserify -r ./source/base.js:common > ./dist/common.js
browserify -u common ./source/demo2.js > ./dist/bundle.js
index.html源码如下:
<script type="text/javascript" src="./dist/common.js"></script>
<script type="text/javascript" src="./dist/bundle.js"></script>
<script type="text/javascript">
var com = require("common");
console.log(com.getName());
</script>
控制台输出如下：
调用API打包源码如下：
var browserify = require("browserify");
var path = require("path");
var fs = require("fs");
var b = new browserify();
b.require(path.resolve(__dirname,"../source/base.js"),{
expose:"common"
});
b.bundle().pipe(fs.createWriteStream("../dist/common.js"));
var b2 = new browserify();
b2.exclude("common");
b2.add("../source/demo2.js");
b2.bundle().pipe(fs.createWriteStream("../dist/bundle.js"));
使用browserify构建工具可以直接使用一些原来只有在node平台上才有的API
比如url,path,stream,buffer,process等等。
transform
browserify提供了非常方便的transform接口来扩展打包行为。一个基本的transform接口定义格式如下：
var through2 = require("through2");
module.exports = function(file,opts){
return through2(function(chunk,enc,next){
//自定义transform逻辑
});
}
定义完成后，可以通过-t命令指定该文件，将自定义行为应用到打包中，也可以通过package.json的配置文件来配置过滤器：
"browserify":{
"transform":[
"./customTransform.js"
]
}
许多知名的框架为了用户方便的使用browserify，都提供了现成的xxxify模块，比如babelify,vueify等。
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
