Làm cách nào để thêm thư viện javascript vào dự án?

Sử dụng thư viện JavaScript bên trong dự án Angular không đơn giản như sử dụng nó trong Angular JS hoặc dự án JavaScript đơn giản. Trong một dự án JavaScript đơn giản, bạn có thể đưa thư viện vào scripttag của chỉ mục của mình. html và sau đó thư viện có sẵn để sử dụng

Nhưng trong một dự án Angular, làm theo các bước tương tự có thể không thực sự hiệu quả. Trên thực tế, trình biên dịch có thể đưa ra lỗi khi sử dụng thư viện. Để bao gồm và sử dụng thư viện, cách tiêu chuẩn là cài đặt thư viện bằng cách sử dụng npm và sau đó tìm tệp khai báo kiểu của nó (*. d. ts). Tệp khai báo kiểu của thư viện có thể hoặc không phải là một phần của mã nguồn của nó. Nếu không có, nó phải được cài đặt riêng

Tệp Khai báo Loại là gì?

TypeScript là ngôn ngữ được nhập, các tệp khai báo thêm các kiểu cần thiết vào mã JavaScript chưa được nhập. Nói một cách đơn giản, một tệp khai báo kiểu cung cấp cho trình biên dịch thông tin về một thành viên đã nhập và các tham số mà nó mong đợi, kiểu dữ liệu của nó, giá trị trả về, v.v. ,

Để hiểu rõ hơn, hãy xem ví dụ dưới đây

Ở đây, có một hàm tên là người chấp nhận một Mảng và trả về một Đối tượng

Tệp khai báo cho chức năng này sẽ là

Các tệp khai báo chỉ chứa thông tin kiểu chứ không chứa phần thực hiện chức năng. Chúng được gọi là Tuyên bố xung quanh

Các điểm cần lưu ý về khai báo TypeScript

• Không có triển khai chức năng/lớp/biến nào trong các tệp khai báo

• Không có tham số mặc định cho chức năng

• *khai báo *từ khóa được sử dụng để nói rằng việc triển khai thực tế của hàm/lớp/biến này tồn tại ở một nơi khác

• Chỉ sử dụng từ khóa *khai báo * cho các thành viên đã xuất hoặc trên các hàm/lớp/biến được sử dụng từ tệp này. Không sử dụng nó trên các biến cục bộ bên trong một hàm

• Mã VS bổ sung IntelliSense cần thiết và hiển thị các đề xuất tự động hoàn thành thích hợp sau khi. d. tập tin ts được bao gồm. Do đó làm cho sự phát triển dễ dàng và xác định các lỗi trước thời hạn

Để tạo tệp khai báo cho tệp JavaScript, hãy sử dụng lệnh

npx typescript script.js --declaration --allowJs --emitDeclarationOnly --outDir types

Lệnh trên tạo một loại/tập lệnh. d. tập tin ts

Để tạo tệp khai báo cho tệp TypeScript, hãy sử dụng lệnh

tsc script.ts -d

Khi các tệp khai báo được tạo, bạn có thể đưa chúng vào Dự án góc của mình và bắt đầu sử dụng chúng. Bạn phải bao gồm mã nguồn và tệp khai báo của nó

Làm cách nào để sử dụng Thư viện trong Dự án góc?

Nếu bạn cài đặt thư viện JavaScript trong dự án Angular của mình, bạn hẳn đã nhận thấy thư mục nguồn chứa một tệp có phần mở rộng. d. ts. Một số thư viện không đi kèm với thư mục typings dựng sẵn, thay vào đó, bạn phải cài đặt chúng theo cách thủ công bằng cách sử dụng @typings qua npm

Hãy để chúng tôi lấy ví dụ về một thư viện JS phổ biến. Chốc lát. js

npm install moment --save

Bây giờ, hãy kiểm tra thư viện khoảnh khắc trong thư mục node_modules

Chốc lát. thư viện js

Chốc lát. js đi kèm với một tệp đánh máy có tên là khoảnh khắc. d. ts. Bây giờ chúng ta có thể trực tiếp sử dụng thư viện bằng cách sử dụng câu lệnh nhập trong tệp ts

import moment from 'moment';

date = moment().format('MMM Do YY');

Điều này sẽ hiển thị ngày hiện tại

Chúng tôi sẽ thử thêm một thư viện khác, CryptoJS

npm install crypto-js --save

Sau khi cài đặt, nếu bạn cố gắng sử dụng các phương thức của CryptoJS, trình biên dịch sẽ báo lỗi yêu cầu cài đặt tệp khai báo kiểu của CryptoJS. Thư viện này không đi kèm với tệp khai báo kiểu của nó. Chúng ta cần phải cài đặt nó một cách riêng biệt

Cảm ơn cộng đồng DefiniteTyped đã xuất bản các kiểu chữ cho thư viện

npm i @types/crypto-js --save-dev

Tệp khai báo kiểu sau khi cài đặt được trình biên dịch nhận dạng và bạn có thể bắt đầu sử dụng các phương thức

import * as CryptoJS from 'crypto-js'

Bây giờ bạn có thể bắt đầu sử dụng các phương pháp thư viện

ứng dụng. thành phần. ts với Khoảnh khắc. thư viện js và CryptoJS

Liên kết các biến trong trang HTML để xem chúng

Liên kết giá trị thành phần với HTML

Phần kết luận

• Để sử dụng thư viện JavaScript trong dự án Angular, hãy cài đặt thư viện qua npm và kiểm tra tệp khai báo kiểu của nó

  Định cấu hình thư viện JavaScript

  Trong ngữ cảnh của ngôn ngữ và IDE, thư viện là một tệp hoặc một tập hợp các tệp. Các hàm và phương thức của các tệp này được thêm vào kiến ​​thức nội bộ của IntelliJ IDEA bên cạnh các hàm và phương thức mà IntelliJ IDEA truy xuất từ ​​mã dự án mà bạn chỉnh sửa. Trong phạm vi của một dự án, các thư viện của nó theo mặc định được bảo vệ chống ghi.

  IntelliJ IDEA dự trữ hai thư mục thư viện được tạo tự động được xác định trước

  • node_modules để giữ Nút. js được liệt kê trong đối tượng dependencies của dự án gói của bạn. json . Xem Định cấu hình thư viện node_modules để biết chi tiết.

  • Thư viện bên ngoài để lưu trữ tệp định nghĩa TypeScript đã tải xuống hoặc thư viện được tham chiếu qua liên kết CDN cũng như Node. js Core hoặc bất kỳ thư viện bên thứ ba tùy chỉnh nào.

    

  IntelliJ IDEA chỉ sử dụng các thư viện để tăng cường hỗ trợ mã hóa (nghĩa là hoàn thành mã, đánh dấu cú pháp, điều hướng và tra cứu tài liệu). Lưu ý rằng thư viện không phải là cách để quản lý các phụ thuộc dự án của bạn

  Sử dụng sơ khai cộng đồng TypeScript (tệp định nghĩa TypeScript)

  Sơ khai cộng đồng TypeScript còn được gọi là tệp định nghĩa TypeScript hoặc tệp khai báo TypeScript hoặc sơ khai DefiniteTyped hoặc chỉ d. tệp ts .

  Trong IntelliJ IDEA, các sơ khai DefiniteTyped có thể được định cấu hình và sử dụng làm thư viện, điều này đặc biệt hữu ích trong các trường hợp sau

  • Để cải thiện khả năng hoàn thành mã, hãy giải quyết các ký hiệu cho thư viện hoặc khung quá phức tạp để phân tích tĩnh IntelliJ IDEA và thêm thông tin loại cho các ký hiệu đó

  • Để giải quyết các biểu tượng được xác định trên toàn cầu từ các khung kiểm tra

  Ví dụ bên dưới hiển thị một đoạn mã từ ứng dụng Express trong đó chức năng post() không được giải quyết

  

  IntelliJ IDEA giải quyết thành công post() sau khi bạn cài đặt tệp định nghĩa TypeScript được đề xuất

  

  IntelliJ IDEA cho phép bạn tải xuống các tệp định nghĩa TypeScript ngay từ trình chỉnh sửa, sử dụng một hành động có ý định hoặc bạn có thể thực hiện việc này trên Cài đặt. Trang Thư viện JavaScript .

  Tải xuống các định nghĩa TypeScript bằng cách sử dụng một hành động ý định

  • Đặt dấu mũ tại câu lệnh

    tsc script.ts -d
    

    0 với thư viện hoặc khung này, nhấn Alt+Enter và chọn Cài đặt định nghĩa TypeScript để có thông tin loại tốt hơn .
    

    IntelliJ IDEA tải xuống định nghĩa loại cho thư viện và thêm chúng vào danh sách thư viện trên JavaScript. Trang thư viện .

    

  Tải xuống các định nghĩa TypeScript trong hộp thoại Cài đặt/Tùy chọn

  1. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Ngôn ngữ & Khung. JavaScript. Thư viện .

  2. Trên trang Thư viện mở ra, hãy nhấp vào Tải xuống . Download Library dialog that opens, select the required library, and click Download and Install.

     

  IntelliJ IDEA hiển thị định nghĩa loại đã tải xuống trong cửa sổ công cụ Dự án , bên dưới Thư viện bên ngoài< . node.

  

  tùy chọn

  • IntelliJ IDEA cho phép các định nghĩa loại đã tải xuống trong phạm vi của dự án hiện tại. Bạn có thể thay đổi phạm vi này như được mô tả trong Định cấu hình phạm vi của thư viện bên dưới. Xem thêm Ví dụ. Định cấu hình phạm vi cho HTML và Nút. thư viện lõi js

  Cấu hình nút. thư viện lõi js

  Để hoàn thành mã và độ phân giải tham chiếu cho fs, đường dẫn, http và các mô-đun cốt lõi khác được biên dịch vào Nút. js, bạn cần định cấu hình Nút. js Core nguồn mô-đun dưới dạng thư viện JavaScript.

  Cấu hình nút. lõi js

  1. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Ngôn ngữ & Khung. Nút. js .

  2. Chọn Hỗ trợ viết mã cho Node. hộp kiểm js .

     Lưu ý rằng nút. thư viện js Core dành riêng cho phiên bản. Vì vậy, nếu bạn thay đổi phiên bản Node của mình. js trên nút. js, bạn cần chọn lại hộp kiểm. Sau đó, IntelliJ IDEA tạo một thư viện mới cho phiên bản mới này

  Định cấu hình thư viện node_modules

  Để cung cấp khả năng hoàn thành mã cho các phần phụ thuộc của dự án, IntelliJ IDEA tạo một thư viện node_modules tự động để Node. js được giữ trong dự án của bạn nhưng không có kiểm tra nào được thực hiện đối với chúng, điều này giúp cải thiện hiệu suất.

  

  Trong cửa sổ công cụ Dự án , node_modules là .

  

  Tuy nhiên, thư viện node_modules chỉ chứa các mô-đun được liệt kê trong đối tượng dependencies của dự án của bạn package.json . IntelliJ IDEA không bao gồm các phụ thuộc của các phụ thuộc vào thư viện node_modules nhưng thực tế loại trừ chúng khỏi dự án.

  Định cấu hình phạm vi của thư viện

  Đôi khi, bạn có thể nhận thấy rằng IntelliJ IDEA đề xuất phần hoàn thành không liên quan, ví dụ: Node. js trong mã phía máy khách của bạn. Điều này xảy ra vì theo mặc định, IntelliJ IDEA sử dụng một thư viện để hoàn thành trong toàn bộ thư mục dự án. IntelliJ IDEA cho phép bạn điều chỉnh quá trình hoàn thành mã bằng cách định cấu hình phạm vi cho thư viện

  Định cấu hình phạm vi của thư viện

  1. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Ngôn ngữ & Khung. JavaScript. Thư viện .

     Trang Thư viện hiển thị danh sách các thư viện có sẵn.

  2. Xóa hộp kiểm Đã bật bên cạnh thư viện được yêu cầu và nhấp vào Quản lý phạm vi.The Thư viện JavaScript. Hộp thoại Phạm vi sử dụng mở ra.

  3. Trong hộp thoại Phạm vi sử dụng thư viện JavaScript , hãy nhấp vào Thêm button (

     
     ) and select the files or folders that you want to include in the library scope. In the Phạm vi sử dụng thư viện JavaScript , trường Đường dẫn hiển thị các tệp đã chọn .

  4. Đối với mỗi tệp hoặc thư mục đã thêm, từ danh sách Thư viện , hãy chọn thư viện mà bạn đang định cấu hình.

  Ví dụ. Định cấu hình phạm vi cho HTML và Nút. thư viện lõi js

  Khi làm việc trên ứng dụng JavaScript toàn ngăn xếp trong IntelliJ IDEA, bạn thường nhận thấy rằng việc hoàn thành mã gợi ý một số Nút. js trong mã phía máy khách của bạn và API DOM trong Nút. mã js. Điều này xảy ra vì thư viện HTML với API DOM và Nút. thư viện js Core với Node. js API được kích hoạt mặc định trong toàn bộ dự án. Để loại bỏ các đề xuất hoàn thành không liên quan, bạn cần định cấu hình phạm vi cho các thư viện này.

  Định cấu hình phạm vi của HTML và Nút. thư viện lõi js

  1. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Ngôn ngữ & Khung. JavaScript. Thư viện .

     Trang Thư viện hiển thị danh sách các thư viện có sẵn.

     

  2. Xóa các hộp kiểm Đã bật bên cạnh HTML và < . js Core Node.js Core mục.

  3. Nhấp vào Quản lý phạm vi .

  4. Để định cấu hình phạm vi cho thư viện HTML , hãy nhấp vào , chọn các thư mục chứa ứng dụng khách- . HTML from the Library list.

  5. Để định cấu hình phạm vi cho Nút. js Core , nhấp lại vào , chọn các thư mục có mã phía máy chủ và chọn Node. js Core từ danh sách Thư viện .

     Bây giờ IntelliJ IDEA giải quyết các mục từ HTML và Nút. js Core và đề xuất chúng khi hoàn thành chỉ trong các tệp từ các thư mục dự án đã chọn này

     

  Theo cách tương tự, bạn có thể định cấu hình phạm vi của thư viện node_modules được tạo tự động, xem Định cấu hình thư viện node_modules.

  Định cấu hình thư viện được thêm qua liên kết CDN

  Khi có thư viện . js được tham chiếu thông qua liên kết CDN, tệp này có sẵn trong thời gian chạy nhưng không hiển thị đối với IntelliJ IDEA. Để thêm các đối tượng từ thư viện đó . js vào danh sách hoàn thành, tải xuống tệp và định cấu hình tệp dưới dạng thư viện bên ngoài.

  Tải xuống một thư viện

  • Đặt dấu mũ tại liên kết CDN tới thư viện, nhấn Alt+Enter và chọn Tải xuống thư viện từ danh sách.

    

    Thư viện được tải xuống bộ đệm IntelliJ IDEA (nhưng không vào dự án của bạn) và một cửa sổ bật lên có thông báo thông tin xuất hiện

    

    Trên trang Thư viện JavaScript , thư viện đã tải xuống được thêm vào danh sách và bật nó trong phạm vi của dự án hiện tại.

    

    Trong cửa sổ công cụ Dự án , thư viện được hiển thị bên dưới Thư viện bên ngoài node:

    

  Thay đổi chế độ hiển thị của thư viện

  • Theo mặc định, IntelliJ IDEA đánh dấu thư viện đã tải xuống là Toàn cầu , nghĩa là bạn có thể bật và sử dụng lại thư viện đó trong bất kỳ IntelliJ nào khác . Để thay đổi cài đặt mặc định này, hãy chọn thư viện đã tải xuống trong danh sách, nhấp vào Chỉnh sửa và chọn Dự án in the Edit Library dialog that opens.

    

  Định cấu hình thư viện JavaScript bên thứ ba tùy chỉnh

  Giả sử bạn có tệp khung JavaScript trong dự án của mình hoặc ở nơi khác trên máy của mình và bạn muốn IntelliJ IDEA coi tệp đó như một thư viện chứ không chỉ là mã dự án mà bạn chỉnh sửa

  Định cấu hình thư viện tùy chỉnh

  1. Tải xuống tệp khung cần thiết

  2. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Ngôn ngữ & Khung. JavaScript. Thư viện .

  3. Trên trang Thư viện , hãy nhấp vào Thêm .

  4. Trong hộp thoại Thư viện mới , chỉ định tên của thư viện JavaScript bên ngoài.

  5. Nhấp vào nút Thêm () và chọn . or Attach Directories from the list.

     

     Trong trình duyệt tệp, chọn tệp hoặc thư mục có khung đã tải xuống

     

     Khi bạn nhấp vào OK , bạn quay lại Thư viện page where the new library is added to the list.

     

  6. Trong cửa sổ công cụ Dự án , thư viện được hiển thị bên dưới Thư viện bên ngoài node.

     

  tùy chọn

  • Theo mặc định, thư viện là Chung , nghĩa là bạn có thể đính kèm thư viện vào bất kỳ dự án nào khác. Để chặn sử dụng lại thư viện, hãy chọn Dự án trong Thư viện mới .

  • Theo mặc định, thư viện được kích hoạt trong phạm vi của toàn bộ dự án hiện tại. Bạn có thể thay đổi cài đặt mặc định này như được mô tả trong Định cấu hình phạm vi của thư viện

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

    Trên trang Thư viện, nhấp vào Thêm. Trong hộp thoại Thư viện mới, chỉ định tên của thư viện JavaScript bên ngoài. ), và chọn Đính kèm tệp hoặc Đính kèm thư mục từ danh sách. Trong trình duyệt tệp, chọn tệp hoặc thư mục có khung đã tải xuống

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

    Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với thuộc tính src . Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ

    Có ai có thể tạo thư viện JavaScript không?

    TL;DR; . Bạn làm theo những điều này và bạn sẽ ổn thôi. you need to keep in mind encapsulating the code so that it doesn't interfere with user code, making it simple and easy to use, and try to make sure it doesn't have any dependencies. You follow these and you shall be fine.

    Làm cách nào để thiết lập một dự án JavaScript?

    Bắt đầu Dễ dàng như 1, 2, 3. .

    Tạo một dự án, tùy chọn cung cấp [tên dự án] cho dự án của bạn. tạo-js-project [tên dự án] npm init js-project [tên dự án]

    Trả lời các câu hỏi, chẳng hạn như tên dự án của bạn và mẫu mong muốn

    Đợi cho đến khi quá trình cài đặt hoàn tất và bắt đầu mã hóa