核心要点：
import 语法，从而实现更高效、更规范的代码结构。 本文将演示如何在今天的浏览器中使用 ES 模块。
在最近之前，JavaScript 并没有模块的概念。无法直接引用或包含一个 JavaScript 文件到另一个文件中。随着应用程序规模和复杂性的增长，这使得为浏览器编写 JavaScript 变得棘手。
一种常见的解决方案是使用
// html.js
export function tag (tag, text) {
const el = document.createElement(tag)
el.textContent = text
return el
}</pre>登录后复制或者作为外部脚本：
<🎜></pre>登录后复制
// app.js
import { tag } from './html.js'
const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)</pre>登录后复制
type="module"只需将 </pre>
<p>
<strong> 添加到您的
import要求file://npx serve
进行提取，因为它不适用于
协议。您可以使用 在当前目录中启动一个服务器以进行本地测试。 browser-es-module-loader
如果您现在大胆地在生产环境中尝试这样做，您仍然需要为旧版浏览器创建单独的包。在 中提供了一个 polyfill，它遵循规范。但是，这根本不推荐用于生产环境。
性能不要立即丢弃 Babel 和 Webpack 等构建工具，因为浏览器仍在实现优化提取的方法。尽管如此，未来使用 ES 模块仍存在性能方面的陷阱和优势。
<script></code> 标签在网页中加载任意脚本。但是，这会带来自身的问题。例如，每个脚本都会发起一个阻塞渲染的 HTTP 请求，这会使 JS 密集型页面感觉迟钝缓慢。依赖项管理也变得复杂，因为加载顺序很重要。</p> <p>ES6 (ES2015) 通过引入单一的原生模块标准在一定程度上解决了这个问题。（您可以在此处阅读有关 ES6 模块的更多信息。）但是，由于浏览器对 ES6 模块的初始支持较差，人们开始使用模块加载器将依赖项捆绑到单个兼容 ES5 的浏览器文件中。此过程会引入自身的问题和复杂性。</p> <p>但好消息即将到来。浏览器支持越来越好，所以让我们看看如何在今天的浏览器中使用 ES6 模块。</p> <p><strong>当前 ES 模块的现状</strong></p> <p>Safari、Chrome、Firefox 和 Edge 都支持 ES6 模块的 <code>import</code> 语法。它们看起来像这样：</p> <pre class="brush:php;toolbar:false"><code class="language-html"><script type="module"> import { tag } from './html.js' const h1 = tag('h1', '? Hello Modules!') document.body.appendChild(h1) </script>为什么我们需要捆绑<script type="module" src="app.js"></script> <script></code> 标签中，浏览器就会将它们加载为 ES 模块。浏览器将遵循所有导入路径，每个模块仅下载和执行一次。</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958637676760.jpg" class="lazy" alt="Using ES Modules in the Browser Today " /></p> <p>旧版浏览器不会执行具有未知“type”的脚本，但您可以使用 <code>nomodule</code> 属性定义回退脚本：</p> <pre class="brush:php;toolbar:false"><code class="language-html"><script nomodule src="https://unpkg.com/browser-es-module-loader/dist/babel-browser-build.js"></script>今天，我们捆绑 JavaScript 以减少发出的 HTTP 请求数量，因为网络通常是加载网页速度最慢的部分。这在今天仍然是一个非常有效的问题，但未来是光明的：ES 模块结合 HTTP2 的多资源流传输能力以及浏览器预加载功能。 <script nomodule src="https://unpkg.com/browser-es-module-loader"></script><h3>预加载</h3> <p><code>link rel="modulepreload"</code> 即将出现在您附近的浏览器中。浏览器无需逐个解析所有模块导入，从而产生如下所示的网络瀑布……</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// html.js export function tag (tag, text) { const el = document.createElement(tag) el.textContent = text return el }</pre><div class="contentsignin">登录后复制</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><🎜></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div> <p>您可以提前告诉浏览器页面需要 <code>html.js</code> 和 <code>lib.js</code>，从而控制瀑布：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// app.js import { tag } from './html.js' const h1 = tag('h1', '? Hello Modules!') document.body.appendChild(h1)</pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div> <h3>HTTP2 与服务器推送</h3> <p>与只能传输一个资源的 HTTP1.1 相比，HTTP2 能够在一个响应中推送多个资源。这将有助于最大限度地减少网络往返次数。</p> <p>在我们的示例中，可以在单个请求中传递 <code>index.html</code>、<code>app.js</code> 和 <code>html.js</code>：</p> <p>---> GET /index.html</p> <h3>缓存</h3> <p>传递多个较小的 ES 模块可能会使缓存受益，因为浏览器只需要提取已更改的模块。生成大型包的问题在于，如果您更改一行代码，则会使整个包失效。</p> <h3><code>async</code>/<code>defer</code></h3> <p>ES 模块默认情况下不会阻塞渲染，就像 <code></pre></code><p> <em>如果我们只导入需要的函数，请求数量会减少到 </em>119 个</p>：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><🎜></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div> </p> <p> </p>这只是一个例子，用于演示 lodash-es 尚未构建为直接在浏览器中加载。要做到这一点，您仍然需要使用 ES 模块作为目标创建自己的包。<p> <strong></strong>(此处应插入Can I Use es6-module表格)</p> <p> </p>现在是开始在浏览器中试验 ES 模块的时候了。很快，您就可以在所有现代浏览器中使用它们，而无需转译器或捆绑器（如果您愿意）。<p> <strong></strong>(此处应插入FAQ部分，内容与原文相同)</p> <script> 标签在网页中加载任意脚本。但是，这会带来自身的问题。例如，每个脚本都会发起一个阻塞渲染的 HTTP 请求，这会使 JS 密集型页面感觉迟钝缓慢。依赖项管理也变得复杂，因为加载顺序很重要。 <p>ES6 (ES2015) 通过引入单一的原生模块标准在一定程度上解决了这个问题。（您可以在此处阅读有关 ES6 模块的更多信息。）但是，由于浏览器对 ES6 模块的初始支持较差，人们开始使用模块加载器将依赖项捆绑到单个兼容 ES5 的浏览器文件中。此过程会引入自身的问题和复杂性。 <p>但好消息即将到来。浏览器支持越来越好，所以让我们看看如何在今天的浏览器中使用 ES6 模块。 <p><strong>当前 ES 模块的现状 <p>Safari、Chrome、Firefox 和 Edge 都支持 ES6 模块的 <code>import 语法。它们看起来像这样： <pre class="brush:php;toolbar:false"><code class="language-html"><script type="module"> import { tag } from './html.js' const h1 = tag('h1', '? Hello Modules!') document.body.appendChild(h1) </script>以上是今天在浏览器中使用ES模块的详细内容。更多信息请关注PHP中文网其他相关文章！
