Tìm hiểu các Script trong ReactJS
- 20-09-2022
- Toanngo92
- 0 Comments
Mục lục
‘build’ Script
Để chạy bất kỳ lệnh npm nào, bạn chỉ cần nhập npm run script_name vào môi trường dòng lệnh. Có một số script đặc biệt mà bạn có thể bỏ qua phần chạy của lệnh, nhưng bạn luôn có thể chạy toàn bộ lệnh. Để chạy build script, nhập nội dung sau vào môi trường dòng lệnh của bạn:
npm run build
Bạn sẽ ngay lập tức thấy thông báo hiển thị trên terminal:
> reactdemo@0.1.0 build
> react-scripts build
Creating an optimized production build...
Điều này cho bạn biết Create React App đang biên dịch mã của bạn thành một gói có thể sử dụng được. Khi hoàn tất, bạn sẽ thấy kết quả sau:
Compiled successfully.
File sizes after gzip:
46.38 kB build\static\js\main.2df6b2a9.js
1.78 kB build\static\js\787.fad1ebcf.chunk.js
541 B build\static\css\main.073c9b0a.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
https://cra.link/deployment
Kiểm tra lại cấu trúc thư mục dự án, bạn sẽ thấy xuất hiện một thư mục mới là build, đây chỉ là phiên bản mã nguồn đã được minified và optimized cho môi trường chạy. Bạn có thể chạy lệnh dưới để bắt đầu tiến trình phục vụ:
serve -s build
‘test’ Script
Test script là một trong những script đặc biệt không yêu cầu từ khóa run, nhưng hoạt động ngay cả khi bạn bao gồm từ khóa đó. Tập lệnh này sẽ khởi động một trình chạy thử nghiệm được gọi là Jest. Trình chạy thử nghiệm xem qua dự án của bạn để tìm bất kỳ tệp nào có phần mở rộng .spec.js hoặc .test.js, sau đó chạy các tệp đó.
Để chạy tập lệnh thử nghiệm, hãy nhập lệnh sau:
test npm
Sau khi chạy tập lệnh này, terminal của bạn sẽ có đầu ra của bộ thử nghiệm và dấu nhắc thiết bị đầu cuối sẽ biến mất. Nó sẽ trông giống như thế này:
Output
PASS src/App.test.js
✓ renders learn react link (67ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.204s
Ran all test suites.
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
Có một số điều cần lưu ý ở đây. Đầu tiên, như đã lưu ý trước đây, nó tự động phát hiện bất kỳ tệp nào có phần mở rộng thử nghiệm bao gồm .test.js và .spec.js. Trong trường hợp này, chỉ có một bộ thử nghiệm — nghĩa là, chỉ một tệp có phần mở rộng .test.js — và bộ thử nghiệm đó chỉ chứa một thử nghiệm.
Thứ hai, Jest không chạy bộ thử nghiệm của bạn một lần rồi thoát. Thay vào đó, nó tiếp tục chạy trong thiết bị đầu cuối. Nếu bạn thực hiện bất kỳ thay đổi nào trong mã nguồn, nó sẽ chạy lại các bài kiểm tra sau đó
Bạn cũng có thể giới hạn các bài kiểm tra bạn chạy bằng cách sử dụng một trong các tùy chọn bàn phím. Ví dụ: nếu bạn nhập o, bạn sẽ chỉ chạy các bài kiểm tra trên các tệp đã thay đổi. Điều này có thể giúp bạn tiết kiệm rất nhiều thời gian khi các bộ thử nghiệm của bạn phát triển.
Cuối cùng, bạn có thể thoát khỏi trình chạy thử nghiệm bằng cách nhập q. Làm điều này ngay bây giờ để lấy lại dấu nhắc lệnh của bạn.
‘eject’ script
Script cuối cùng là npm eject. Tập lệnh này sao chép các tệp phụ thuộc và tệp cấu hình của bạn vào dự án của bạn, cho phép bạn toàn quyền kiểm soát mã của mình nhưng loại bỏ dự án khỏi chuỗi công cụ tích hợp Create React App. Bạn sẽ không chạy thao tác này ngay bây giờ vì sau khi chạy tập lệnh này, bạn không thể hoàn tác hành động này và bạn sẽ mất mọi bản cập nhật Tạo ứng dụng React trong tương lai (Nói chung, script này ít khi được sử dụng hơn).