Điều gì xảy ra khi bạn chạy các lệnh npm?

Bạn nhấn Enter cho một lệnh npm và chờ đợi. Đột nhiên, dự án của bạn hoạt động. Cảm giác như có phép màu vậy.

Đó không phải là phép màu. Đó là một chuỗi các yêu cầu mạng, phân tích mã nguồn và tối ưu hóa tệp tin.

Đừng chạy các lệnh một cách mù quáng. Hãy hiểu rõ "động cơ" đằng sau 6 lệnh cốt lõi này.

  1. npm install Lệnh này đọc tệp package.json của bạn. Nó liên hệ với một registry trên đám mây để tìm các dependency của bạn. • Nó tải các package vào thư mục node_modules. • Nó giải quyết các xung đột phiên bản. • Nó tạo ra một tệp package-lock.json để ghi lại các phiên bản chính xác.

  2. npm run format:check Đây là một bước xác minh. Nó sử dụng các công cụ như Prettier để quét các tệp của bạn. • Nó xây dựng một cấu trúc ảo cho mã nguồn của bạn. • Nó so sánh mã của bạn với các quy tắc định dạng (style rules). • Nó đánh dấu các lỗi mà không làm thay đổi tệp của bạn.

  3. npm run format Lệnh này khắc phục các vấn đề được tìm thấy trong quá trình kiểm tra. • Nó chạy Prettier trên dự án của bạn. • Nó viết lại các tệp của bạn để khớp với các quy tắc định dạng. • Nó tự động dọn dẹp khoảng trắng và định dạng.

  4. npm run lint Hãy coi đây như một trình kiểm tra lỗi chính tả cho mã nguồn của bạn. ESLint quét các lỗi như: • Lỗi cú pháp. • Biến không sử dụng. • Thiếu import. • Sử dụng React Hook không đúng cách.

  5. npm run build Lệnh này chuẩn bị ứng dụng của bạn cho môi trường thực tế. Nó tạo ra một thư mục dist. • Nó thực hiện tree shaking để loại bỏ mã nguồn không sử dụng. • Nó nén (minify) mã nguồn bằng cách loại bỏ khoảng trắng và rút ngắn tên biến. • Nó đóng gói (bundle) JavaScript, CSS và các tài nguyên (assets) thành các tệp đã được tối ưu hóa. • Các tệp này đã sẵn sàng để triển khai lên máy chủ.

  6. npm run dev Lệnh này khởi chạy một máy chủ cục bộ để bạn làm việc. • Nó sử dụng Native ES Modules để biên dịch các tệp chỉ khi trình duyệt yêu cầu chúng. • Nó sử dụng Hot Module Replacement (HMR) để cập nhật trang web của bạn ngay lập tức mà không cần tải lại trang.

  7. npm run preview Đây là bước kiểm tra cuối cùng. Nó bỏ qua mã nguồn và chỉ xem xét thư mục dist. • Nó mô phỏng cách ứng dụng của bạn hoạt động trên một máy chủ thực tế. • Nó giúp bạn phát hiện lỗi trước khi triển khai lên production.

Terminal không phải là một chiếc hộp đen. Hiểu rõ các công cụ này giúp bạn gỡ lỗi (debug) nhanh hơn khi có sự cố xảy ra.

Lệnh nào đã thay đổi cách bạn lập trình sau khi bạn hiểu cách nó hoạt động? Hãy cho tôi biết ở bên dưới.

Source: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba