from Require.js to Webpack(why)

写在前面：

本文主要参考 From Require.js to Webpack - Part 1 (the reasons)，原文做者将项目从 require.js 转移到了 webpack 并详细说明了缘由以及好处。

• commonjs （webpack 默认 commonjs，很显然，commonjs 同步书写 js 的方式比 AMD 舒服不少）
• 客户端单元测试（node 具备丰富的测试框架，webpack 使得客户端测试也可使用这些框架）
• 模块复用（node 和客户端的模块复用）
• NPM（自然支持 NPM，由于 NPM 自己发布的就是 commonjs 模块）
• 更简单的 ES6 支持以及更多的插件支持（好比 webpack 自带的 uglify 等等）

诚然，做者只是从模块组织方式去对比，并无牵扯到构建工具这块。而若是说到构建工具，webpack 可能还有更多其余的优点，好比热重载，打包时间大大缩短，css 打包，等等，这些应该和 gulp 等去比较。

尽管 webpack 自己也支持 AMD，可是总以为 webpack+AMD 有点 Vue/React+JQ 的既视感，并且也不能很好地结合 NPM 使用，因此我的以为若是要迁移，仍是要迁移地完全一点，毕竟 AMD 的支持只会愈来愈少。

Webpack has been a huge help to our client-side code base and developer experience in general. It's allowed greater parity and reuse between our client-side and node code, it's made testing our code much easier and it's allowed us to cut way down on the config and extra support code needed to maintain two different module systems in the same code base. The most important thing it has provided though is access to the NPM ecosystem in the browser. Coding will never be the same again :)

CommonJS

Node 用习惯后，咱们便会爱上它的 commonjs 的组织方式。使用 webpack 后，咱们即可以使用全部的 node 模块，这简直太酷了！很显然，愈来愈多的模块会支持 commonjs 可是却并无兼容 AMD。

在这点上 require.js 和 webpack 的区别是（也是 AMD 和 commonjs 的区别）：

1. 前者使用 return，后者使用 module.export
2. webpack 用 . 表明相对路径， 做用和 path.resolve() 相似
3. webpack 能够方便搭配 NPM 使用

客户端单元测试

让 mocha 支持 require.js 很是费力，可是若是使用 webpack 就不同了。只要代码没有基于 DOM，就能够被看成普通的 node 模块同样进行单元测试。

复用和模块化

复用和模块化，AMD 也有啊？有什么不一样呢？

1. node 自己就是 commonjs 方式进行代码组织，这就意味着咱们能够把写 node 时的一些最佳实践，设计模式等无缝迁移到客户端代码的书写中。
2. 咱们能够把服务端的一些 commonjs 模块直接用到 客户端，而不是须要改形成 AMD（好比 date/time formatting 以及一些工具模块）

NPM

尽管 commonjs 语法自己比 AMD 优雅，而且还有以上的各类好处，可是迁移到 webpack 最大的好处是对于 NPM 的支持。尽管 require.js 本质上也可以搭配 NPM 使用，可是很是麻烦。

NPM 搭配 require.js：

1. 须要暴露 node_modules 文件夹路径（commonjs 会自动去寻找 node_modules，可是 AMD 不会）
2. 须要在配置文件 config.js 中为模块添加 alias（由于 npm install 的模块内部是 commonjs 的组织方式，若是直接 require 并不能找到，须要设置 alias）
3. 肯定你 install 的模块自己没有依赖（由于依赖自己并不会生效）
4. define('your-module', function(yourModule) { });

而 NPM 搭配 webpack 只须要：

1. require() the module.

成熟的 ES6 以及插件支持

webpack 对于 ES6 的支持（babel-loader）以及一些内置的插件支持（uglify）比 require.js 强大。

做者在原文举了个简单的例子，他想在 require.js 中使用 ES6 Class，可是须要两步，首先须要 babel 将 ES6 转为 ES5，而后再使用 es6 require.js plugin，可是用 babel-loader 就方便多了。