NPM là công cụ gì?

Trong rất nhiều các bài viết chúng ta thường nói đến việc cài đặt các gói thư viện lập trình thông qua npm nhưng đôi khi chúng ta thực hiện mà chưa hiểu thực sự npm là gì? Bài viết này sẽ giúp bạn có cái nhìn tổng quan về các công cụ quản lý thư viện lập trình.

NPM công cụ quản lý thư viện lập trình cho Javascript

NPM viết tắt của Node package manager là một công cụ tạo và quản lý các thư viện lập trình Javascript cho Node.js, công cụ này là thật sự cần thiết cho thế giới mã nguồn mở. Trong cộng đồng Javascript, các lập trình viên chia sẻ hàng trăm nghìn các đoạn code giúp cho các dự án mới tránh phải viết lại các thành phần cơ bản, các thư viện lập trình hay thậm chí cả các framework.

Mỗi đoạn code này có thể phụ thuộc vào rất nhiều các mã nguồn mở khác, thật may mắn khi các công cụ quản lý thư viện ra đời, nếu không sẽ mất rất nhiều công sức trong việc quản lý các thư viện này.

Nếu các bạn đã làm việc với Javascript lâu rồi thì ít nhiều cũng đã nghe tới npm, ngay lần đầu tiên khi tiếp xúc với khái niệm npm tôi cũng luôn tự hỏi npm là gì và qua một thời gian sử dụng theo kiểu thực hành trước hiểu sau, tôi đã hiểu được nó chính là công cụ quản lý thư viện lập trình cho Javascript. Nhân tiện đây, chúng ta phải nói đến Yarn một công cụ tương tự npm, được Facebook phát triển với nhiều tính năng vượt trội có khả năng sẽ thay thế npm. Nếu bạn đã biết đến Composer là công cụ quản lý thư viện cho PHP thì NPM chính là công cụ quản lý thư viện cho Javascript.

Cài đặt npm

Để kiểm tra xem trên hệ thống của bạn đã được cài npm chưa chúng ta sử dụng lệnh npm -v, nếu một phiên bản hiện ra thì hệ thống của bạn đã được cài đặt npm:

C:\Users\Admin>npm -v
4.5.0
Code language: CSS (css)

npm cũng cần có node.js mới chạy được, do đó cần cài đặt cả Node.js. Từ phiên bản Node.js v0.6.3, bản cài đặt Node.js được tích hợp luôn npm do đó khi cài đặt chúng ta chỉ cần cài Node.js là đã có npm. Kiểm tra xem hệ thống đã cài đặt Node.js chưa, sử dụng câu lệnh node -v

C:\Users\Admin>node -v
v6.10.1
Code language: CSS (css)

Chú ý, vì phiên bản của Node.js ra chậm hơn so với npm do đó, khi cài đặt bằng bộ cài Node.js, chúng ta nên thực hiện cập nhật để có được phiên bản npm mới nhất bằng câu lệnh npm install [email protected] -g.

C:\Users\Admin>npm install npm@latest -g
C:\Users\Admin\AppData\Roaming\npm\npm -> C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
C:\Users\Admin\AppData\Roaming\npm`-- npm@4.5.0
Code language: CSS (css)

Cài đặt các gói thư viện lập trình thông qua npm

Bạn muốn cài đặt một gói thư viện lập trình cho dự án, sử dụng cú pháp

npm install <package name>
Code language: HTML, XML (xml)

Ví dụ cài đặt framework Vue.js chúng ta thực hiện lệnh

npm install vue

Khi đó muốn sử dụng Vue.js chúng ta chỉ cần sử dụng lệnh require():

var Vue = require('vue');
Code language: JavaScript (javascript)

Cài đặt toàn cục và cài đặt cục bộ

Có hai cách để cài đặt một gói bằng npm là cài đặt toàn cục hoặc cài đặt cục bộ.

• Cài đặt cục bộ sẽ tạo ra thư mục node_modules nếu chưa có trong dự án hoặc nếu có rồi nó sẽ lấy mã nguồn của gói cần cài đặt đưa vào đây, do đó khi cần thiết sử dụng các gói này bạn có thể sử dụng lệnh require().
• Cài đặt toàn cục sẽ lưu trữ mã nguồn của gói trong các file hệ thống không liên quan gì đến thư mục nơi đặt dự án của bạn, không thể sử dụng require() để sử dụng các gói mà chỉ có thể dùng các gói này thông qua các hàm CLI (Command Line Interface).

Kiểm tra các gói cài đặt

Để kiểm tra các gói đã được cài đặt thông qua npm sử dụng câu lệnh npm ls, nếu kiểm tra các cài đặt toàn cục thêm tham số -g (global)

npm ls
npm ls -g

Package.json

Cách tốt nhất để quản lý các gói cài đặt cục bộ bằng npm là thông qua file package.json là file nằm trong thư mục gốc của dự án. File này chứa các nội dung:

• Các gói thư viện lập trình mà dự án sử dụng.
• Cho phép xác định phiên bản chính xác của các gói thư viện lập trình được sử dụng.
• Các gói bạn xây dựng có thể chia sẻ dễ dàng với các lập trình viên khác trên toàn cầu thông qua npm.

Lệnh npm init –yes sẽ tạo ra file package.json mẫu.

npm init --yes
Wrote to /home/ag_dubs/my_package/package.json:

{
  "name": "my_package",
  "description": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ashleygwilliams/my_package.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ashleygwilliams/my_package/issues"
  },
  "homepage": "https://github.com/ashleygwilliams/my_package"
}
Code language: JavaScript (javascript)

Có một số các thuộc tính trong package.json, chúng ta cùng điểm qua:

• name: tên gói thư viện lập trình
• version: phiên bản gói
• description: phần mô tả về gói thư viện
• homepage: trang chủ của gói
• author: tác giả
• contributors: tên người đóng góp cho package
• dependencies: danh sách các gói phụ thuộc, tự động được cài theo.
• repository: loại repository và url của package, thông thường là git
• main: luôn luôn là index.js
• keywords: các từ khóa

Bạn có thể thiết lập một số các thuộc tính này thông qua sử dụng các câu lệnh

> npm set init.author.email "wombat@npmjs.com"
> npm set init.author.name "ag_dubs"
> npm set init.license "MIT"
Code language: CSS (css)

Ví dụ sử dụng file package.json, dự án sử dụng gói my_package với phiên bản là v1 khi triển khai dự án và sử dụng gói my_develop_package trong quá trình xây dựng ứng dụng với phiên bản chính xác là v3.0, file package.json sẽ như sau:

{
  "name": "my_package",
  "version": "1.0.0",
  "dependencies": {
    "my_package": "^1.0.0"
  },
  "devDependencies" : {
    "my_develop_package": "^3.1.0"
  }
}
Code language: JSON / JSON with Comments (json)

Nếu muốn thêm các entry vào thuộc tính dependencies khi cài đặt gói sử dụng thêm cờ –save, còn với thuộc tính devDependencies thì sử dụng cờ –save-dev. ## Xác định phiên bản gói thư viện lập trình

Khi cài đặt một gói thư viện, bạn có thể xác định phiên bản của gói để npm biết thực thi. Ví dụ, khi cài đặt Vue.js chúng ta có thể có các phiên bản như sau:

• 2.1.10
• 2.1.10
• =2.1.10
• ~2.1.10

Ví dụ về file package.json khi cài đặt Vue.js và Vue-router

"devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-router": "^2.5.3"
  }
Code language: JavaScript (javascript)

Vậy ^2.1.10 là gì? Chúng ta có thể xác định phiên bản một cách chính xác hoặc xác định theo một dải phiên bản. ### Xác định chính xác phiên bản

Nếu muốn sử dụng chính xác phiên bản Vue.js 2.1.10 thì bạn có thể sử dụng một trong 3 cách viết sau: 2.1.10 hoặc =2.1.10 hoặc v2.1.10. Rất ít khi sử dụng phiên bản cụ thể vì như vậy khi cập nhật các phiên bản mới, npm sẽ bỏ qua gói thư viện này. Xác định chính xác phiên bản khi bạn thấy một phiên bản của gói thư viện nào đó là quá đủ với bạn.

Xác định phiên bản theo dải

Như đã nói ở trên, xác định phiên bản chính xác sẽ bỏ qua các cập nhật phiên bản mới, trong các phiên bản mới có thêm nhiều tính năng hoặc có các phiên bản sửa lỗi cho các phiên bản cũ, do vậy xác định phiên bản theo dải thường được sử dụng, tuy nhiên trong thực tế có nhiều phiên bản mới phá vỡ cấu trúc của phiên bản cũ dẫn đến hệ thống của bạn không chạy khi nâng cấp do vậy xác định phiên bản theo dải cũng cần hạn chế không nên sử dụng lastest.

"devDependencies": {
...
    "vue": "lastest",
...
  }
Code language: JavaScript (javascript)

Khi đó nếu cập nhật tất cả các gói phụ thuộc dự án bằng lệnh npm update thì nó sẽ lấy về phiên bản mới nhất nếu có các phiên bản mới. Có rất nhiều các chuỗi ký tự giúp định nghĩa dải phiên bản, chúng ta cùng xem bảng ý nghĩa cho từng dải phiên bản sau:

Các hành động thông qua sử dụng npm

Gỡ bỏ cài đặt gói thư viện

Trong thực tế, đôi khi có những gói thư viện bạn đã cài đặt nhưng sau đó bạn không sử dụng đến trong dự án, bạn có thể gỡ bỏ cài đặt một gói thông qua câu lệnh npm uninstall <package_name>. Ví dụ:

npm uninstall vue-router

Sau đó bạn có thể kiểm tra thư mục node_modules hoặc kiểm tra các danh sách gói được cài đặt thông qua câu lệnh npm ls

Cập nhật phiên bản cho gói thư viện

Các gói thư viện đưa vào dự án của bạn có thể liên tục có các phiên bản mới, bạn chỉ cần xác định phiên bản cho các gói này và thực hiện npm update để thực hiện cập nhật tất cả các gói liên quan. Nếu bạn chỉ muốn cập nhật một gói cụ thể có thể sử dụng cú pháp npm update <package_name>. Các câu lệnh này có thể sử dụng cờ -g (global) để thực hiện cập nhật cho các gói được cài đặt toàn cục.

npm update
npm update vuex

Lời kết

Qua bài viết bạn đã có cái nhìn tương đối toàn diện về NPM công cụ quản lý thư viện lập trình Javascript cho dự án, bạn cũng có thể sử dụng NPM hiệu quả hơn với việc xác định phiên bản các gói thư viện liên quan. NPM hay Yarn đều có những cơ sở kiến thức chung, bài viết này cũng giúp cho các bạn tìm hiểu về Yarn kiến thức nền tảng sử dụng package.json, tuy có một số khác biệt trong việc cập nhật phiên bản thông qua file yarn.lock.

Cảm ơn các bạn đã đọc.

Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.

• THAM KHẢO TÀI LIỆU LẬP TRÌNH TỪ CƠ BẢN ĐẾN NÂNG CAO

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Nguồn tham khảo: Allaravel