browserify 使用

1、安装和生成：

npm install -g browserify
browserify main.js > bundle.js

2、解析：

browserify 可以让我们在前端引用npm 模块，或自定义的模块
使用require('XX')来引用npm 模块
用require('./XX.js')引用当前目录下自定义模块
一般会在main 或app js 里引用模块来实现入口js
编写完成后用以上二命令把main生成一个结果js
生成中会把所有require引用的模块都生成到结果js里。
browserify它实现了把模块转换并生成在一起。从而来使用，在页面可以引用
这样在页面里只需引用生成 的js就可，不必引用多个script
当不需要引用某个js时，在main里注释掉然后生成就可以了。

node 模块编写：
exports.XX=fn();
require('XX').方法()

module.exports=fn();
require('XX')()

browserify 生成react 

它可以把node 里的模块转成浏览器可以运行的，并打包生成一个js

当也可以把node react编写的代码打包生成。

但需要配置：

需要reactify 模块，

在package里配置：

"browserify": {
    "transform": [
      [
        "reactify"
      ]
    ]
  }

通过reactify把react 组件生成。

browserify XX.js > bundle.js

对于es6的支持。

https://github.com/babel/babelify

安装 

npm install --save-dev babelify

npm install --save-dev babel-preset-es2015 babel-preset-react

运行 

browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]

对于react es6支持总配置：

"babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "reactify": "^1.1.1",

 "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"
          ]
        }
      ],
      [
        "reactify",
        {}
      ]
    ]
  },

在babelify 里的es2015 react是重点。

这样直接：browserify a.js > b.js就可以了。

js里就可以：

import React from 'react';
import ReactDOM from 'react-dom';

自动编译：

npm install watchify -g 

用watchify a.js -o b.js