npm giờ đã trở thành câu lệnh quen thuộc khi bạn làm quen với NodeJS. Với những ai chưa từng sử dụng, Code Tốt xin hướng dẫn cách bạn làm quen và hiểu cơ bản về npm nhé.
npm là gì?
Hãy tưởng tượng, bạn cần cài đặt 15 scripts từ các thư viện khác nhau. Nếu không có npm, điều đó tương đương với việc bạn phải tải về source của 15 thư viện, đặt nó vào đâu đó và include chúng vào trong source của bạn.
npm sẽ giúp bạn thực hiện điều này đơn giản hơn rất nhiều: các thư viện sẽ có sẵn trên npm, bạn chạy một dòng lệnh để tải về và dễ dàng include chúng hơn.
Cộng đồng sử dụng npm rất lớn, hàng nghìn các thư viện được phát hành, hỗ trợ Javascript ES6, React, Grunt, Duo, Express, Ember, Stylux… Với npm, bạn còn có nhiều tool thú vị để minify code và giảm thời gian làm những công việc liên quan tới Code Standard.
Cài đặt npm
npm có sẵn khi bạn tải NodeJS về. Nếu bạn chưa cài NodeJS và đang sử dụng Mac OS X, hãy nghía qua cách cài đặt nvm để biết cách cài nhiều version NodeJS giúp thuận tiện hơn sau này nhé.
Sau khi cài đặt xong thì bạn có thể kiểm tra xem version của npm bằng câu lệnh:
npm -v
Cài đặt các package trong npm
Tuỳ theo thư viện mà bạn sử dụng, chúng ta có thể cài đặt local (tức chỉ hiện diện trong thư mục của project hiện tại) hay global (tức là cài đặt cố định trong máy, bạn gọi theo dòng lệnh, ví dụ gulp là nó chạy). Mặc định thì các package khi cài đặt đều sẽ là cài trên project của bạn thôi.
Bắt đầu một project mới
Khi bạn có 1 project trắng và chưa có gì, để bắt đầu bạn gõ lệnh:
npm init
Khi đó, terminal sẽ hiện ra một số câu hỏi về thông tin project, ví dụ tên project, version, git repository,.. Bạn có thể nhấn Enter để bỏ qua cái nào mình không cần thiết nhập.
Sau khi hoàn tất, bạn sẽ thấy file package.json được tạo ra trong thư mục. File này hiện tại mới chỉ chứa thông tin project của bạn thôi, còn chưa có package nào đâu nhé.
Xem hướng dẫn chi tiết về npm init ở đây.
Cài đặt package global
Có rất nhiều package cần chạy ở dạng thức độc lập, tức là command sẽ bắt đầu bằng đúng tên của package, chẳng hạn như ta thường thấy gulp hay grunt. Đó là bởi đây là các package được cài đặt global, và yêu cầu trên máy phải cài global rồi đấy nhé.
Ta chỉ cần chạy câu lệnh này một lần duy nhất trên mỗi máy thôi:
npm install -g gulp
-g ở đây là global, tức là sau khi cài đặt thì bạn có thể sử dụng nó như một command độc lập.
Các package như vậy thông thường yêu cầu thêm 1 file setting trong project, chẳng hạn GulpJS sẽ yêu cầu file gulpfile.js nằm trong project để xác định các task gì nó sẽ thực thi. Tương tự, GruntJS cũng cần file Gruntfile.js để có thể sử dụng.
Xem thêm thông tin về cài đặt package global ở đây.
Mẹo: Bạn có thể quan sát một project có chứa gulpfile.js hay gruntfile.js để xem nó đang sử dụng công cụ gì khi chạy task runner tự động.
Cài đặt các package trong local project
Khi bạn muốn các package xuất hiện chỉ trong project của mình, ta thực hiện lệnh cài đặt, và sau đó các package sẽ có thư mục của riêng nó ở trong thư mục node_modules.
Nếu bạn không có file
package.json, khi chạy lệnh cài đặt,npmsẽ lấy version mới nhất của package trên npmjs.com.
Cú pháp đầy đủ: npm install, nhưng ta có thể dùng alias npm i.
Các cú pháp cài đặt và cắt nghĩa từng trường hợp cụ thể:
Trường hợp 1:
npm i lodash gulp-autoprefixer --save-dev
Đây là khi bạn cài đặt các package (có thể viết nhiều package sau npm install) vào trong devDependencies.
Trường hợp 2:
npm i flickity -P
Trường hợp này sẽ cài thư viện vào dependencies , thường là các thư viện bên thứ ba nhưng không phải workflow (tức là không tham gia vào quá trình chỉnh sửa code, minify, code standard,…), chẳng hạn như các thư viện slider flickity, lodash, js-cookie, @vimeo/player,…
Trường hợp 3:
npm i es6-promise
Trường hợp này chỉ nên xảy ra khi trên máy tính của bạn chạy NodeJS thấy báo thiếu module (có thể trên Git ai đó đã cài 1 module trong package.json, nhưng trên máy bạn chưa có).
Trường hợp 4:
npm i @terinjokes/gulp-uglify -D
Khi bạn có dấu “@” thì npm mặc định sẽ hiểu bạn đang cài đặt 1 package từ Github của user terinjokes với tên package là gulp-uglify chẳng hạn. Rất hữu ích nếu package đó chỉ có trên Github mà không có trên npmjs.com.
Trường hợp 5:
npm i gitlab:bmedini/gulp-sonar-js -D
Đây là khi bạn cài 1 thư viện từ Gitlab.
Trường hợp 6:
npm i [email protected]
Đây là khi bạn muốn cài đặt 1 version cụ thể. Có thể version mới nhất của thư viện xung đột với project của bạn chẳng hạn.
Đọc các cách cài đặt và nhiều thứ bạn có thể làm hơn tại đây.
Kết luận
Trong bài viết này, ta đã cùng tìm hiểu cách sử dụng npm để sử dụng trên project của bạn. Đừng quên nếu bạn thử và sai, ta có thể bắt đầu lại bằng cách xoá thư mục node_modules và file package.json để cài đặt lại. npm sẽ trở thành người bạn quen thuộc của mỗi project bạn làm sớm thôi!
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
