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

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

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

コアポイント：

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

を使用することです

// 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>に追加するだけです

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

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

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

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

パフォーマンス

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