Browserify

Browserfiy

怎么添加lib呢

手动去官网下载

使用bower

Bower

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系

简单点说 各种lib下载器 (同时还能下载依赖包)

因为会使用到bower命令 最好全局安装

npm install bower -g

然后使用下面的命令就能在bower_components中看到文件夹

bower install jquery

lib都下载好了 就可以再用script标签引入

<script src="/bower_componets/jquery/dist/jquery.min.js">

bower作为一个包管理工具 自然还有更新删除的功能啦

bower update jquery
bower uninstall jquery

bower update命令用于更新模块。如果不给出模块的名称，则更新所有模块

bower uninstall命令用于卸载模块。默认情况下，会连所依赖的模块一起卸载。比如，如果卸载jquery-ui，会连jquery一起卸载，除非还有别的模块依赖jquery。

Browserify

Browserify 本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它，我们可以使用Node.js的npm模块管理器。所以，实际上，它等于间接为浏览器提供了npm的功能。

Browserify是一个node.js模块，主要用于改写现有的CommonJS模块，使得浏览器端也可以使用这些模块。使用下面的命令，在全局环境下安装Browserify。

$ npm install -g browserify

最好在全局环境中安装, 因为后面要用到Browserify这个命令

Browserify参照了Node中的模块系统，约定用require()来引入其他模块，用module.exports来引出模块 因此我们用Node 的CMD形式随便写两个模块foo.js 和 main.js (main.js依赖foo.js)

foo.js

module.exports = function(x) {
console.log(x);
};

main.js

var foo = require("./foo");
foo("Hi");

然后

browserify main.js > compiled.js
#OR
browserify main.js -o compiled.js

之后在HTML中引入这个 compiled.js 就可以在浏览器中使用刚才的Node模块了

compiled.js 不仅包括了main.js，还包括了它所依赖的foo.js。两者打包在一起，保证浏览器加载时的依赖关系

Browserify编译的时候，会将脚本所依赖的模块一起编译进去。这意味着，它可以将多个模块合并成一个文件。

Debug

现在Browserify支持 source map

在其官方文档中 https://github.com/substack/node-browserify 有这么一个命令

$ browserify main.js --debug | exorcist bundle.js.map > bundle.js

将main.js 编译成 bundle.js

PS exorcist 也是一个包 需全局安装

这样之后就生成了 bundle.js 和 bundle.js.map

有了source map debug就很方便

实时更新 Beefy

http://didact.us/beefy/

全局安装beefy

beefy main.js:bundle.js --live

无需指定debug参数 默认debug就是打开的

--live 是修改后自动刷新

结合Gulp

结合Gulp使用时，你的Browserify只安装在某个项目内--- 意思是browserify需要在工程内安装而不是全局安装

npm install browserify --save-dev

这里需要加上 --save-dev 的原因是一会儿之后我们需要用到package.json

随便写个main.js

var name = require("./name");
console.log("Hello! " + name);

name.js

module.exports = "aya";

在没有gulp的情况下我们是手动编译的，用browserify 命令

这里我们用gulp来作编译这件事情 写一个gulpfile.js

从require中看出 当前project 不仅要安装browserify 还需要gulp-sourcemaps vinyl-source-stream vinyl-buffer

var gulp = require("gulp");
var browserify = require("browserify");
var sourcemaps = require("gulp-sourcemaps");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task("browserify", function () {
var b = browserify({
entries: "main.js",
debug: true
});

return b.bundle()
.pipe(source("bundle.js"))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./dist"));
});

上面我向gulp添加了一个任务 这个任务名字是browserify

所做的事情就是调用browserify 然后在当前目录下dist/中生成bundle.js 文件

vinyl是啥 原博中有 我搬运一下

browserify-shim

browserify为了使各个文件中的变量不冲突， 编译后的代码都放在了IIFE中，这样又有了一个新问题， 假如我想使用jquery的插件怎么办？


这样引入插件的时候 jq的插件会默认读取window中的

$

对象 但是现在

$

对象被包起来了， 我们用不到了...

接下来隆重介绍browserify-shim 它是一个npm 模块

npm install browserify-shim --save-dev

package.json中配置如下

{
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"jquery.pep": "./vendor/jquery.pep.js"
},
"browserify-shim": {
"jquery.pep": {
"depends": [
"jquery:jQuery"
]
}
},
"devDependencies": {
"browserify": "^11.0.1"
}
}

那么jQ插件就可以正常运行啦 假如main.js 是这样的

```javascript

var $ = require("jquery");

require("jquery.pep");

$(".move-box").pep();

···


在生成的pep中有这么一段

(function (global){

; jQuery = global.jQuery = require("jquery");
; var __browserify_shim_require__=require;(function browserifyShim(module, define, require) {

;(function ( $, window, undefined ) {
// pep code ..........
}(jQuery, window));

}).call(global, module, undefined, undefined);

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})

},{"jquery":3}]},{},[1])