อะไรคือคำสั่ง 'react-สคริปต์ start'

ฉันทำงานกับโครงการ React โดยใช้create-react-appและฉันมีสองตัวเลือกในการเริ่มต้นโครงการ:

วิธีแรก:

npm run startด้วยคำจำกัดความที่เป็นpackage.jsonเช่นนี้:

"start": "react-scripts start",

วิธีที่สอง:

npm start

ความแตกต่างระหว่างสองคำสั่งเหล่านี้คืออะไร? และวัตถุประสงค์ของการreact-scripts startคืออะไร?

ฉันพยายามค้นหาคำจำกัดความ แต่ฉันเพิ่งพบแพ็คเกจด้วยชื่อนี้ ฉันยังไม่รู้ว่าการใช้คำสั่งนี้คืออะไร

create-react-app และ react-สคริปต์

react-scriptsคือชุดของสคริปต์จากcreate-react-appชุดเริ่มต้น create-react-app ช่วยให้คุณเริ่มต้นโครงการโดยไม่ต้องกำหนดค่าดังนั้นคุณไม่จำเป็นต้องตั้งค่าโครงการด้วยตัวเอง

react-scripts startตั้งค่าสภาพแวดล้อมการพัฒนาและเริ่มเซิร์ฟเวอร์รวมถึงการโหลดโมดูลร้อน คุณสามารถอ่านที่นี่เพื่อดูว่าทุกอย่างทำอะไรให้คุณ

ด้วยแอป create-react-appคุณมีคุณสมบัติดังต่อไปนี้นอกกรอบ

• รองรับการรองรับ JSX, ES6 และ Flow
• ภาษาพิเศษนอกเหนือจาก ES6 เช่นตัวดำเนินการแพร่กระจายวัตถุ
• แก้ไข CSS อัตโนมัติดังนั้นคุณไม่จำเป็นต้องใช้ -webkit- หรือคำนำหน้าอื่น ๆ
• นักวิ่งหน่วยทดสอบเชิงโต้ตอบที่รวดเร็วพร้อมการสนับสนุนในตัวสำหรับการรายงานความครอบคลุม
• เซิร์ฟเวอร์การพัฒนาสดที่เตือนเกี่ยวกับข้อผิดพลาดทั่วไป
• บิลด์สคริปต์เพื่อรวมบันเดิล JS, CSS และรูปภาพเพื่อการผลิตพร้อมแฮชและซอร์สแผนที่
• ผู้ปฏิบัติงานบริการออฟไลน์รายแรกและรายการแอปพลิเคชันบนเว็บเป็นไปตามเกณฑ์ของ Progressive Web App ทั้งหมด
• การอัปเดตที่ไม่ยุ่งยากสำหรับเครื่องมือด้านบนด้วยการพึ่งพาเพียงครั้งเดียว

สคริปต์ npm

npm startnpm run startเป็นทางลัดสำหรับ

npm runใช้เพื่อเรียกใช้สคริปต์ที่คุณกำหนดในscriptsวัตถุของ package.json ของคุณ

หากไม่มีstartคีย์ในวัตถุสคริปต์จะมีค่าเริ่มต้นเป็นnode server.js

react-scripts ejectบางครั้งคุณต้องการที่จะทำมากกว่าตอบสนองสคริปต์ช่วยให้คุณในกรณีนี้คุณสามารถทำได้ สิ่งนี้จะเปลี่ยนโครงการของคุณจากสถานะ "ที่มีการจัดการ" ไปเป็นสถานะที่ไม่ได้จัดการซึ่งคุณสามารถควบคุมการพึ่งพาทั้งหมดได้อย่างสมบูรณ์สร้างสคริปต์และการกำหนดค่าอื่น ๆ

ในฐานะที่เป็น Sagiv BG ออกมาชี้ที่คำสั่งเป็นทางลัดสำหรับnpm start npm run startฉันแค่อยากจะเพิ่มตัวอย่างชีวิตจริงเพื่อให้ชัดเจนขึ้น

การตั้งค่าด้านล่างมาจากcreate-react-apprepo GitHub การpackage.jsonกำหนดกลุ่มของสคริปต์ที่กำหนดกระแสที่แท้จริง

"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"
},

เพื่อความชัดเจนฉันเพิ่มไดอะแกรม

กล่องสีน้ำเงินเป็นการอ้างอิงถึงสคริปต์ทั้งหมดนี้คุณสามารถดำเนินการโดยตรงด้วยnpm run <script-name>คำสั่ง แต่อย่างที่คุณเห็นจริง ๆ แล้วมีเพียง 2 กระแสการปฏิบัติ:

• npm run start
• npm run build

กล่องสีเทาเป็นคำสั่งที่สามารถดำเนินการได้จากบรรทัดคำสั่ง

ตัวอย่างเช่นหากคุณเรียกใช้npm start(หรือnpm run start) ที่แปลเป็นnpm-run-all -p watch-css start-jsคำสั่งซึ่งดำเนินการจาก commandline

ในกรณีของฉันฉันมีnpm-run-allคำสั่งพิเศษนี้ซึ่งเป็นปลั๊กอินยอดนิยมที่ค้นหาสคริปต์ที่เริ่มต้นด้วย "build:" และดำเนินการทั้งหมดเหล่านั้น จริง ๆ แล้วฉันไม่มีรูปแบบที่ตรงกับที่ แต่มันยังสามารถใช้เพื่อรันคำสั่งหลายคำสั่งแบบขนานซึ่งทำที่นี่โดยใช้-p <command1> <command2>สวิตช์ ดังนั้นนี่จะรัน 2 สคริปต์คือและwatch-css start-js(สคริปต์ที่กล่าวถึงล่าสุดคือผู้เฝ้าดูที่ไฟล์มอนิเตอร์เปลี่ยนแปลงและจะเสร็จสิ้นเมื่อถูกฆ่า)

• watch-cssทำให้แน่ใจว่า*.scssไฟล์แปลง*.cssไฟล์และรูปลักษณ์สำหรับการปรับปรุงในอนาคต

• start-jsชี้ไปreact-scripts startซึ่งเป็นเจ้าภาพเว็บไซต์ในโหมดการพัฒนา

โดยสรุปnpm startคำสั่งสามารถกำหนดค่าได้ หากคุณต้องการรู้ว่ามันทำอะไรคุณต้องตรวจสอบpackage.jsonไฟล์ (และคุณอาจต้องการทำแผนภาพเล็ก ๆ น้อย ๆ เมื่อสิ่งต่าง ๆ มีความซับซ้อน)

"เริ่มต้น" เป็นชื่อของสคริปต์ใน NPM คุณเรียกใช้สคริปต์เช่นนี้npm run scriptName, npm start ยังเป็นสั้น npm run start

สำหรับ "react-สคริปต์" นี้เป็นสคริปต์ที่เกี่ยวข้องโดยเฉพาะเพื่อสร้าง -act-app