這里指的 ES Modules (esm)是指源代碼中使用 'import','export' 方式導(dǎo)入或?qū)С瞿K.

這種方式成為標(biāo)準(zhǔn)已經(jīng)好幾年了, 各大瀏覽器廠商全部支持這種寫(xiě)法:

<script type="module"> import mod from 'https://dev.jspm.io/npm:some-module'; </script> 復(fù)制代碼

問(wèn)題:? 模塊開(kāi)發(fā)者發(fā)布什么樣的的文件才能最好的支持這種方式.

我們知道以往的通用做法是使用?require,?module.exports, 如果你的模塊是這種方式, 那 jspm.io 可以解決多數(shù)兼容性問(wèn)題(畢竟具體寫(xiě)法有很多, jspm 不一定能全部理解和正確處理).

顯然 jspm 為這種加載方式付出了額外的工作, 服務(wù)器端進(jìn)行轉(zhuǎn)換, 二次包裝, 甚至多次請(qǐng)求.

那么如何使這種成本最低, 也就是所謂的正確姿勢(shì)?

兩種方法:

采用同時(shí)兼容 CJS 和 esm 的格式, 優(yōu)點(diǎn): 一個(gè)文件解決兼容性

分離文件, '.js' 文件使用傳統(tǒng) CJS 風(fēng)格, '.mjs' 文件使用 esm 格式, 優(yōu)點(diǎn): 干凈

第一種方式的例子:?https://unpkg.com/@babel/parser@7.0.0-beta.48/lib/index.js

這是社區(qū)使用的兼容方式:?Object.defineProperty(exports, '__esModule', { value: true });

第二種會(huì)有兩個(gè)文件: '.js' 和 '.mjs' 的, 其中 '.js' 的不包含 'import','export', '.mjs' 至少要包含 'export'

打包工具通常都支持多種方式(打包工具就是干這個(gè)的), 比如 rollupjs

糟糕的方法:

擴(kuò)展名是 '.js', 里面卻使用了 'import','export'. 正如前文所述, 會(huì)增加加載成本,?這方法過(guò)時(shí)了.

擴(kuò)展名是 '.mjs' 里面卻使用 'require' 或者沒(méi)有使用 'export'. 這完全誤用了 '.mjs', 這樣用就失去了 '.mjs' 被創(chuàng)造出來(lái)意義.

現(xiàn)實(shí)中, 很多項(xiàng)目在打包的時(shí)候不會(huì)考慮到加載成本, 這是一種慣性, 隨著時(shí)間的推移可能會(huì)改變, 也可能會(huì)更糟糕. 因?yàn)槿绻鄶?shù)開(kāi)發(fā)者都不在乎 '.mjs' 這個(gè)擴(kuò)展名的話, 問(wèn)題只會(huì)越來(lái)越混亂.

總結(jié)

以上是生活随笔為你收集整理的模块开发者使用 ES Modules 的正确姿势的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。