Bản đồ nhập JavaScript hiện được hỗ trợ trên nhiều trình duyệt

Với bản đồ nhập, việc nhập các mô-đun ES hiện trở nên tốt hơn rất nhiều.

Thomas Steiner

Mô-đun ES là một cách hiện đại để đưa vào và sử dụng lại mã JavaScript trong các ứng dụng web. Các mô-đun này được trình duyệt hiện đại hỗ trợ và mang lại một số lợi ích so với các phương pháp cũ, không mô-đun để phát triển JavaScript.

Một cách hiện đại để sử dụng các mô-đun ES là sử dụng thẻ <script type="importmap">. Thẻ này cho phép bạn xác định mối liên kết tên mô-đun bên ngoài với URL tương ứng, giúp bạn dễ dàng thêm và sử dụng các mô-đun bên ngoài trong mã của mình.

Để sử dụng phương pháp <script type="importmap">, trước tiên, bạn cần thêm phương pháp đó vào phần <head> của tài liệu HTML. Bên trong thẻ này, bạn có thể xác định một đối tượng JSON ánh xạ tên mô-đun đến các URL tương ứng. Ví dụ:

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

Mã này xác định một mô-đun bên ngoài có tên là "browser-fs-access" và liên kết mô-đun đó với URL của thư viện browser-fs-access, được lưu trữ trên CDN unpkg. Với mối liên kết này, giờ đây, bạn có thể sử dụng từ khoá import để đưa thư viện browser-fs-access vào mã của mình. Xin lưu ý rằng từ khoá import chỉ có sẵn bên trong thẻ script có thuộc tính type="module".

<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>

Việc sử dụng thẻ <script type="importmap"> và từ khoá import mang lại một số lợi ích so với các phương pháp cũ, không mô-đun để phát triển JavaScript. Tính năng này cho phép bạn chỉ định rõ ràng và tường minh các mô-đun bên ngoài mà mã của bạn phụ thuộc vào, giúp bạn dễ hiểu và duy trì mã hơn. Nhìn chung, việc sử dụng các mô-đun ES với thẻ <script type="importmap"> là một cách hiện đại và mạnh mẽ để đưa vào và sử dụng lại mã JavaScript trong các ứng dụng web. Bạn có thể hỗ trợ tính năng phát hiện như sau:

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

Hỗ trợ trình duyệt

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 108.
  • Safari: 16.4.

Tài liệu đọc thêm