今天在浏览器中使用 ES 模块

suchonaseo

本文将向您展示当今如何在浏览器中使用 ES 模块。直到最近，JavaScript 还没有模块的概念。无法在一个 JavaScript 文件中直接引用或包含另一个 JavaScript 文件。随着应用程序规模和复杂性的增长，为浏览器编写 JavaScript 变得很棘手。 一种常见的解决方案是使用标签在网页中加载任意脚本<script>。然而，这也带来了其自身的问题。例如，每个脚本都会发起一个渲染阻塞的 HTTP 请求，这可能会让大量 JS 的页面感觉迟缓和缓慢。由于加载顺序很重要，依赖关系管理也变得复杂。 ES6（ES2015）通过引入单一的原生模块标准在某种程度上解决了这种情况。（您可以在此处阅读有关 ES6 模块的更多信息。）但是，由于浏览器对 ES6 模块的支持最初很差，人们开始使用模块加载器将依赖项捆绑到单个 ES5 跨浏览器兼容文件中。

这个过程引入了它自己的问题和复杂程度。 但好消息就在眼前。浏览器支持越来越好，所以让我们看看如何在当今的浏览器中使用 ES6 模块。 当前的 ES 模块格局 Learn to Code with JavaScript Safari、Chrome、Firefox 和 Edge 都支持 ES6 模块导入语法。这是它们的样子。只需 WhatsApp 号码数据 添加type="module"到脚本标签中，浏览器就会将它们作为 ES 模块加载。浏览器将遵循所有导入路径，仅下载并执行每个模块一次。 ES 模块：显示加载的网络图 较旧的浏览器不会执行未知“类型”的脚本，但您可以使用以下nomodule属性定义后备脚本： <script type="module" Learn to Code with JavaScript 要求 您需要一个服务器才能通过导入来获取，因为它不适用于该file://协议。



您可以使用npx serve在当前目录中启动服务器进行本地测试。 如果你想在不同的域上加载 ES 模块，你需要启用 CORS 。 如果您今天有足够的勇气在生产中尝试这一点，您仍然需要为旧版浏览器创建单独的捆绑包。browser-es-module-loader提供了一个符合规范的 polyfill。但是，根本不建议在生产中这样做。看演示 查看源码 表现 不要立即丢弃 Babel 和 Webpack 等构建工具，因为浏览器仍在实现优化获取的方法。尽管如此，ES 模块在未来仍存在性能缺陷和收益。 为什么我们捆绑 今天，我们捆绑 JavaScript 来减少 HTTP 请求的数量，因为网络通常是加载网页最慢的部分。这在今天仍然是一个非常有效的担忧，但未来是光明的：ES 模块具有 HTTP2 的能力，可以通过服务器推送和浏览器实现预加载来流式传输多个资产。