【js基礎】前端模模塊化知識點整理

簡單記錄下本身對前端模塊化的一些淺薄理解，不對之處歡迎指正

在介紹前端模打包工具以前，咱們先簡單說一下瀏覽器、v8和nodejs，由於咱們如今用到的大部分前端模打包工具，都是須要nodejs環境運行的，同時他們都能經過npm進行下載

1. 瀏覽器：

瀏覽器組成可分兩部分：Shell+內核。瀏覽器內核又能夠分紅兩部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。
渲染引擎，負責對網頁語法的解釋（如HTML、JavaScript）並渲染網頁。咱們平時說的「瀏覽器內核」就是指「瀏覽器所採用的渲染引擎」。
渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不一樣的瀏覽器內核對網頁編寫語法的解釋也有不一樣，所以同一網頁在不一樣的內核的瀏覽器裏的渲染（顯示）效果也可能不一樣，因此過去須要測試人員人肉測試頁面在不一樣瀏覽器中的效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。JS引擎負責對JavaScript進行解釋、編譯和執行，以使網頁達到一些動態的效果。

2. V8引擎：

Chrome的JS引擎，使用C/C++編寫的一款很是優秀的開源JS引擎

3. node.js

Nodejs對V8引擎進行了封裝，使V8能夠運行在非瀏覽器環境，這使得咱們的JavaScript代碼能夠在非瀏覽器環境運行

4. npm

NPM是隨同NodeJS一塊兒安裝的包管理工具，簡單來說，是一個代碼共享倉庫
npm包下都有package.json配置文件，註明了包的版本號，依賴，做者等信息，下載包時，會一塊兒下載package.json中註明依賴的包

npm install 包名    //安裝最新版本的包到當前文件夾
npm i 包名      //npm install 包名簡寫
npm i包名@版本號   //安裝制定版本
npm i 包名 –-save   //--save兩個減號，安裝包到當前文件夾，並將包名及版本號添加到package.json的dependencies
npm i 包名 –-save-dev  //並將包名及版本號添加到package.json的devDependencies，下載包時，不會下載devDependencies中的包
npm i 包名 –D   //npm i 包名 –save-dev縮寫
npm i 包名 –g   //全局安裝包

5. javascript模塊化

簡單來說，有了模塊，咱們就能夠更方便地使用別人的代碼，想要什麼功能，就加載什麼模塊。這樣作有一個前提，那就是你們必須以一樣的方式編寫模塊，不然你有你的寫法，我有個人寫法，豈不是亂了套！
正是有了統一的規範，咱們才能方便的在npm上下載別人的代碼/包/類庫，並在咱們本身的工程中引用

CommonJS

CommonJS（nodejs, webpack等實現了該規範）
node.js的模塊系統，就是參照CommonJS規範實現的。，webpack 也是以CommonJS的形式來書寫。在CommonJS中，有一個全局性方法require，用於加載模塊。假定有一個數學模塊math.js，就能夠像下面這樣加載。

var math = require('math');

而後，就能夠調用模塊提供的方法：

math.add(2,3); // 5

AMD

AMD（Asynchronous Module Definition）（RequireJS實現了該規範）
基於commonJS規範的nodeJS出來之後，服務端的模塊概念已經造成，很天然地，你們就想要客戶端模塊。並且最好二者可以兼容，一個模塊不用修改，在服務器和瀏覽器均可以運行。可是，因爲一個重大的侷限，使得CommonJS規範不適用於瀏覽器環境。仍是上面的代碼，若是在瀏覽器中運行，會有一個很大的問題，由於require 是同步的，因此若是加載時間很長，整個應用就會停在那裏等。所以，瀏覽器端的模塊，不能採用"同步加載"（synchronous），只能採用"異步加載"（asynchronous）。這就是AMD規範誕生的背景。
AMD也採用require()語句加載模塊，可是不一樣於CommonJS，它要求兩個參數：
require([module], callback);
第一個參數[module]，是一個數組，裏面的成員就是要加載的模塊；第二個參數callback，則是加載成功以後的回調函數。若是將前面的代碼改寫成AMD形式，就是下面這樣：

require(['math'], function (math) {
    math.add(2, 3);
});

es6

經過import、export實現模塊的輸入輸出。其中import命令用於輸入其餘模塊提供的功能，export命令用於規定模塊的對外接口。（我的觀點，雖然import和export在瀏覽器端實現有着巨大的技術難點，可是標準就是標準，遲早會被瀏覽器端實現或有更優的標準，遲早一統天下，幹掉commonjs、cmd、amd）
然而像import和export這兩個命令如今在任何瀏覽器中都是不支持的, 同時babel也沒法將其轉換爲瀏覽器支持的ES5, 緣由在於babel只是個翻譯，假設a.js 裏 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，並不會把b.js的內容給讀取合併進來, 若是想在最終的某一個js裏，包含 a.js，b.js 的代碼，那就須要用到打包工具，例如webpack。

6. 打包工具

目前經常使用的前端打包工具備不少，grunt、Gulp、webpack、rollup等，這些工具能夠單獨使用，也能夠互相配合使用這些打包工具能夠幫助前端工程師們完成預處理語言編譯、es6代碼轉es五、代碼壓縮混淆等工做