Bàn về câu lệnh npm run build – tại sao cần phải build?
Bài viết được sự cho phép của tác giả Tống Xuân Hoài
Vấn đề
npm run build
một câu lệnh không quá xa lạ với các lập trình viên Javascript khi chuẩn bị release phiên bản mới của ứng dụng. Theo cách hiểu đơn giản, npm run build
thực hiện công việc chuyển đổi mã trong dự án thành mã có thể chạy được trong trình duyệt hoặc Node.js.
Nhưng tại sao lại cần phải có bước build
? Bản chất của việc build
là gì? Có phải tất cả dự án Javascript/Node.js cần phải build
hay không? Hy vọng bạn đọc sẽ tìm được câu trả lời trong bài viết dưới đây.
npm script
package.json
là một file có trong các dự án Javascript hay Node.js. Chức năng của nó là lưu trữ một số thông tin về project cũng như thông tin về cấu hình và các chỉ dẫn cho dự án hoạt động. Lấy ví dụ đơn giản, trongpackage.json
lưu trữ lại tất cả các thư viện npm để mỗi khi cần tải các phụ thuộc (dependencies) chỉ cần chạynpm install
.
scripts
là một thuộc tính trong package.json, nó lưu giữ các giá trị trông giống như dưới đây:
{
"scripts": {
"dev": "vite",
"tsc": "vue-tsc --noEmit",
"build": "npm run tsc && vite build",
"build-dev": "vue-tsc --noEmit && vite build --mode development",
"serve": "vite preview"
}
}
Khi đó, nếu chúng ta gõ npm run build
thì ở bên dưới (background), câu lệnh thực sự chạy đó chính là vue-tsc --noEmit && vite build
. Nói cách khác build
chỉ là “tên đại diện” cho câu lệnh bạn thực sự muốn chạy. Tôi không thích build
thì đổi tên nó thành release
không thành vấn đề. Nếu muốn chạy, chỉ cần gõ npm run release
thế là xong. npm run release
lúc này cũng giống như npm run build
trước đó.
scripts
sinh ra để che giấu đi sự phức tạp trong việc nhớ các câu lệnh của project. Ở ví dụ trên, việc ghi nhớnpm run build
so vớivue-tsc --noEmit && vite build
theo bạn thì cái nào dễ dàng hơn? Hơn nữa trong một dự án không chỉ sử dụng một lệnh mà có khi là nhiều cho đến cả vài chục. Thậm chí chúng có móc nối đến nhau, nghĩa là lệnh này bằng nhiều lệnh khác cộng lại.
Hãy nhìn vào dòng của lệnh build
trên, nó là sự kết hợp của tsc
và vite build
. Tạo ra nhiều scripts với độ phân tử giúp bạn có thể tái sử dụng. Việc đặt tên cho chúng còn mang lại ý nghĩa gợi nhớ. Nghĩa là bất kì project nào, nếu mở package.json
ra mà thấy có build
trong scripts
thì chắc hẳn đó chính là lệnh chuẩn bị release phiên bản mới của ứng dụng.
Sự phức tạp của giới trình duyệt/Node.js
Javascript sinh ra đã mang nhiều sự phức tạp, nhiều khi bạn không thể hiểu nổi tại sao typeof null == 'object'
và vô số những điều vô lý đến thuyết phục khi làm việc với nó. Để giải thích cho điều đó có khá nhiều lý do, một trong những lý do là sự phân mảnh của Javascript. Nếu như với các ngôn ngữ khác, muốn sử dụng nó bạn chỉ cần tải bản cài đặt về rồi cài vào máy là có thể sử dụng. Sau khi phát triển xong, muốn triển khai ứng dụng lên máy chủ thì chỉ cần sử dụng đúng phiên bản cài đặt trước đó thì mọi thứ đều hoạt động. Nhưng với Javascript thì ngược lại, cho phép chạy mã Javascript hay không là quyền thuộc về trình duyệt. Mà trình duyệt thì có rất nhiều và không phải cái nào cũng tuân thủ theo quy tắc của Javascript. Hay nói cách khác, một đoạn mã Javascript chạy tốt trên trình duyệt này nhưng chưa chắc đã chạy trên trình duyệt khác.
Node.js thì hạn chế được sự phân mảnh hơn, vì nó chỉ sử dụng V8 của Chrome. Sử dụng Node.js đồng nghĩa với việc bạn phải dùng V8. Một mặt tích cực khác, Chrome hiện đang là “vua” của trình duyệt thế nên để đáp lại điều đó, nó luôn được cập nhật những tiêu chuẩn của ECMAScript nhanh nhất. Những bản cập nhật luôn mang lại thêm những tính năng mới.
Việc làm JavaScript Hồ Chí Minh dành cho bạn!
Nhìn lại thực tế, không phải khách hàng nào cũng có phiên bản trình duyệt mới nhất. Không phải tất cả đều sử dụng Chrome hay Firefox… thế nên việc đắn đo liệu mã mình sắp viết đây có chạy được trên tất cả trình duyệt hay không là một điều đáng lo ngại. Ý tưởng của các công cụ hỗ trợ viết một lần “dịch” cho tất cả cũng xuất hiện từ đây.
Có thể bạn đã nghe nói đến babel.js, đây là thư viện chuyển đổi mã Javascript mới hơn về mã mà hầu hết các trình duyệt cả cũ cả mới có thể chạy được. Hiểu đơn giản, nếu bạn muốn dùng các cú pháp Javascript mới nhất mà vẫn có thể chạy được trên các trình duyệt cũ hoặc khác nhau thì babel.js giúp bạn làm điều đó. Bạn cần phải cài đặt babel.js, viết mã rồi sử dụng nó để chuyển đổi mã bạn vừa viết. Đó là lúc lệnh build
xuất hiện. Trong build
có thể là câu lệnh có sử dụng babel. Thay vì phải gõ một câu lệnh phức tạp thì chúng ta chỉ cần npm run build
.
{
"scripts": {
"build": "babel src -d lib"
}
}
Ngày nay với sự ra đời của nhiều Framework hỗ trợ xây dựng ứng dụng dựa trên phản ứng như Angular, React, Vue… càng làm nổi bật thêm các build tools hơn nữa. Về cơ bản, các Framework che giấu sự phức tạp khi phát triển và cho đến lúc release bằng những build tools như webpack, rollup, vite… Điều đó giúp cho nhà phát triển ứng dụng tập trung vào công đoạn viết mã nhiều hơn so với việc đi “phát minh” lại cấu trúc dự án.
Như vậy có phải tất cả ứng dụng cần phải build
?
Câu trả lời là không. Như tôi đã nói build
chỉ là một “tên đại diện” cho câu lệnh phức tạp, hơn nữa nó còn mang ý nghĩa gợi nhớ. build
thường xuất hiện trong dự án có sử dụng các công cụ hỗ trợ compile mã đơn giản thành phức tạp ví dụ như babel, hay các công cụ bundle như webpack, rollup…
Nếu bạn phát triển một ứng dụng thuần Javascript đơn giản mà không sử dụng các công cụ trên, thì rõ ràng bạn không cần phải build
. Trình duyệt hay Node.js có thể chạy được những đoạn mã mà bạn viết.
Tổng kết
package.json
là một file chứa các thông số và cấu hình cho dự án Javascript/Node.js. scripts
là một thuộc tính chứa các giá trị và câu lệnh được chạy tương ứng mỗi khi sử dụng npm run
. scripts
giúp chúng ta che giấu đi sự phức tạp của câu lệnh và mang ý nghĩa gợi nhớ, build
cũng mang ý nghĩa đó.
Vì vậy, các dự án mà có sử dụng đến build tools
như babel, webpack… thì mới cần đến build
còn lại, nếu bạn phát triển dự án thuần Javascript mà trình duyệt có thể hiểu được luôn thì không cần thiết phải qua bước build
nữa.
Bài viết gốc được đăng tải tại 2coffee.dev
Có thể bạn quan tâm:
- Callback hell là gì? 6 cách “trị” callback hell trong javascript
- Kỹ thuật tối ưu Javascript nhằm tăng tốc độ web gấp 2 lần
- 7 sai lầm lớn khiến việc học Javascript như “nước đổ lá khoai”
Xem thêm Việc làm IT hấp dẫn tại TopDev
- M Mới ra trường không kinh nghiệm, sao làm BA?
- C Chuyển đổi SA key sang Workload Identity
- U Use Case Diagram và 5 sai lầm thường gặp
- K Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
- D Dart là gì? Ứng dụng của ngôn ngữ lập trình Dart
- C Chuẩn Hóa CV, Nhận Ngay Phím Chất
- S So sánh MySQL và MongoDB: Nên chọn CSDL nào?
- D Dân BA có cần phải rành về kỹ thuật???
- C CSS Selector là gì? Cách sử dụng các loại CSS Selector phổ biến
- P Phân biệt Sketch, Wireframe, Mockup, và Prototype?