在 React 开始 React-Scripts
从头开始构建 React 应用程序在技术上是可行的,但你必须创建所有文件并调整配置,这可能非常耗时。因此,你可以使用 create-react-app
,它为开发你的 React 应用程序提供了一个友好的环境。它还包括可用于启动开发服务器、启用热重载和其他基本功能的脚本和配置。
create-react-app
中的 react-scripts
安装 create-react-app
包允许你使用一个命令设置功能齐全的 React 应用程序。作为开发人员,你只需在命令行中键入 npm run start
即可在本地主机服务器上创建实时应用程序。基本的 create-react-app
配置还包括运行应用程序所需的一整套脚本。这样配置是为了省去初学者自己配置项目的麻烦。但是,可以在 package.json
文件中自定义 react-scripts
。
react-scripts start
要执行此脚本,请在命令行中运行 npm run start
。你也可以使用速记命令 npm start
。它告诉 create-react-app
设置开发环境、启动本地服务器和热模块重新加载。
你的 package.json
文件应该包含一个 scripts
对象,带有引用脚本名称和执行引用的键值对。这只是告诉 React 执行 npm-run-all -p watch-css start-js
命令的一种更简单的方法,该命令执行多个操作。在这种情况下,npm run start
会触发两个脚本的执行:watch-css
和 start-js
。前者确保将 .scss
文件转换为常规的 .css
文件,并且你的样式更改会自动反映在你的应用程序中。后者告诉 React 在开发模式下设置应用程序并使用 localhost:3000
来托管它。
定制
npm start
只是一个命令。如果需要,你可以自定义其操作。例如,你可以配置 localhost 端口来托管应用程序。下面是一个例子:
"scripts": {
"start": "set PORT=8000 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
在这里,我们明确地告诉脚本使用 localhost:8000
端口而不是默认端口。
你还可以通过在命令行中输入 npm run scriptName
来运行其他脚本。如果你正在运行 create-react-app
应用程序并且无法弄清楚 script
的作用,请查看 package.json
文件。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn