引言

所周知，JavaScript社區(qū)喜歡進(jìn)行熱烈的辯論。四年來(lái)，我們?nèi)绾谓M織代碼的問(wèn)題上一直存在一個(gè)分歧——這是一個(gè)基本但令人意外地有爭(zhēng)議的問(wèn)題，繼續(xù)將開發(fā)者分開。

這種分歧圍繞著 CommonJS 和 ES 模塊，這是兩個(gè)用于劃分 JavaScript代碼的主要系統(tǒng)。

理解這個(gè)分歧

當(dāng)JavaScript最初被發(fā)明時(shí)，它的主要角色是作為Web瀏覽器的腳本語(yǔ)言。但是，隨著Node.js的出現(xiàn)，似乎展現(xiàn)出了一系列的可能性。

現(xiàn)在，它不僅僅是一個(gè)瀏覽器的語(yǔ)言。它可以為服務(wù)器和其他應(yīng)用程序提供動(dòng)力。

在那種情境下，瀏覽器中的所有東西都在全局作用域中，你不必過(guò)多地考慮模塊。但是構(gòu)建一個(gè)復(fù)雜的服務(wù)器應(yīng)用程序并不那么簡(jiǎn)單。你不能把所有的代碼都打包在一個(gè)文件中——那將是一個(gè)噩夢(mèng)。

出現(xiàn)的解決方案？一個(gè)叫做CommonJS的模塊系統(tǒng)。

const moduleA = require('./moduleA');

CommonJS 使用一個(gè)叫做 require 的函數(shù)，允許你從其他文件中提取 JavaScript并訪問(wèn)從它們導(dǎo)出的函數(shù)。

然而，JavaScript 很快用ES6——適應(yīng)了這些想法，以滿足Web應(yīng)用程序的需求。他們引入了import和export。

import moduleA from './moduleA';

現(xiàn)在，你可能會(huì)納悶，為什么JavaScript沒有堅(jiān)持已經(jīng)在使用的require調(diào)用呢？

require 的問(wèn)題在于它是同步的，并假設(shè)所有文件都已經(jīng)準(zhǔn)備好。但是，在瀏覽器上下文中，你可能需要等待外部資源時(shí)，require的同步性質(zhì)會(huì)讓系統(tǒng)崩潰。

因此，分裂開始了。

兼容性難題

大多數(shù)開發(fā)者轉(zhuǎn)向ES模塊，因?yàn)樗鼈儾粌H是新穎的，而且很有趣。但一個(gè)相當(dāng)大的群體仍然堅(jiān)持使用CommonJS。這種分裂導(dǎo)致了兼容性問(wèn)題。

如果你在ES模塊內(nèi)部運(yùn)行，你可以沒有問(wèn)題地導(dǎo)入CommonJS。但是，使用CommonJS導(dǎo)入ES模塊是不行的——除非你采用一個(gè)模擬導(dǎo)入的異步函數(shù)解決方法。

const moduleA = await import('./moduleA');

打包器的作用

像Babel或TypeScript這樣的打包器或轉(zhuǎn)譯器為這個(gè)復(fù)雜問(wèn)題增加了另一層，你寫的內(nèi)容取決于你發(fā)出的內(nèi)容。你可以用ES模塊寫，但發(fā)出 CommonJS。

// Babel或TypeScript編譯器將ES模塊轉(zhuǎn)換為CommonJS
const moduleA = require('./moduleA');

如果你在構(gòu)建的代碼中看到 require調(diào)用，你就是在發(fā)出 CommonJS，而import和export的存在表示你是ES模塊的未來(lái)的一部分。

未來(lái)屬于ES模塊

在吸引了開發(fā)者注意的新工具中，bun 是亮點(diǎn)。bun 的主要亮點(diǎn)在于，它已經(jīng)解決了CommonJS 和 ES 模塊之間的互操作性問(wèn)題。但是，這個(gè)修復(fù)并不完全符合規(guī)范——他們只是為了讓它工作而修補(bǔ)了CommonJS和ES模塊之間的問(wèn)題。

由于支持這些不同的模塊系統(tǒng)，JavaScript工具鏈可能非常復(fù)雜。

采用ES模塊，你正在簡(jiǎn)化Web開發(fā)。所有的Node.js長(zhǎng)期支持版本現(xiàn)在都使用ES模塊，這標(biāo)志著一個(gè)明確的海變。

盡可能使用ES模塊?，F(xiàn)在是時(shí)候結(jié)束這種分裂，擁抱未來(lái)了?，F(xiàn)代JavaScript，統(tǒng)一的JavaScript。

如果你一直在使用或考慮使用 CommonJS，可能是時(shí)候仔細(xì)看看你的代碼了。未來(lái)是一個(gè)有ES模塊的地方，我們每個(gè)人都有責(zé)任使 JavaScript 的景觀變得更加簡(jiǎn)單和有趣。

以上就是JavaScript分水嶺CommonJS 對(duì)比ES模塊分析的詳細(xì)內(nèi)容，更多關(guān)于JavaScript CommonJS 對(duì)比ES的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論