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 就方便多了。