Hướng dẫn npm python - npm python

Trong bài viết này chúng ta sẽ cùng tìm hiểu về cách dùng npm như một build tool thay thế những build tool khác như gulp, grunt,... Node đã cung cấp sẵn cách để xây dựng tiến trình build với chỉ npm và file package.json nên về cơ bản bạn sẽ chỉ cần tạo custom scripts trong trường script của file package.json.

1. Khởi tạo

  • Tạo một thư mục trống và mở terminal trong thư mục đó
  • Chạy command sau:
npm init
  • Skip tất cả những câu hỏi bằng cách liên tục enter. Một vài lưu ý quan trọng từ câu hỏi trong npm init/file package.json A. name: Tên của ứng dụng (phải tồn tại duy nhất khi đẩy lên NPMjs.org như một gói npm) B. main: điểm bắt đầu của ứng dụng

    Hướng dẫn npm python - npm python

  • Chạy command sau:

npm run test

Skip tất cả những câu hỏi bằng cách liên tục enter. Một vài lưu ý quan trọng từ câu hỏi trong npm init/file package.json A. name: Tên của ứng dụng (phải tồn tại duy nhất khi đẩy lên NPMjs.org như một gói npm) B. main: điểm bắt đầu của ứng dụng

Hướng dẫn npm python - npm python

Command "npm run" chạy đoạn script mà bạn đặt trong đối tượng "scripts" trong file package.json. Trong trường hợp này bạn đang chạy script mặc định khi khởi tạo file package.json "test", in ra một đoạn string và thông báo kết thúc lệnh với "&& exit 1". Exit status với giá trị 0 thông báo ứng dụng chạy thành công trong khi với những giá trị khác sẽ thông báo chạy không thành công, do đó đoạn script mặc định sẽ in ra màn hình lỗi

Hướng dẫn npm python - npm python

Nếu ta bỏ "&& exit code 1" và chạy lại, bạn sẽ nhận được output sau:

2. Shorthand scripts

npm start
npm stop
npm restart
npm test

Một vài script bao gồm "start", "stop", "restart", "test" có thể chạy theo cách vắn tắt:

npm run start
npm run stop
npm run restart
npm run test

tương tự với

3. Custom script

npm install mocha should --save-dev

Trước khi bắt đầu với custom script đầu tiên, cài đặt mocha và should thông qua command line

mocha: dành cho testing should: thực hiện phép so sánh trong mocha --save-dev: lưu lại dưới dạng thư viện dùng cho việc phát triển

var should = require('should');

describe('my first test', function() { 
    it('is running', function() {
        true.should.equal(true);
    });
});

Tiếp theo tạo thư mục "test" và file "test.js" bên trong. Mở file "test.js" dán hoặc gõ đoạn mã sau:

Sửa đoạn script trong package.json: "test": "mocha test -u bdd -R spec"

mocha: lệnh test với mocha test : Tên thư mục -u: Mô tả user-interface (bdd|tdd|exports). bdd: Ở đây ta đang dùng bdd interface (Behavior-Driven Development) -R: Reporter từ mocha spec: reporter mặc định, in ra màn hình kết quả test theo dạng thứ bậc

npm test

Sau đó chạy từ terminal:

Hướng dẫn npm python - npm python

Output sẽ như sau:

4. Thêm script

npm install express --save

Chúng ta sẽ dựng một ứng dụng express đơn giản. Trước hết cài đặt express và lưu vào package.json

var express = require('express');
var app = express()

app.get('/', function(re,res) {
  res.send('Hello Cuong Ho')
});

var port = process.argv[2] || 3000;

app.listen(port);
console.log('app listening on port' + port)

Tiếp theo tạo file server.js và gõ đoạn sau:

Hướng dẫn npm python - npm python

Cấu trúc thư mục hiện có:

npm start

Tiếp tục chạy

npm run test
0

Command này sẽ tìm script "start" trong package.json nhưng do script này chưa được mô tả trong package.json nên nó sẽ tự động chạy server.js. Nó cũng cho phép bạn chỉ rõ port ở argument thứ ba của "npm start"

Hướng dẫn npm python - npm python

Chạy đoạn script trên và mở trình duyệt của bạn tại địa chỉ localhost:4000 bạn sẽ thấy output sau:

npm run test
1

Để mô tả rõ ràng hơn script "start" chúng ta sẽ đưa script để chạy server.js vào trong package.json

"start:dev" cho chúng ta kết quả như bên trên, trong khi "start" sẽ chạy app chúng ta tại cổng 3000.

5. Script Pre và Post

npm run test
2

Pre và Post script chạy trước và sau khi script chính. Để cài đặt, bạn chỉ cần thêm "pre" hoặc "post" vào tên của script mà bạn muốn chạy. Ví dụ

npm test

Chạy command:

Hướng dẫn npm python - npm python
Command trên sẽ chạy theo thứ tự "pretest", "test", "posttest" và cho ra output:

npm run test
4

Bạn cũng có thể chạy command theo cách sau:

Hướng dẫn npm python - npm python

6.JSHint

-s là shortcut của --loglevel=silent, giúp bạn chỉ hiển thị output mà bạn mong muốn khi chạy script

npm run test
5

Cài đặt JSHint

Hướng dẫn npm python - npm python
Bên trong .jshintrc, gõ đoạn code sau:

npm run test
6

Tạo file .jshintrc. Cấu trúc file của chúng ta bây giờ gồm Bên trong .jshintrc, gõ đoạn code sau:

esnext: option này cho JSHint biết code của bạn đang dùng syntax của ES6 noyield: option này chặn những thong báo rằng bên trong hàm generator không có câu lệnh "yield"

npm run test
7

Bây giờ, tiếp tục thêm script "lint" vào trong file package.json

npm run test
8

Chạy command

Hướng dẫn npm python - npm python

Output:

Hướng dẫn npm python - npm python

Chúng ta sẽ fix thông báo này bằng cách thêm dấu ";" vào cuối dòng 2,5 và 11. Chạy lại command trên, bạn sẽ nhận được output bên dưới.

npm run test
9

Tiếp theo ta sẽ cho đoạn script "lint" này vào "pretest":

npm start
npm stop
npm restart
npm test
0

Sau đó chạy từ terminal:

Hướng dẫn npm python - npm python

Output sẽ như sau:

4. Thêm script