“ react-scripts start”命令究竟是什么?

reactjs React.js

小宇宙神无

2020-03-11

我一直在使用React项目,create-react-app并且有两个选项可以启动该项目:

第一种方式:

npm run start定义package.json如下:

"start": "react-scripts start",

第二种方式:

npm start

这两个命令有什么区别?的目的是react-scripts start什么?

我试图找到定义,但是我发现了一个带有名称的软件包,但我仍然不知道该命令的含义。

第737篇《“ react-scripts start”命令究竟是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Davaid阳光 2020.03.11

“ start”是脚本的名称,在npm中,您可以运行如下所示的脚本npm run scriptNamenpm start 它也是 npm run start

至于“反应脚本”,这是一个专门与create-react-app相关的脚本

路易EvaSam 2020.03.11

As Sagiv b.g. pointed out, the npm start command is a shortcut for npm run start. I just wanted to add a real-life example to clarify it a bit more.

The setup below comes from the create-react-app github repo. The package.json defines a bunch of scripts which define the actual flow.

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

For clarity, I added a diagram. 在此处输入图片说明

The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:

  • npm run start
  • npm run build

The grey boxes are commands which can be executed from the command line.

So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.

就我而言,我有一个特殊的npm-run-all命令,它是一个流行的插件,用于搜索以“ build:”开头的脚本,并执行所有这些命令。我实际上没有与该模式匹配的任何东西。但是在-p切换之后,它还有两个参数,它们是其他脚本。因此,这里是执行这两个脚本的简写。(即watch-cssstart-js

  • watch-css可确保*.scss文件被转换为*.css文件,并寻找未来的更新。

  • start-js该点react-scripts start哪些主机在开发模式的网站。

总之,该npm start命令是可配置的。如果您想知道它的作用,则必须检查该package.json文件。(而且,当事情变得复杂时,您可能需要制作一些图表)。

Near神无Pro 2020.03.11

create-react-app and react-scripts

react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.

react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.

with create-react-app you have following features out of the box.

  • React, JSX, ES6, and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
  • Hassle-free updates for the above tools with a single dependency.

npm scripts

npm start is a shortcut for npm run start.

npm run is used to run scripts that you define in the scripts object of your package.json

if there is no start key in the scripts object, it will default to node server.js

Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android