创建-react-app和react-scripts

React-scripts是create-react-app初始包中的一组脚本。Create-react-app可以帮助您在不配置的情况下启动项目，因此您不必自己设置项目。

React-scripts启动设置开发环境和启动服务器，以及热模块重新加载。你可以阅读这里，看看它为你做了什么。

使用create-react-app，您可以获得以下开箱即用的功能。

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也

NPM start是NPM run start的快捷方式。

NPM run用于运行你在package.json的scripts对象中定义的脚本

如果在scripts对象中没有开始键，它将默认为server.js节点

有时候你想做的比react脚本给你的更多，在这种情况下你可以做react-scripts eject。这将把您的项目从“托管”状态转换为非托管状态，在这种状态下，您可以完全控制依赖项、构建脚本和其他配置。

"start"是一个脚本的名字，在npm中你运行的脚本是这样的npm run scriptName, npm start也是npm run start的缩写

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

正如Sagiv b.g.指出的，npm start命令是npm run start的快捷方式。我只是想加一个现实生活中的例子来更清楚一点。

下面的设置来自创建-反应-应用程序github回购。包。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>命令直接执行。但正如你所看到的，实际上只有两个实际的流程:

NPM运行启动 NPM运行构建

灰色框是可以从命令行执行的命令。

因此，例如，如果你运行npm start(或npm run start)，实际上转换为npm-run-all -p watch-css start-js命令，这是从命令行执行的。

在我的例子中，我有这个特殊的npm-run-all命令，这是一个流行的插件，它搜索以“build:”开头的脚本，并执行所有这些脚本。实际上我没有任何符合这个模式的。但它也可以用于并行运行多个命令，这里使用-p <command1> <command2>开关。因此，在这里它执行两个脚本，即watch-css和start-js。(最后提到的脚本是监视文件更改的监视器，只有在被杀死时才会结束。)

watch-css确保*。SCSS文件被转换为*。csss文件，并寻找未来的更新。 start-js指向在开发模式下托管网站的react-scripts启动。

总之，npm start命令是可配置的。如果你想知道它是做什么的，那么你必须检查它的包装。json文件。(当事情变得复杂时，你可能想要做一个小图表)。

简单地说，它运行这个

node node_modules/react-scripts/bin/react-scripts.js start

NPM start是NPM run start的缩写形式

你可以在这里查看npm start和npm run start的区别

react-scripts开始

react-scripts是一组脚本，用于支持react应用程序的创建、开发和测试。它被create-react-app使用。

create-react-app is the officially supported way to create single-page React applications. create react app uses webpack to parse and bundle the application. webpack parses the application and creates a dependency graph from its entry point specified in the webpack config file. while parsing, webpack uses babel to transpile the application to JavaScript, which has better support across browsers. Webpack uses the generated dependency graph to create a single JavaScript file consisting of the application source code and modules used by the app, injects the file via script tag into public/index.html, and starts a development server on http://localhost:3000. Navigating to this URL in the browser will show a live, interactive instance of your application. Any changes saved to the source code will reflect in the running app instance automatically. You can read more about this topic more on here