?CJS?,?UMD?,?ESM和?IIFE怎么用

這篇文章主要講解了“CJS,UMD,ESM和IIFE怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CJS,UMD,ESM和IIFE怎么用”吧！

CJS,UMD,ESM,IIFE是JavaScript用來實現"模塊"的不同規則。

CJS

CommonJS的簡寫，只能在 NodeJS 上運行，使用 require("module") 讀取并加載模塊。

缺點：不支持瀏覽器，執行后才能拿到依賴信息，由于用戶可以動態 require，無法做到提前分析依賴以及Tree-Shaking 。

CommonJS 規范加載模塊是同步的，也就是說，只有加載完成，才能執行后面的操作。

用法如下：

// 文件名: foo.js
var $ = require('jquery');

function myFunc(){};

// 暴露公共方法（一個）
module.exports = myFunc;

AMD

Asynchronous Module Definition的縮寫（代表異步模塊定義），可以看作 CJS 的異步版本，制定了一套規則使模塊可以被異步 require 進來并在回調函數里繼續使用，然后 require.js 等前端庫也可以利用這個規則加載代碼了。

用法如下:

// 文件名: foo.js
define(['jquery'], function ($) {
    // 方法
    function myFunc(){};

    // 暴露公共方法
        return myFunc;
});

定義的第一個部分是一個依賴數組，第二個部分是回調函數，只有當依賴的組件可用時（像RequireJS這樣的腳本加載器會負責這一部分，包括找到文件路徑）回調函數才被執行。

理想狀態下，期望其依賴是異步加載的，通過在中注入script，不阻塞瀏覽器的加載和渲染，但實際環境下，其表現的沒有那么好，因此需要 amd 模塊為一個單文件模塊并與require.js 優化器配合來進行渲染。

UMD

Universal Module Definition的縮寫（代表通用模塊定義），同時兼容 CJS 和 AMD，并且支持直接在前端用 <script src="lib.umd.js"></script> 的方式加載。現在還在廣泛使用，不過可能將被 ESM 和 IIFE 逐漸代替。

用法如下：

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之類的
        module.exports = factory(require('jquery'));
    } else {
        // 瀏覽器全局變量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function($) {
    // 方法
    function myFunc() {};

    // 暴露公共方法
    return myFunc;
}));

IIFE

Immediately Invoked Function Expression的縮寫（立即調用函數表達式），只是一種寫法，可以隱藏一些局部變量，可以用來代替 UMD 作為純粹給前端使用的寫法。

IIFE的寫法如下：

(function () {
    // 語句
})();

ESM

ECMAScript Module的縮寫，使用 import export 來管理依賴。由于它們只能寫在所有表達式外面，所以打包器可以輕易做到分析依賴以及 Tree-Shaking。ESM 也支持動態加載（import ）。

瀏覽器直接通過 <script type="module"> 即可使用該寫法。

用法如下：

import React from 'react';

感謝各位的閱讀，以上就是“CJS,UMD,ESM和IIFE怎么用”的內容了，經過本文的學習后，相信大家對CJS,UMD,ESM和IIFE怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！