無編譯/無服務(wù)器實(shí)現(xiàn)瀏覽器的CommonJS模塊化
引言
平時經(jīng)常會逛 Github，除了一些 star 極高的大項目外，還會在 Github 上發(fā)現(xiàn)很多有意思的小項目。項目或是想法很有趣，或是有不錯的技術(shù)點(diǎn)，讀起來都讓人有所收獲。所以準(zhǔn)備匯總成一個「漫游Github」系列，不定期分享與解讀在 Github 上偶遇的有趣項目。本系列重在原理性講解，而不會深扣源碼細(xì)節(jié)。
好了下面進(jìn)入正題。本期要介紹的倉庫叫one-click.js。
1. one-click.js是什么
one-click.js是個很有意思的庫。Github 里是這么介紹它的：
我們知道，如果希望 Commonjs的模塊化代碼能在瀏覽器中正常運(yùn)行，通常都會需要構(gòu)建/打包工具，例如webpack、rollup 等。而 one-click.js 可以讓你在不需要這些構(gòu)建工具的同時，也可以在瀏覽器中正常運(yùn)行基于 CommonJS 的模塊系統(tǒng)。
進(jìn)一步的，甚至你都不需要啟動一個服務(wù)器。例如試著你可以試下 clone 下 one-click.js 項目，直接雙擊（用瀏覽器打開）其中的example/index.html就可以運(yùn)行。
Repo 里有一句話概述了它的功能：
Use CommonJS modules directly in the browser with no build step and no web server.
舉個例子來說 ——
假設(shè)在當(dāng)前目錄（demo/）現(xiàn)在，我們有三個“模塊”文件：
demo/plus.js：
// plus.js
module.exports = function plus(a, b) {
return a + b;
}
demo/divide.js：
// divide.js
module.exports = function divide(a, b) {
return a / b;
}
與入口模塊文件demo/main.js：
// main.js
const plus = require('./plus.js');
const divide = require('./divide.js');
console.log(divide(12, add(1, 2)));
// output: 4
常見用法是指定入口，用webpack編譯成一個 bundle，然后瀏覽器引用。而 one-click.js 讓你可以拋棄這些，只需要在html中這么用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>one click example</title>
</head>
<body>
<script type="text/JavaScript" src="./one-click.js" data-main="./main.js"></script>
</body>
</html>
注意script標(biāo)簽的使用方式，其中的data-main就指定了入口文件。此時直接用瀏覽器打開這個本地 HTML 文件，就可以正常輸出結(jié)果 7。
2. 打包工具是如何工作的？
上一節(jié)介紹了 one-click.js 的功能 —— 核心就是實(shí)現(xiàn)不需要打包/構(gòu)建的前端模塊化能力。
在介紹其內(nèi)部實(shí)現(xiàn)這之前，我們先來了解下打包工具都干了什么。俗話說，知己知彼，百戰(zhàn)不殆。
還是我們那三個JavaScript文件。
plus.js：
// plus.js
module.exports = function plus(a, b) {
return a + b;
}
divide.js：
// divide.js
module.exports = function divide(a, b) {
return a / b;
}
與入口模塊 main.js：
// main.js
const plus = require('./plus.js');
const divide = require('./divide.js');
console.log(divide(12, add(1, 2)));
// output: 4
回憶一下，當(dāng)我們使用 webpack 時，會指定入口（main.js）。webpack 會根據(jù)該入口打包出一個 bundle（例如 bundle.js）。最后我們在頁面中引入處理好的 bundle.js 即可。這時的 bundle.js 除了源碼，已經(jīng)加了很多 webpack 的“私貨”。
簡單理一理其中 webpack 涉及到的工作：
- 依賴分析：首先，在打包時 webpack 會根據(jù)語法分析結(jié)果來獲取模塊的依賴關(guān)系。簡單來說，在 CommonJS 中就是根據(jù)解析出的 require語法來得到當(dāng)前模塊所依賴的子模塊。
- 作用域隔離與變量注入：對于每個模塊文件，webpack 都會將其包裹在一個 function 中。這樣既可以做到module、require等變量的注入，又可以隔離作用域，防止變量的全局污染。
- 提供模塊運(yùn)行時：最后，為了require、exports的有效執(zhí)行，還需要提供一套運(yùn)行時代碼，來實(shí)現(xiàn)模塊的加載、執(zhí)行、導(dǎo)出等功能。
如果對以上的 2、3 項不太了解，可以從篇文章中了解webpack 的模塊運(yùn)行時設(shè)計。
3. 我們面對的挑戰(zhàn)
沒有了構(gòu)建工具，直接在瀏覽器中運(yùn)行使用了 CommonJS 的模塊，其實(shí)就是要想辦法完成上面提到的三項工作：
- 依賴分析
- 作用域隔離與變量注入
- 提供模塊運(yùn)行時
解決這三個問題就是 one-click.js 的核心任務(wù)。下面我們來分別看看是如何解決的。
3.1. 依賴分析
這是個麻煩的問題。如果想要正確加載模塊，必須準(zhǔn)確知道模塊間的依賴。例如上面提到的三個模塊文件 ——main.js依賴plus.js和divide.js，所以在運(yùn)行main.js中代碼時，需要保證plus.js和divide.js都已經(jīng)加載進(jìn)瀏覽器環(huán)境。然而問題就在于，沒有編譯工具后，我們自然無法自動化的知道模塊間的依賴關(guān)系。
對于RequireJS這樣的模塊庫來說，它是在代碼中聲明當(dāng)前模塊的依賴，然后使用異步加載加回調(diào)的方式。顯然，CommonJS 規(guī)范是沒有這樣的異步 API 的。
而 one-click.js 用了一個取巧但是有額外成本的方式來分析依賴 —— 加載兩遍模塊文件。在第一次加載模塊文件時，為模塊文件提供一個 mock 的require方法，每當(dāng)模塊調(diào)用該方法時，就可以在 require 中知道當(dāng)前模塊依賴哪些子模塊了。
// main.js
const plus = require('./plus.js');
const divide = require('./divide.js');
console.log(minus(12, add(1, 2)));
例如上面的main.js，我們可以提供一個類似下面的require方法：
const recordedFieldAccessesByRequireCall = {};
const require = function collect(modPath) {
recordedFieldAccessesByRequireCall[modPath] = true;
var script = document.createElement('script');
script.src = modPath;
document.body.appendChild(script);
};
main.js加載后，會做兩件事：
- 記錄當(dāng)前模塊中依賴的子模塊；
- 加載子模塊。
這樣，我們就可以在recordedFieldAccessesByRequireCall中記錄當(dāng)前模塊的依賴情況；同時加載子模塊。而對于子模塊也可以有遞歸操作，直到不再有新的依賴出現(xiàn)。最后將各個模塊的recordedFieldAccessesByRequireCall整合起來就是我們的依賴關(guān)系。
此外，如果我們還想要知道m(xù)ain.js實(shí)際調(diào)用了子模塊中的哪些方法，可以通過Proxy來返回一個代理對象，統(tǒng)計進(jìn)一步的依賴情況：
const require = function collect(modPath) {
recordedFieldAccessesByRequireCall[modPath] = [];
var megaProxy = new Proxy(function(){}, {
get: function(target, prop, receiver) {
if(prop == Symbol.toPrimitive) {
return function() {0;};
}
return megaProxy;
}
});
var recordFieldAccess = new Proxy(function(){}, {
get: function(target, prop, receiver) {
window.recordedFieldAccessesByRequireCall[modPath].push(prop);
return megaProxy;
}
});
// …… 一些其他處理
return recordFieldAccess;
};
以上的代碼會在你獲取被導(dǎo)入模塊的屬性時記錄所使用的屬性。
上面所有模塊的加載就是我們所說的“加載兩遍”的第一遍，用于分析依賴關(guān)系。而第二遍就需要基于入口模塊的依賴關(guān)系，“逆向”加載模塊即可。例如main.js依賴plus.js和divide.js，那么實(shí)際上加載的順序是plus.js->divide.js->main.js。
值得一提的是，在第一次加載所有模塊的過程中，這些模塊執(zhí)行基本都是會報錯的（因為依賴的加載順序都是錯誤的），我們會忽略執(zhí)行的錯誤，只關(guān)注依賴關(guān)系的分析。當(dāng)拿到依賴關(guān)系后，再使用正確的順序重新加載一遍所有模塊文件。one-click.js 中有更完備的實(shí)現(xiàn)，該方法名為scrapeModuleIdempotent，具體源碼可以看這里。
到這里你可能會發(fā)現(xiàn)：“這是一種浪費(fèi)啊，每個文件都加載了兩遍?！?/p>
確實(shí)如此，這也是 one-click.js 的tradeoff：
In order to make this work offline, One Click needs to initialize your modules twice, once in the background upon page load, in order to map out the dependency graph, and then another time to actually perform the module loading.
3.2. 作用域隔離
我們知道，模塊有一個很重要的特點(diǎn) —— 模塊間的作用域是隔離的。例如，對于如下普通的 JavaScript 腳本：
// normal script.js var foo = 123;
當(dāng)其加載進(jìn)瀏覽器時，foo變量實(shí)際會變成一個全局變量，可以通過window.foo訪問到，這也會帶來全局污染，模塊間的變量、方法都可能互相沖突與覆蓋。
在 NodeJS 環(huán)境下，由于使用 CommonJS 規(guī)范，同樣像上面這樣的模塊文件被導(dǎo)入時，foo變量的作用域只在源模塊中，不會污染全局。而 NodeJS 在實(shí)現(xiàn)上其實(shí)就是用一個 wrap function 包裹了模塊內(nèi)的代碼，我們都知道，function 會形成其自己的作用域，因此就實(shí)現(xiàn)了隔離。
NodeJS 會在require時對源碼文件進(jìn)行包裝，而 webpack 這類打包工具會在編譯期對源碼文件進(jìn)行改寫（也是類似的包裝）。而 one-click.js 沒有編譯工具，那編譯期改寫肯定行不通了，那怎么辦呢？下面來介紹兩種常用方式：
3.2.1. JavaScript 的動態(tài)代碼執(zhí)行
一種方式可以通過fetch請求獲取 script 中文本內(nèi)容，然后通過new Function或eval這樣的方式來實(shí)現(xiàn)動態(tài)代碼的執(zhí)行。這里以fetch+new Function方式來做個介紹：
還是上面的除法模塊divide.js，稍加改造下，源碼如下：
// 以腳本形式加載時，該變量將會變?yōu)?window.outerVar 的全局變量，造成污染
var outerVar = 123;
module.exports = function (a, b) {
return a / b;
}
現(xiàn)在我們來實(shí)現(xiàn)作用域屏蔽：
const modMap = {};
function require(modPath) {
if (modMap[modPath]) {
return modMap[modPath].exports;
}
}
fetch('./divide.js')
.then(res => res.text())
.then(source => {
const mod = new Function('exports', 'require', 'module', source);
const modObj = {
id: 1,
filename: './divide.js',
parents: null,
children: [],
exports: {}
};
mod(modObj.exports, require, modObj);
modMap['./divide.js'] = modObj;
return;
})
.then(() => {
const divide = require('./divide.js')
console.log(divide(10, 2)); // 5
console.log(window.outerVar); // undefined
});
代碼很簡單，核心就是通過fetch獲取到源碼后，通過new Function將其構(gòu)造在一個函數(shù)內(nèi)，調(diào)用時向其“注入”一些模塊運(yùn)行時的變量。為了代碼順利運(yùn)行，還提供了一個簡單的require方法來實(shí)現(xiàn)模塊引用。
當(dāng)然，上面這是一種解決方式，然而在 one-click.js 的目標(biāo)下卻行不通。因為 one-click.js 還有一個目標(biāo)是能夠在無服務(wù)器（offline）的情況下運(yùn)行，所以fetch請求是無效的。
那么 one-click.js 是如何處理的呢？下面我們就來了解下：
3.2.2. 另一種作用域隔離方式
一般而言，隔離的需求與沙箱非常類似，而在前端創(chuàng)建一個沙箱有一種常用的方式，就是 iframe。下面為了方便起見，我們把用戶實(shí)際使用的窗口叫作“主窗口”，而其中內(nèi)嵌的 iframe 叫作“子窗口”。由于 iframe 天然的特性，每個子窗口都有自己的window對象，相互之間隔離，不會對主窗口進(jìn)行污染，也不會相互污染。
下面仍然以加載 divide.js 模塊為例。首先我們構(gòu)造一個 iframe 用于加載腳本：
var iframe = document.createElement("iframe");
iframe.style = "display:none !important";
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
var htmlStr = `
<html><head><title></title></head><body>
<script src="./divide.js"></script></body></html>
`;
doc.open();
doc.write(htmlStr);
doc.close();
這樣就可以在“隔離的作用域”中加載模塊腳本了。但顯然它還無法正常工作，所以下一步我們就要補(bǔ)全它的模塊導(dǎo)入與導(dǎo)出功能。模塊導(dǎo)出要解決的問題就是讓主窗口能夠訪問子窗口中的模塊對象。所以我們可以在子窗口的腳本加載運(yùn)行完后，將其掛載到主窗口的變量上。
修改以上代碼：
// ……省略重復(fù)代碼
var htmlStr = `
<html><head><title></title></head><body>
<scrip>
window.require = parent.window.require;
window.exports = window.module.exports = undefined;
</script>
<script src="./divide.js"></script>
<scrip>
if (window.module.exports !== undefined) {
parent.window.modObj['./divide.js'] = window.module.exports;
}
</script>
</body></html>
`;
// ……省略重復(fù)代碼
核心就是通過像parent.window這樣的方式實(shí)現(xiàn)主窗口與子窗口之間的“穿透”：
- 將子窗口的對象掛載到主窗口上；
- 同時支持子窗口調(diào)用主窗口中方法的作用。
上面只是一個原理性的粗略實(shí)現(xiàn)，如果對更嚴(yán)謹(jǐn)?shù)膶?shí)現(xiàn)細(xì)節(jié)感興趣可以看源碼中的loadModuleForModuleData 方法。
值得一提的是，在「3.1. 依賴分析」中提到先加載一遍所有模塊來獲取依賴關(guān)系，而這部分的加載也是放在 iframe 中進(jìn)行的，也需要防止“污染”。
3.3. 提供模塊運(yùn)行時
模塊的運(yùn)行時一版包括了構(gòu)造模塊對象（module object）、存儲模塊對象以及提供一個模塊導(dǎo)入方法（require）。模塊運(yùn)行時的各類實(shí)現(xiàn)一般都大同小異，這里需要注意的就是，如果隔離的方法使用 iframe，那么需要在主窗口與子窗口中傳遞一些運(yùn)行時方法和對象。
當(dāng)然，細(xì)節(jié)上還可能會需要支持模塊路徑解析（resolve）、循環(huán)依賴的處理、錯誤處理等。由于這部分的實(shí)現(xiàn)和很多庫類似，又或者不算特別核心，在這里就不詳細(xì)介紹了。
4. 總結(jié)
最后歸納一下大致的運(yùn)行流程：
1.首先從頁面中拿到入口模塊，在 one-click.js 中就是document.querySelector("script[data-main]").dataset.main；
2.在 iframe 中“順藤摸瓜”加載模塊，并在require方法中收集模塊依賴，直到?jīng)]有新的依賴出現(xiàn)；
3.收集完畢，此時就拿到了完整的依賴圖；
4.根據(jù)依賴圖，“逆向”加載相應(yīng)模塊文件，使用 iframe 隔離作用域，同時注意將主窗口中的模塊運(yùn)行時傳給各個子窗口；
5.最后，當(dāng)加載到入口腳本時，所有依賴準(zhǔn)備就緒，直接執(zhí)行即可。
總的來說，由于沒有了構(gòu)建工具與服務(wù)器的幫助，所以要實(shí)現(xiàn)依賴分析與作用域隔離就成了困難。而 one-click.js 運(yùn)用上面提到的技術(shù)手段解決了這些問題。
那么，one-click.js 可以用在生產(chǎn)環(huán)境么？顯然是不行的。
Do not use this in production. The only purpose of this utility is to make local development simpler.
所以注意了，作者也說了，這個庫的目的僅僅是方便本地開發(fā)。當(dāng)然，其中一些技術(shù)手段作為學(xué)習(xí)資料，咱們也是可以了解學(xué)習(xí)一下的。感興趣的小伙伴可以訪問one-click.js 倉庫進(jìn)一步了解。
以上就是無編譯/無服務(wù)器實(shí)現(xiàn)瀏覽器的CommonJS模塊化的詳細(xì)內(nèi)容，更多關(guān)于無編譯/無服務(wù)器實(shí)現(xiàn)CommonJS模塊化的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用layui的router來進(jìn)行傳參的實(shí)現(xiàn)方法
今天小編就為大家分享一篇使用layui的router來進(jìn)行傳參的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)導(dǎo)航欄樓層特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
Bootstrap每天必學(xué)之工具提示（Tooltip）插件
Bootstrap每天必學(xué)之工具提示（Tooltip）插件，工具提示就是通過鼠標(biāo)移動選定在特定的元素上時，顯示相關(guān)的提示語，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要給大家介紹了關(guān)于利用js實(shí)現(xiàn)時間日期的相加相減的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考解決價值,需要的朋友可以參考下2023-09-09
微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果實(shí)例
小程序日益增多的情況下,UI風(fēng)格顯得越來越重要,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
webpack踩坑系列之less-loader6.0.0的javascriptEnabled報錯問題
這篇文章主要介紹了webpack踩坑系列之less-loader6.0.0的javascriptEnabled報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
BOM系列第三篇之定時器應(yīng)用(時鐘、倒計時、秒表和鬧鐘)
這篇文章主要介紹了BOM系列第三篇之定時器應(yīng)用(時鐘、倒計時、秒表和鬧鐘) 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這次在項目中前后臺的數(shù)據(jù)交互中用到了json，經(jīng)過這段時間的使用,簡單總結(jié)一下json的原理與使用，需要了解的朋友可以參考下2012-11-11
uniapp小程序自定義tabbar以及初次加載閃屏解決方法
Uniapp小程序可以通過自定義tabbar來實(shí)現(xiàn)更加個性化的界面設(shè)計,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序自定義tabbar以及初次加載閃屏解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
js實(shí)現(xiàn)瀑布流效果（自動生成新的內(nèi)容）
本文主要介紹了js實(shí)現(xiàn)瀑布流效果：當(dāng)滾動條接近底部會自動生成新的內(nèi)容。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03