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 跨域頭

看以後

點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）
關注公衆號「新前端社區」，享受文章首發體驗！
每週重點攻克一個前端技術難點。

此文章爲轉載侵刪