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 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. API này được các trình duyệt hiện đại hỗ trợ và cung cấp một số lợi ích so với các phương pháp cũ, phi 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 việc ánh xạ tên mô-đun bên ngoài với các URL tương ứng, giúp dễ dàng bao gồm và sử dụng các mô-đun bên ngoài trong mã của bạn.

Để sử dụng phương pháp <script type="importmap">, trước tiên bạn cần thêm phương thức đó 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 đế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à ánh xạ mô-đun đó tới URL của thư viện browser-fs-access, được lưu trữ trên CDN unpkg. Sau khi có mối liên kết này, bạn hiệ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 theo mô-đun để phát triển JavaScript. Việc này cho phép bạn chỉ định rõ ràng và rõ ràng các mô-đun bên ngoài mà mã của bạn phụ thuộc, giúp bạn dễ dàng hiểu và duy trì mã hơn. Nhìn chung, việc sử dụng các mô-đun ES cùng với thẻ <script type="importmap"> là 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ể phát hiện tính năng hỗ trợ như sau:

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

Hỗ trợ trình duyệt

  • 89
  • 89
  • 108
  • 16,4

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