5. Modular and Components

## 5.1 browserify 简单的 modular bundler， **推荐** ， 因为职责单一的工具更不容易遇到奇怪的问题。 使用 browserify 使用 [babel transformer](https://babeljs.io/docs/setup/#browserify) 就可以把所有的 component 以 node 的方式模块化的组织，最后 bundle 成一个 js 文件。 * [babel 官网](https://babeljs.io/docs/setup/#browserify)就说明了如何使用 browserify *babelify* 你的模块们 * 如果使用 *gulp* ，需要参考 gulp [这篇文档](https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md) * *grunt* 用户请使用 grunt-browserify 插件(非官方) * *broccoli* 用户插件在 [这里](https://github.com/babel/broccoli-babel-transpiler) ## 5.2 webpack 以 grunt 的方式 browserify 你的代码，非常强大的 bundler。但是个人并不喜欢 grunt，karma，webpack 这种基于配置的工具，原因很简单，配置不是代码！配置不是代码！配置不是代码！ 配对了当然简单，但是配错了怎么办，没法 debug。 虽然不喜欢，我还是要告诉你怎么用，就这么一行配置就好了 ~~~ module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader"} ] } ~~~