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 giờ đây trở nên dễ dàng hơn nhiều.

Thomas Steiner

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

Một cách hiện đại để sử dụng các mô-đun ES là dùng thẻ <script type="importmap">. Thẻ này cho phép bạn xác định mối liên kết giữa tên mô-đun bên ngoài với URL tương ứng. Nhờ đó, bạn có thể 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 này vào phần <head> của tài liệu HTML. Bên trong thẻ, bạn có thể xác định một đối tượng JSON ánh xạ tên mô-đun với 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>

Đoạn mã này xác định một mô-đun bên ngoài duy nhất có tên là "browser-fs-access" và ánh xạ mô-đun đó đến URL của thư viện browser-fs-access, được lưu trữ trên CDN unpkg. Sau khi thiết lập mối liên kết này, giờ đây, bạn có thể sử dụng từ khoá import để thêm thư viện browser-fs-access vào mã của mình. Xin lưu ý rằng từ khoá import chỉ có 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 phát triển JavaScript cũ, không theo mô-đun. Việc 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ã của mình 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à hiệu quả để đưa vào và sử dụng lại mã JavaScript trong các ứng dụng web. Bạn có thể phát hiện tính năng hỗ trợ như sau:

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

Browser Support

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

Source

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