核心要點：
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中文網其他相關文章！
