Chính xác thì lệnh 'Reac-scripts start' là gì?


175

Tôi đã làm việc với một dự án React, sử dụng create-react-appvà tôi có hai tùy chọn để bắt đầu dự án:

Cách thứ nhất:

npm run startvới định nghĩa package.jsonnhư thế này:

"start": "react-scripts start",

Cách thứ hai:

npm start

Sự khác biệt giữa hai lệnh này là gì? Và mục đích của là react-scripts startgì?

Tôi đã cố gắng tìm định nghĩa, nhưng tôi chỉ tìm thấy một gói có tên và tôi vẫn không biết ý nghĩa của lệnh này là gì.


2
"bắt đầu" là tên của một tập lệnh, trong npmkhi bạn chạy các tập lệnh như thế này npm run scriptName, npm startcũng là viết tắt củanpm run start
Sagiv bg

3
react-scripts startlà lệnh thích hợp để chạy ứng dụng React ở chế độ dev. Lệnh này được lưu trữ trong pack.json vì vậy bạn không cần phải ghi nhớ nó và có thể chỉ cần gõ thông thường npm run startthay thế. npm startlà một phím tắt cho cái sau.
Chris G

Câu trả lời:


148

tạo-Reac-app và Reac-scripts

react-scriptslà một tập các kịch bản từ create-react-appgói khởi động. tạo-Reac-app giúp bạn khởi động các dự án mà không cần cấu hình, do đó bạn không phải tự mình thiết lập dự án của mình.

react-scripts startthiết lập môi trường phát triển và khởi động máy chủ, cũng như tải lại mô-đun nóng. Bạn có thể đọc ở đây để xem mọi thứ nó làm cho bạn.

với ứng dụng tạo phản ứng, bạn có các tính năng sau đây.

  • Hỗ trợ cú pháp React, JSX, ES6 và Flow.
  • Ngôn ngữ bổ sung ngoài ES6 như toán tử trải rộng đối tượng.
  • CSS tự động kết hợp, vì vậy bạn không cần -webkit- hoặc các tiền tố khác.
  • Một người chạy thử nghiệm đơn vị tương tác nhanh với sự hỗ trợ tích hợp để báo cáo bảo hiểm.
  • Một máy chủ phát triển trực tiếp cảnh báo về những sai lầm phổ biến.
  • Một tập lệnh xây dựng để đóng gói JS, CSS và hình ảnh để sản xuất, với các giá trị băm và mã nguồn.
  • Một nhân viên dịch vụ ngoại tuyến đầu tiên và một bảng kê khai ứng dụng web, đáp ứng tất cả các tiêu chí Ứng dụng Web lũy tiến.
  • Cập nhật miễn phí cho các công cụ trên với một phụ thuộc duy nhất.

kịch bản npm

npm startlà một phím tắt cho npm run start.

npm runđược sử dụng để chạy các tập lệnh mà bạn xác định trong scriptsđối tượng của gói.json

nếu không có startkhóa trong đối tượng script, nó sẽ mặc định lànode server.js

Đôi khi bạn muốn làm nhiều hơn các kịch bản phản ứng mang lại cho bạn, trong trường hợp này bạn có thể làm react-scripts eject. Điều này sẽ chuyển đổi dự án của bạn từ trạng thái "được quản lý" sang trạng thái không được quản lý, nơi bạn có toàn quyền kiểm soát các phụ thuộc, xây dựng tập lệnh và các cấu hình khác.


Bạn có biết làm thế nào để chạy nó trên sản xuất?
dùng269867

10
để sử dụng nó trong sản xuất bạn sẽ nói npm run build. điều này sẽ tạo ra một thư mục xây dựng. thư mục này sau đó bạn có thể phục vụ. ví dụ: npm install -g servevà sau đó serve -s build facebook.github.io/create-react-app/docs/deployment
Luke

Ba liên kết đầu tiên tất cả liên kết đến cùng một URL.
Andrew Grimm

đã thay đổi liên kết thứ hai thành "bao gồm những gì"
Luke

63

Như Sagiv bg đã chỉ ra, npm startlệnh là một phím tắt cho npm run start. Tôi chỉ muốn thêm một ví dụ thực tế để làm rõ hơn một chút.

Các thiết lập dưới đây đến từ create-react-apprepo github. Các package.jsonđịnh nghĩa một loạt các kịch bản xác định luồng thực tế.

"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},

Để rõ ràng, tôi đã thêm một sơ đồ. nhập mô tả hình ảnh ở đây

Các hộp màu xanh là các tham chiếu đến các tập lệnh, tất cả chúng có thể được thực thi trực tiếp bằng một npm run <script-name>lệnh. Nhưng như bạn có thể thấy, thực tế chỉ có 2 luồng thực tế:

  • npm run start
  • npm run build

Các hộp màu xám là các lệnh có thể được thực thi từ dòng lệnh.

Vì vậy, ví dụ, nếu bạn chạy npm start(hoặc npm run start) thực sự dịch sang npm-run-all -p watch-css start-jslệnh, được thực thi từ dòng lệnh.

Trong trường hợp của tôi, tôi có npm-run-alllệnh đặc biệt này , đây là một plugin phổ biến tìm kiếm các tập lệnh bắt đầu bằng "build:" và thực thi tất cả các plugin đó. Tôi thực sự không có bất kỳ mô hình phù hợp với mô hình đó. Nhưng nó cũng có thể được sử dụng để chạy song song nhiều lệnh, được thực hiện ở đây, bằng cách sử dụng công -p <command1> <command2>tắc. Vì vậy, ở đây nó thực thi 2 script, tức là watch-cssstart-js. (Những đoạn script được đề cập cuối cùng là những người theo dõi thay đổi tập tin và sẽ chỉ hoàn thành khi bị giết.)

  • Các watch-cssđảm bảo rằng các *.scsstập tin được phiên dịch sang *.csscác file, và ngoại hình để cập nhật trong tương lai.

  • Các start-jsđiểm để react-scripts startlưu trữ trang web trong chế độ phát triển.

Trong kết luận, npm startlệnh có thể cấu hình. Nếu bạn muốn biết nó làm gì, thì bạn phải kiểm tra package.jsontệp. (và bạn có thể muốn tạo một sơ đồ nhỏ khi mọi thứ trở nên phức tạp).


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.