Làm cách nào để thêm thư viện trong HTML?

Nhập bản đồ sẽ không thay thế hoàn toàn các công cụ xây dựng thực hiện nhiều chức năng khác như thu nhỏ mã và xây dựng biểu định kiểu. Nhập bản đồ sẽ cho phép bạn khởi động và chạy ứng dụng của mình một cách nhanh chóng chỉ bằng chức năng trình duyệt gốc (Không có công cụ xây dựng)

Cách sử dụng bản đồ nhập khẩu

Hãy xem điều này trong hành động. Trước tiên, chúng tôi tạo một thư mục có tên

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

8 và thay đổi thư mục mới của chúng tôi. Sau đó, chúng tôi tạo một tệp có tên

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

9 ở thư mục gốc của thư mục chúng tôi đang ở trong. Thêm đánh dấu như hình bên dưới vào tệp

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

9 của chúng tôi như hình bên dưới

 lang="en">
  
     charset="UTF-8" />
     http-equiv="X-UA-Compatible" content="IE=edge" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
    
  
  
    
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như được hiển thị ở trên, chúng tôi đang cố gắng tải chức năng

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

1 của lodash vào trang web của chúng tôi.

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

1 sẽ đơn giản chuyển đổi chuỗi thành

Chỉ cần một lưu ý. Tôi đã thêm một thuộc tính

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

3 vào thẻ tập lệnh của chúng tôi để cho phép tách mã và cho phép sử dụng các câu lệnh nhập và xuất

Mở tệp này (

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

9) trong trình duyệt của bạn để xem đầu ra. Nếu bạn đang sử dụng mã vs, bạn có thể phân phát tệp

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

9 bằng tiện ích mở rộng máy chủ Trực tiếp. Ngoài ra, nếu bạn đã cài đặt Nodejs trên hệ thống của mình, chỉ cần chạy

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

1 ở gốc dự án của bạn

Khi chúng tôi mở trình duyệt để xem kết quả của mình, chúng tôi nhận được một màn hình trống. Mở công cụ dev của trình duyệt và nhấp vào tab bảng điều khiển, chúng tôi thấy một lỗi như hình dưới đây

Như chúng tôi có thể dự đoán lỗi sẽ xảy ra, trình duyệt không biết tìm thư viện lodash ở đâu. Chúng tôi hy vọng rằng chúng tôi đang tải thư viện từ máy chủ web của mình trên một đường dẫn liên quan đến tệp hiện tại và chúng tôi có thể đã không bao gồm các chỉ định đường dẫn tương đối. Đó là "/", ". /", hoặc ". /"

Để khắc phục điều này, chúng tôi sử dụng bản đồ nhập để cho trình duyệt biết nơi tìm mã bên ngoài.
Bản đồ nhập là một đối tượng Javascript trong đó khóa là tên của lần nhập, trong trường hợp của chúng tôi, nó sẽ là

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

2.
Cấu trúc cơ bản của bản đồ nhập là.

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xem đoạn trích bên dưới

 lang="en">
  
     charset="UTF-8" />
     http-equiv="X-UA-Compatible" content="IE=edge" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
    
  
  
    
    
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi đã biết tên mục nhập của mình là

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

2 và nơi tìm thư viện của chúng tôi, chúng tôi đã chọn UNPKG.
UNPKG là mạng phân phối nội dung (CDN) cho bất kỳ gói nào bạn có thể tìm thấy tại

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

4. Do đó, nếu bạn có thể

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

5 gói hàng, bạn cũng có thể tải gói hàng đó qua UNPKG.

Thư viện Lodash hỗ trợ nhập es được tìm thấy tại thư mục

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

6, đây là trường hợp trong dự án của chúng tôi. Lưu ý

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

6 trong url của chúng tôi để tải thư viện từ UNPKG, tôi. e

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

8. Tải từ thư mục

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

9 sẽ không hoạt động vì nó sử dụng các mô-đun commonjs.
Làm mới trình duyệt của bạn và voila. Mọi thứ nên hoạt động.

Bạn có thể thấy mọi từ đã được viết hoa, đây là chức năng do lodash cung cấp.
Xin chúc mừng. Chúng tôi đã tải thành công một thư viện bên ngoài mà không cần công cụ xây dựng và không chạy

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

5. Thật đơn giản phải không?

Điều gì đang xảy ra?

Mở công cụ phát triển của trình duyệt và chuyển sang tab mạng.
Sau khi mở tab mạng, hãy làm mới trang và bạn sẽ thấy trình duyệt đang tải mã động. Bất cứ khi nào nó tìm thấy một câu lệnh nhập mới, nó sẽ nhập mã có liên quan.

Quan trọng hơn, lưu ý rằng tất cả mã được tải một cách lười biếng. Điều đó có nghĩa là trình duyệt không nhập bất kỳ mã nào cho đến khi nó được yêu cầu cụ thể

Ví dụ: mặc dù

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

8 nằm trong

 lang="en">
  
     charset="UTF-8" />
     http-equiv="X-UA-Compatible" content="IE=edge" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
    
  
  
    
    
  

2, trình duyệt sẽ không tải nó vì nó không bao giờ được nhập vào mã. Bản đồ nhập là bản đồ các vị trí và không tự nhập bất kỳ mã nào

Bạn có thể lưu ý rằng các mô-đun khác cũng được tải từ nguồn Lodash UNPKG trong bảng điều khiển mạng. Đây là các phần phụ thuộc của tệp

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

8 từ UNPKG được nhập vào tệp đó

Mẹo nhanh💡. Bạn có thể xem tệp

{
   "imports": {
     "nameOfImport": "locationOfSourceCode",
     "nameOfSecondImport": "locationOfSourceCode",
   }
}

8 bằng cách thêm

 lang="en">
  
     charset="UTF-8" />
     http-equiv="X-UA-Compatible" content="IE=edge" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
    
  
  
    
    
  

5 vào URL của nguồn thư viện bên ngoài như minh họa bên dưới

lưu ý cuối cùng của tôi. Nhập bản đồ chưa được hỗ trợ rộng rãi. Tin vui là hầu hết các trình duyệt hiện đại đều hỗ trợ chức năng mô-đun này. Bạn có thể kiểm tra hỗ trợ trình duyệt tại đây

Bạn có thể muốn chơi với mã để tìm ra những khám phá của riêng mình. Bạn có thể tìm thấy kho lưu trữ những gì chúng tôi đã làm tại đây

Làm cách nào để thêm thư viện js vào HTML?

Làm cách nào để thêm thư viện JavaScript?

HTML có thư viện không?

Làm cách nào để liên kết CSS và JS trong HTML?