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

看以后

点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）
关注公众号「新前端社区」，享受文章首发体验！
每周重点攻克一个前端技术难点。

此文章为转载侵删