Sự khác nhau giữa NPM và NPX

Bởi

Khi làm việc với các dự án Javascript kiểu như NodeJS, ReactJS, Vuejs… Chắc hẳn bạn đã từng gặp các bài hướng dẫn cài đặt các thư viện đúng không?

Và bạn có bao giờ thắc mắc tại sao lúc thì dùng npm, lúc lại npx không?

Bài viết hôm nay, mình sẽ giải thích thật ngắn gọn về hai công cụ này.

Nội dung chính của bài viết

Sự khác nhau cơ bản giữa NPM vs NPX
Ví dụ thực hành

Sự khác nhau cơ bản giữa NPM vs NPX

Về cơ bản thì cả hai công cụ npm và npx đều là để quản lý các Packages – hay còn gọi là các thư viện Javascript.

Sự khác nhau duy nhất giữa chúng là:

NPM (Node Package Manager) là chương trình quản lý các packages và không thực thi chúng.
NPX (Npm Package Executor) , đúng như với tên gọi của nó, chương trình này có thể thực thi các package được lưu trữ trên npm

Như vậy, bản thân NPM chỉ đơn giản là cài đặt, tải các thư viện javascript được lưu trữ trên kho lưu trữ (có địa chỉ tại https://www.npmjs.com). Nếu bạn muốn chạy một package nào đó, bạn phải chỉ định nó trong tệp cấu hình package.json

Khi mà những thực thi được cài đặt thông qua npm. NPM sẽ tạo một liên kết đến những thực thi đó:

Nếu lưu local thì package đó sẽ được lưu tại thư mục ./node_modules/.bin/ của dự án
Nếu lưu global: package được lưu tại /usr/local/bin (đối với Linux) hoặc %AppData%/npm (đối với Window)

Như vậy, để thực thi một package bằng npm, từ cửa sổ lệnh (terminal) bạn phải đưa con trỏ tới đúng thư mục bin của package, rồi sau đó mới thực thi được.

Ví dụ: $ ./node_modules/.bin/my-package

Hoặc là chỉ định trong package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "my-package": "my-package"
  }
}

Rồi thực thi lệnh: $ npm run my-package

Với NPX, bạn sẽ không phải làm vậy, nó sẽ tự động tìm package đó. Bạn chỉ việc gõ lệnh: $ npx my-package

Lưu ý: Từ phiên bản npm 5.2.0, npx là công cụ được tích sẵn trong npm.

Ví dụ thực hành

Đọc xong phần lý thuyết trên, có lẽ vẫn hơi lằng nhằng khó hiểu phải không?

Để các bạn dễ hình dung hơn về sự khác nhau giữa npm vs npx, mình sẽ lấy ví dụ minh họa thực tế.

Khi bạn đọc các bài viết hướng dẫn về ReactJS, bạn thường hay khởi tạo dự án ReactJS bằng công cụ này đúng không: create-react-app. Câu lệnh mà bạn vẫn hay làm như sau:

$ npx create-react-app my-app

Chỉ với câu lệnh trên, npx sẽ tự động gọi thư viện create-react-app vào thực thi thư viện để tạo dự án có tên là my-app.

Đấy là với npx, nếu bạn thực hiện bằng công cụ npm thì sao?

Đầu tiên, bạn cần cài đặt công cụ create-react-app:

$ npm install -g create-react-app

Trong trường hợp bạn chưa cấu hình biến môi trường PATH trong trong máy tính thì bạn phải di chuyển con trỏ tới thư mục: /usr/local/bin/create-react-app

Sau đó mới gõ lệnh tạo my-app được: