今すぐブラウザでESモジュールを使用しています

ブラウザでESモジュールを使用する

：現在のステータスと将来

コアポイント：

• ES6（ES2015）はJavaScriptネイティブモジュール標準を導入しましたが、当初はブラウザーのサポートが不十分な開発者は、モジュールローダーを使用して依存関係を単一のES5互換ブラウザーファイルにバンドルするようになりました。
Safari、Chrome、Firefox、Edgeなどの主流のブラウザは、ES6モジュールの
• 構文をサポートし、より効率的で標準化されたコード構造を可能にします。 import
ES6モジュールのサポートは改善され続けていますが、BabelやWebpackなどのツールの構築は、ブラウザが最適化され続けているため、依然として不可欠です。 HTTP2のマルチリソースストリーミング機能とブラウザのプリロード機能を組み合わせて、ESモジュールは大幅なパフォーマンスの改善をもたらすと予想されます。
翻訳者やバンドラーを必要とせずにESモジュールを最新のブラウザで直接使用できますが、古いブラウザー用の個別のパッケージを作成することをお勧めします。 ますます多くのライブラリがESモジュールとしてリリースされ始めていますが、それらは主に直接輸入ではなくバンドラーを対象としています。

この記事では、今日のブラウザでESモジュールを使用する方法を示します。

最近、JavaScriptにはモジュールの概念がありませんでした。 JavaScriptファイルを別のファイルに直接参照するか、含めることは不可能です。アプリケーションのサイズと複雑さが大きくなると、ブラウザ用のJavaScriptを書くことが難しくなります。

一般的な解決策は、

を使用することです

<code class="language-javascript">// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}</code>

または外部スクリプトとして：

<code class="language-html"></code>

<code class="language-javascript">// app.js
import { tag } from './html.js'

const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)</code>

type="module"> <p> <strong></strong></p>に追加するだけです

要件importfile:// npx serve プロトコルでは動作しないため、抽出に

を使用するサーバーが必要です。ローカルテスト用の現在のディレクトリでサーバーを起動する

を使用できます。

browser-es-module-loader別のドメインにESモジュールをロードする場合は、CORを有効にする必要があります。

現在生産中にこれを試すのに十分なほど大胆である場合は、古いブラウザー用に個別のパッケージを作成する必要があります。仕様に従うでポリフィルが提供されます。ただし、これは生産環境にはまったく推奨されません。

パフォーマンス

ブラウザは引き続き抽出を最適化する方法を実装しているため、

BabelやWebpackなどのビルドツールをすぐに破棄しないでください。それにもかかわらず、ESモジュールの将来の使用にはまだパフォーマンスの落とし穴と利点があります。

なぜバインドする必要があるのか <script> 标签在网页中加载任意脚本。但是，这会带来自身的问题。例如，每个脚本都会发起一个阻塞渲染的 HTTP 请求，这会使 JS 密集型页面感觉迟钝缓慢。依赖项管理也变得复杂，因为加载顺序很重要。</script>

ES6 (ES2015) 通过引入单一的原生模块标准在一定程度上解决了这个问题。（您可以在此处阅读有关 ES6 模块的更多信息。）但是，由于浏览器对 ES6 模块的初始支持较差，人们开始使用模块加载器将依赖项捆绑到单个兼容 ES5 的浏览器文件中。此过程会引入自身的问题和复杂性。

但好消息即将到来。浏览器支持越来越好，所以让我们看看如何在今天的浏览器中使用 ES6 模块。

当前 ES 模块的现状

Safari、Chrome、Firefox 和 Edge 都支持 ES6 模块的 import 语法。它们看起来像这样：

今日、JavaScriptをバンドルして、ネットワークが通常Webページのロードの最も遅い部分であるため、発行されたHTTPリクエストの数を減らすことができます。これは今日でも非常に効果的な質問ですが、未来は明るいです。ESモジュールは、HTTP2のマルチリソースストリーミング機能とブラウザのプリロード機能を組み合わせています。 
preload 
link rel="modulepreload"お近くのブラウザに表示されます。ブラウザは、すべてのモジュールを1つずつインポートする必要はないため、以下に示すネットワークの滝が生成されます... 
<code class="language-javascript">// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}</code>
<code class="language-html"></code>
ブラウザページに事前にhtml.js
lib.jshttp2およびサーバープッシュ
<code class="language-javascript">// app.js
import { tag } from './html.js'

const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)</code>
HTTP2は、1つのリソースのみを送信できるHTTP1.1と比較して、単一の応答で複数のリソースをプッシュできます。これは、ネットワークラウンド旅行を最小限に抑えるのに役立ちます。 

私たちの例では、
、
、および
は、単一のリクエストで渡すことができます：

index.html ---＆gt;
app.jsキャッシュhtml.js
ブラウザは変更されたモジュールを抽出するだけであるため、複数の小型ESモジュールを通過すると、キャッシュに利益をもたらす場合があります。大きなパッケージを生成することの問題は、コードの行を変更すると、パッケージ全体が無効になることです。 
/

 esモジュールは、
のように、デフォルトでレンダリングをブロックしません。
async必要な関数のみをインポートする場合、リクエストの数はdefer119 
：
に減少します。

これは、ブラウザに直接ロードするようにLodash-esが構築されていないことを示す単なる例です。これを行うには、ターゲットとしてESモジュールを使用して独自のパッケージを作成する必要があります。

（ES6-Moduleフォームを使用してください）<code class="language-html"></code>ブラウザでESモジュールの実験を開始する時が来ました。まもなく、翻訳者やバンドラーなしですべての最新のブラウザでそれらを使用できます（必要に応じて）。

（FAQパーツをここに挿入する必要があります。コンテンツは元のテキストと同じです）

以上が今すぐブラウザでESモジュールを使用していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。