Apa sebenarnya perintah 'react-scripts start'?

175

Saya telah bekerja dengan proyek Bereaksi, menggunakan create-react-app, dan saya memiliki dua opsi untuk memulai proyek:

Cara pertama:

npm run startdengan definisi package.jsonseperti ini:

"start": "react-scripts start",

Cara kedua:

dan npm start

Apa perbedaan antara kedua perintah ini? Dan apa tujuan dari react-scripts start?

Saya mencoba menemukan definisi, tetapi saya baru saja menemukan paket dengan nama, dan saya masih tidak tahu apa arti dari perintah ini.

reactjs npm Felipe Augusto
sumber
2
"mulai" adalah nama skrip, di dalam npmAnda menjalankan skrip seperti ini npm run scriptName, npm startjuga merupakan kependekan darinpm run start
Sagiv bg
3
react-scripts startadalah perintah yang tepat untuk menjalankan aplikasi Bereaksi dalam mode dev. Perintah ini disimpan dalam package.json sehingga Anda tidak harus menghafalnya dan cukup mengetik yang biasa npm run start. npm startadalah jalan pintas untuk yang terakhir.
Chris G

Jawaban:

148

buat-reaksi-aplikasi dan bereaksi-skrip

react-scriptsadalah sekumpulan skrip dari create-react-apppaket perdana. create-react-app membantu Anda memulai proyek tanpa mengkonfigurasi, jadi Anda tidak perlu mengatur proyek Anda sendiri.

react-scripts startmengatur lingkungan pengembangan dan memulai server, serta memuat kembali modul panas. Anda dapat membaca di sini untuk melihat apa saja yang dilakukan untuk Anda.

dengan create-react-app Anda memiliki fitur berikut di luar kotak.

  • Bereaksi, JSX, ES6, dan dukungan sintaksis Flow.
  • Ekstra bahasa di luar ES6 seperti operator penyebaran objek.
  • Autoprefixed CSS, jadi Anda tidak perlu -webkit- atau awalan lainnya.
  • Pelari uji unit interaktif cepat dengan dukungan bawaan untuk pelaporan cakupan.
  • Server pengembangan langsung yang memperingatkan tentang kesalahan umum.
  • Skrip build untuk menggabungkan JS, CSS, dan gambar untuk produksi, dengan hash dan sumber data.
  • Pekerja layanan offline-pertama dan manifes aplikasi web, memenuhi semua kriteria Aplikasi Web Progresif.
  • Pembaruan bebas kerumitan untuk alat di atas dengan ketergantungan tunggal.

skrip npm

npm startadalah jalan pintas untuk npm run start.

npm rundigunakan untuk menjalankan skrip yang Anda tetapkan di scriptsobjek package.json Anda

jika tidak ada startkunci dalam objek skrip, itu akan menjadi defaultnode server.js

Terkadang Anda ingin melakukan lebih dari yang diberikan skrip reaksi, dalam hal ini yang dapat Anda lakukan react-scripts eject. Ini akan mengubah proyek Anda dari status "terkelola" menjadi status tidak terkelola, di mana Anda memiliki kontrol penuh atas dependensi, membangun skrip, dan konfigurasi lainnya.

Luke
sumber
Apakah Anda tahu cara menjalankannya pada produksi?
user269867
10
untuk menggunakannya dalam produksi, Anda akan mengatakan npm run build. ini akan membuat folder build. folder ini kemudian dapat Anda layani. mis npm install -g servedan kemudian serve -s build facebook.github.io/create-react-app/docs/deployment
Luke
Tiga tautan pertama semua tautan ke URL yang sama.
Andrew Grimm
mengubah tautan kedua ke "apa saja yang termasuk"
Luke
64

Seperti yang ditunjukkan oleh Sagiv bg, npm startperintah adalah jalan pintas untuk npm run start. Saya hanya ingin menambahkan contoh kehidupan nyata untuk memperjelasnya sedikit lagi.

Setup di bawah ini berasal dari create-react-apprepo github. The package.jsonmendefinisikan sekumpulan skrip yang menentukan aliran yang sebenarnya.

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

Untuk lebih jelasnya, saya menambahkan diagram. masukkan deskripsi gambar di sini

Kotak biru adalah referensi ke skrip, yang semuanya dapat Anda jalankan langsung dengan npm run <script-name>perintah. Tapi seperti yang Anda lihat, sebenarnya hanya ada 2 aliran praktis:

  • npm run start
  • npm run build

Kotak abu-abu adalah perintah yang dapat dieksekusi dari baris perintah.

Jadi, misalnya, jika Anda menjalankan npm start(atau npm run start) yang benar-benar menerjemahkan ke npm-run-all -p watch-css start-jsperintah, yang dijalankan dari baris perintah.

Dalam kasus saya, saya memiliki npm-run-allperintah khusus ini , yang merupakan plugin populer yang mencari skrip yang dimulai dengan "build:", dan mengeksekusi semua itu. Sebenarnya saya tidak punya yang cocok dengan pola itu. Tetapi itu juga dapat digunakan untuk menjalankan banyak perintah secara paralel, yang dilakukan di sini, menggunakan -p <command1> <command2>sakelar. Jadi, di sini dijalankan 2 skrip, yaitu watch-cssdan start-js. (Skrip yang disebutkan terakhir adalah pengamat yang memantau perubahan file, dan hanya akan selesai saat terbunuh.)

  • The watch-cssmemastikan bahwa *.scssfile dijabarkan ke *.cssfile, dan terlihat untuk masa depan pembaruan.

  • The start-jspoin ke react-scripts startyang host situs web dalam mode pembangunan.

Kesimpulannya, npm startperintah ini dapat dikonfigurasi. Jika Anda ingin tahu apa fungsinya, maka Anda harus memeriksa package.jsonfile tersebut. (dan Anda mungkin ingin membuat diagram kecil ketika segalanya menjadi rumit).

bvdb
sumber