Browserify

Browserfiy

怎么添加lib呢

• 手动去官网下载
• 使用bower

Bower

参考
http://blog.fens.me/nodejs-bower-intro/

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

参考
http://javascript.ruanyifeng.com/tool/browserify.html
http://www.tuicool.com/articles/nYVj2i

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

搬运
http://segmentfault.com/a/1190000002941361

结合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是啥 原博中有 我搬运一下

debug: true是告知Browserify在运行同时生成内联sourcemap用于调试。引入gulp-sourcemaps并设置loadMaps: true是为了读取上一步得到的内联sourcemap，并将其转写为一个单独的sourcemap文件。vinyl-source-stream用于将Browserify的bundle()的输出转换为Gulp可用的vinyl（一种虚拟文件格式）流。vinyl-buffer用于将vinyl流转化为buffered vinyl文件（gulp-sourcemaps及大部分Gulp插件都需要这种格式）

browserify-shim

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

<script src="jquery.js"></script>
<script src="jquery.plugin.js"></script>

这样引入插件的时候 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 是这样的

var $ = require("jquery");
require("jquery.pep");

$(".move-box").pep();
···
> PS  注意jquery这个库本身是在npm中的， 所以我是通过npm安装的jquery
> 但是jquery.pep 不是， 我是通过shim的方式将这个pep引入的

在生成的pep中有这么一段
```javascript
(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])