75CDN 增長 ES Module 支持

75CDN 是一個由奇舞團維護的靜態資源託管平臺，創立至今已經穩定運行了兩年多的時間。近期咱們增長了 ES Module 的支持，成爲國內首個擁抱 ES Module 服務的靜態資源庫。

ES Module 是 ES6 中提出的規範，用於讓 JavaScript 實現 import 導入模塊的功能。其又細分爲靜態 import 和動態 import 兩個特性，目前瀏覽器的支持狀況以下：
瀏覽器 靜態 import 動態 import
Chrome 61+ 63+
Chrome For Android 67+ 67+
Firefox 60+ 不支持
Firefox For Android 60+ 不支持
Safari 10.1+ 11.1+ iOS Safari 10.3 11.2+
Edge 16+ 不支持
注： 數據來源於 CanIUse

開啓 ESM

因爲目前不是全部的庫都支持 ES Module 形式引入，75CDN目前是針對.mjs，esm.js 和 esm.browser.js 結尾的模塊開啓了 ES Module 的顯示。對於符合要求的文件，咱們會將「複製 <script> 標籤」功能升級爲「複製 import 路徑」，以下圖所示：

點擊「複製 import 路徑」按鈕便可得到 import 導入的 JS 代碼，例如：

import chimeePlayer from "//lib.baomitu.com/chimee-player/1.4.6/chimee-player.esm.js"
複製代碼

固然若是你肯定當前庫是支持 ES Module 引入的，卻沒有顯示「複製 import 路徑」，也能夠自行拼接格式，或者直接向咱們反饋，確認無誤後咱們會馬上增長相關的支持。

ESM 的使用

對於使用了 ES Module 的 JS 入口文件，在 HTML 中須要使用 <script type="module"> 來引入。同時對於不支持的狀況可使用<script nomodule> 來進行降級處理。因爲在支持 ES Module 模塊導入的時候不會執行該腳本，而不支持的狀況會對 type 值非 text/javascript 的引入忽略，從而達到了平滑兼容的效果。下面是個簡單的例子：

// index.html
<div id="wrapper"></div>
<script type="module" src="main.mjs"></script>
<script nomodule src="main.bundle.js"></script>

// main.mjs
import chimeePlayer from "//lib.baomitu.com/chimee-player/1.4.6/chimee-player.esm.js"
new chimeePlayer({
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  wrapper: '#wrapper',
  autoplay: true,
})
複製代碼

注意細節

• 模塊內可使用 import.meta 獲取當前模塊的加載路徑
• 目前 import 路徑僅支持本地路徑（相對路徑和絕對路徑）和URL形式
• 同一模塊屢次引入只會執行一次
• 引用資源須要支持 CORS 跨域頭

後記

75CDN 已經兩週年了，除了給你們帶來了 ES Module 等 Web 新特性以外，咱們還會爲你們帶來更穩定的服務以及更多使用的功能，請你們多多支持！

參考資料：

• 《萬歲，瀏覽器原生支持ES6 export和import模塊啦！》
• 《ES6 In Depth: Modules》
• 《ES modules: A cartoon deep-dive》
• 本文連接：75team.com/post/75cdn-…

-- EOF --