最全的前端模塊化方案

模塊化主要是用來抽離公共代碼，隔離做用域，避免變量衝突等。將一個複雜的系統分解爲多個模塊以方便編碼。

會講述如下內容

1. CommonJS
2. AMD 及 核心原理實現
3. CMD 及 核心原理實現
4. UMD 及 源碼解析
5. ES6 Module
6. webpack打包策略

CommonJS

同步加載

CommonJS API是以在瀏覽器環境以外構建 JS 生態系統爲目標而產生的項目

若是沒有寫後綴名Node會嘗試爲文件名添加.js、.json、.node後再搜索。

.js件會以文本格式的JavaScript腳本文件解析，.json文件會以JSON格式的文本文件解析，.node文件會以編譯後的二進制文件解析。

AMD

異步加載（對象）

"Asynchronous Module Definition"（異步模塊定義），是由RequireJS提出的

AMD核心實現

function require (url, callback) {
    // url能夠換成List，而後遍歷；
    var $script = document.createElement('script');
    $script.src = url;

    // 利用onload回調，實現依賴加載
    $script.onload = function (e) {
      // 省略callback 檢測
      callback();
    }
    document.body.appendChild($script);
  }

複製代碼

CMD

按需加載

由玉伯提出的（seajs），按需解析加載模塊（代價挺大的），須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊

CMD核心實現

// ajax，怕忘了原生ajax怎麼寫。順手寫一個

  function myAjax (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.send();

    xhr.onreadystatechange = function () {
      if (request.readyState === 4) {
          if (request.status === 200) {
              return callback(request.responseText);
          } else {
              // 省略...
          }
      } else {
        // 省略...
      }
    }
  }

  // 實現
  function require(url) {
    myAjax(url, function(res) {
      // 此時 res 的對應JS的 String形式
      // 解析 省略
      // 執行
      eval(res);
    });
  }
複製代碼

UMD

兼容AMD，CommonJS 模塊化語法。

UMD源碼解析

(function (root, factory) {

    // 判斷是否支持AMD（define是否存在）
    if (typeof define === 'function' && define.amd) {
        define(['b'], factory);

    // 判斷是否支持NodeJS模塊格式（exports是否存在）
    } else if (typeof module === 'object' && module.exports) {
        module.exports = factory(require('b'));

    // 前兩個都不存在，則將模塊公開到全局（window或global）
    } else {
        root.returnExports = factory(root.b);
    }
  } (this, function (b) {
      // ...
  }));
複製代碼

import

加載引用

• 編譯時加載（靜態執行）。
• 加載的是引用
• 不能處於代碼塊中
  • 爲了實現編譯時加載
    • 提案表示能夠用 import()使用時加載
• 不能使用表達式和變量 等運行時加載的語法
  • 同上

webpack打包策略

import會被編譯成 require/exports （CommonJS規範）

1. 直接引入

import xxx.js或者import xxx.css會像添加<script>和<link>標籤同樣注入到全局中去

2. commonjs同步語法

webpack會將require('abc.js')打包進引用它的文件中。以對象的形式獲取。

3. commonjs異步加載

webpack(require.ensure)：webpack 2.x 版本中的代碼分割。

在commonjs中有一個Modules/Async/A規範，裏面定義了require.ensure語法。webpack實現了它，做用是能夠在打包的時候進行代碼分片，並異步加載分片後的代碼。

此時list.js會被打包成一個單獨的chunk文件。像這樣：1.d6f343b727f5923508bf.js

例如：vue路由懶加載const Foo = () => import('./Foo.vue')

manifest

manifest文件是最早加載的，manifest是在vendor的基礎上，再抽取出要常常變更的部分，經過manifest.js文件來管理bundle文件的運行和加載。(好比關於異步加載js模塊部分的內容)

webpack v4.6.0+ 添加了預取和預加載的支持

import(/* webpackPrefetch: true */ 'LoginModal');
  
  會生成 <link rel="prefetch" href="login-modal-chunk.js"> 並追加到頁面頭部
複製代碼

整理不易，喜歡請 star，github.com/zhongmeizhi