このページは Cloud Translation API によって翻訳されました。

JavaScript のインポート地図がクロスブラウザでサポートされるようになりました。

インポートマップを使用すると、ES モジュールのインポートが大幅に改善されます。

Thomas Steiner

ES モジュールは、ウェブアプリケーションで JavaScript コードを含めて再利用するための最新の方法です。これらは最新のブラウザでサポートされており、JavaScript 開発の古い非モジュール型のアプローチに比べていくつかのメリットがあります。

ES モジュールを使用する最新の方法は、<script type="importmap"> タグを使用することです。このタグを使用すると、外部モジュール名と対応する URL のマッピングを定義できるため、コードで外部モジュールを簡単に含めて使用できます。

<script type="importmap"> アプローチを使用するには、まず HTML ドキュメントの <head> セクションに追加する必要があります。タグ内で、モジュール名を対応する URL にマッピングする JSON オブジェクトを定義できます。例:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

このコードは、"browser-fs-access" という名前の単一の外部モジュールを定義し、unpkg CDN でホストされている browser-fs-access ライブラリの URL にマッピングします。このマッピングを配置すると、import キーワードを使用して、コードに browser-fs-access ライブラリを含めることができるようになります。import キーワードは、type="module" 属性を持つ script タグ内でのみ使用できます。

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

<script type="importmap"> タグと import キーワードを使用すると、JavaScript 開発の古い非モジュールアプローチに比べて、いくつかのメリットがあります。これにより、コードが依存する外部モジュールを明確かつ明示的に指定できるため、コードの理解と保守が容易になります。全体として、<script type="importmap"> タグで ES モジュールを使用することは、ウェブアプリケーションで JavaScript コードを含めて再利用するための最新かつ強力な方法です。次のようにして、サポートを特徴検出できます。

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

Browser Support

Source

JavaScript のインポート地図がクロスブラウザでサポートされるようになりました。 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

関連情報

JavaScript のインポート地図がクロスブラウザでサポートされるようになりました。