npm是nodejs包管理工具,提供了模块的发布以及下载功能,与bower不同的是,模块文件保存在npm平台上面
browserify是npm在前端项目里延伸的神器,有了它之后,前后端可以共用一个commonjs规范的模块
关于各种包管理之前的比较,可以参考知乎上面的一个问题,bower,spm,npm
安装 npm & browserify
npm基本上安装nodejs的时候就会自动安装
安装browserify
npm install -g browserify
因为这是命令行使用的,所以推荐使用-g参数
使用 browserify
- 首先定义一个
commonjs规范的模块，功能比较简单,名为app.js
var app = {
get: function(){
return 'feenan!';
}
}
// 此处对外导出模块功能
module.exports = app;
然后我们来定义一个使用这个模块的文件,名为main.js
// 此处引用模块跟`nodejs`里一样
var app = require('./app.js')
var p = document.createElement('p');
p.textContent = app.get(); // -> 'feenan'
document.body.appendChild(p);
到了这里也许大家就会怀疑,前端浏览器里根本就没有require,module的定义,上面的文件应该会报错吧,没错,假如直接在html文件里引用上面的js文件的话,肯定会报错,现在是browserify出马的时候了
执行一条非常简单的命令就OK了
browserify main.js > bundle.js
上面的bundle.js可以自定义别的名字,最后我们只需要把这个新生成的文件引入到html文件内即可,不用再引入别的文件
<!doctype html>
<html>
<head>
<title>browserify demo</title>
<meta charset="utf8">
</head>
<body>
<script src="js/bundle.js"></script>
</body>
</html>
最后在chrome里打开这个页面将会输出feenan的字样,是不是感觉很棒,确实，上面的app.js文件也可以拿到nodejs里去引用，因为它遵守commonjs规范
自动执行命令 watchify
当每次修改文件,然后执行上面的命令,这个过程其实是比较浪费时间的,幸运的时,browserify社区提供了一个工具watchify,先来安装它吧
npm install -g watchify
然后在命令行里使用它
watchify main.js -o bundle.js
这样当你每次修改main.js之后,就会自动生成转后的入口文件,有兴趣想研究browserify原理的,可以直接看看生成之后的js文件
想了解更多的使用方法以及原理的可以点击下面的文件 * browserify * watchify
总结
npm与browserify的结合使用,将会有效的利用模块重用,对提高工作效率有很大的帮助.最后说下chrome 36发布了,听说对web 组件规范又支持了不少.