模塊

先簡(jiǎn)單說一下模塊這玩意：

一個(gè)模塊（module）就是一個(gè)文件。一個(gè)腳本就是一個(gè)模塊。就這么簡(jiǎn)單。

內(nèi)部有自己的局部作用域以及程序，外部可以通過模塊暴露的接口進(jìn)行調(diào)用、執(zhí)行模塊內(nèi)的程序

為什么要模塊

我們從另一個(gè)角度出發(fā)，如果沒有模塊，會(huì)怎么樣？

• 污染全局作用域
• script 標(biāo)簽自己插入自己手動(dòng)排好順序
• ....

總之就是，難以復(fù)用、難以維護(hù)！

所以很明顯，我們需要模塊化。

但是不同的環(huán)境是有不同的模塊話機(jī)制的~

就目前來說，常用常見的模塊化打包方式有這么三種：

• common js
• ES module
• UMD

commonjs

cjs 是 Node 中的模塊規(guī)范，導(dǎo)入和導(dǎo)出的 API 為

• require
• exports

它的 require 是同步的，因?yàn)?node 模塊系統(tǒng)是需要同步讀取模塊文件內(nèi)容并編譯執(zhí)行以得到模塊接口的。

而在瀏覽器端，一般都以 script 標(biāo)簽引入 —— script 標(biāo)簽可是天生異步的。

so 它本身只可以運(yùn)行在 node 環(huán)境下，比如ms

他就是只支持 cjs，如果你想用 CDN 直接在瀏覽器中使用是不行的

但是，webpack 是支持 cjs 的，通過 webpack 就可以將其運(yùn)行在瀏覽器中。所以，通過 webpack 打包你就可以在瀏覽器環(huán)境中使用 ms。

也就是說，在 webpack 環(huán)境下，cjs 即支持 node 環(huán)境，也支持瀏覽器環(huán)境~

除此之外，他是在運(yùn)行時(shí)加載的，模塊輸出的也只是拷貝

UMD

全稱 Universal Module Definition —— “通用模塊定義”

這也算是應(yīng)運(yùn)而生，它可以在運(yùn)行或者編譯時(shí)讓同一個(gè)代碼模塊使用 cjs 或者 amd

amd : Asynchronous ModuleDefinition
異步模塊定義，采用異步方式加載模塊。所有依賴模塊的語句，都定義在一個(gè)回調(diào)函數(shù)中，等到模塊加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行

也就是 集它們于一身，所以它既可以在 node 或者 webpack 環(huán)境下用 require 引用使用，也可以 在瀏覽器中 直接用 script 引用 CDN 使用

實(shí)現(xiàn)大概如下：

((root, factory) => {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //CommonJS
        var $ = requie('jquery');
        module.exports = factory($);
    } else {
        root.testModule = factory(root.jQuery);
    }
})(this, ($) => {
    //todo
});

也就是在定義模塊的時(shí)候檢測(cè)當(dāng)前環(huán)境和模塊定義的方式，將各種模塊方法轉(zhuǎn)換為同一種寫法

有一些包就是用的這種打包方法

有些包是多種打包方法都有，比如

antd：

es/index.js下就是 es6 的打包方式（下面會(huì)說）

dist/antd.js下就是 umd 的打包方式

lib/index.js下就是 cjs 的打包方式

es moudle

上面說的可能都是過去一段時(shí)間里最好的打包方式，但是 在未來 ES6 的打包方式 應(yīng)該還是會(huì)全面替代它們

esm 是基于 ESMAScript 模塊化規(guī)范的 —— 他的爹就代表著 他的前途一片光明

node 環(huán)境和瀏覽器環(huán)境下都支持~

另外他模塊輸出的是值的引用。

還是在編譯時(shí)加載，這意味著可以在編譯期間進(jìn)行 Tree Shaking，減少 js 體積

另外還支持動(dòng)態(tài)引入

const a = await import ('xxx')

總結(jié)

不同之處在于：

• 何時(shí)加載？運(yùn)行時(shí)還是編譯？
• 引出的值是拷貝還是引用？
• 可在哪些環(huán)境下使用？
• 同步還是異步？

以上就是前端工程化cjs umd esm 打包差異詳解的詳細(xì)內(nèi)容，更多關(guān)于前端cjs umd esm 打包差異的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論