我一直在使用create-react-app处理一个React项目,我有两个选项来启动该项目:
create-react-app
第一种方式:
npm run start,在package.json处的定义如下:"start": "react-scripts start",
npm run start
package.json
"start": "react-scripts start",
第二种方式:
npm start这两个命令之间有什么区别?react-scripts start的用途是什么?我试着去找定义,但是我只找到了一个这个名字的包。我还是不知道这个命令有什么用?
npm start
react-scripts start
eeq64g8w1#
react-scripts是create-react-app starter pack中的一组脚本。create-react-app帮助您启动项目而无需配置,因此您不必自己设置项目。react-scripts start设置开发环境并启动服务器,以及热模块重载。您可以阅读这里,看看它为您做了什么。使用create-react-app,您可以获得以下开箱即用的特性。
react-scripts
npm start是npm run start的快捷方式。npm run用于运行您在package.json的scripts对象中定义的脚本如果脚本对象中没有start键,它将默认为node server.js有时候你想做的比react脚本提供给你的更多,在这种情况下你可以做react-scripts eject,这将把你的项目从“托管”状态转换成非托管状态,在这种状态下你可以完全控制依赖关系,构建脚本和其他配置。
npm run
scripts
start
node server.js
react-scripts eject
pzfprimi2#
正如Sagiv b.g.所指出的,npm start命令是npm run start的快捷方式,我只是想添加一个现实生活中的示例来进一步澄清它。下面的设置来自于create-react-app github repo,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>命令执行。但是正如您所看到的,实际上只有两个实用的流程:
npm run <script-name>
npm run build
灰色框是可以从命令行执行的命令。因此,例如,如果您运行npm start(或npm run start),实际上会转换为npm-run-all -p watch-css start-js命令,该命令是从命令行执行的。在我的例子中,我有一个特殊的npm-run-all命令,它是一个流行的插件,可以搜索以“build:“开头的脚本,并执行所有这些脚本。实际上,我没有任何符合这种模式的脚本。但是,它也可以用来并行运行多个命令,这里使用了-p <command1> <command2>开关。因此,这里它执行2个脚本,即watch-css和start-js。(最后提到的脚本是监视文件更改的监视器,只有在被删除时才会完成。)
npm-run-all -p watch-css start-js
npm-run-all
-p <command1> <command2>
watch-css
start-js
*.scss
*.css
x0fgdtte3#
简洁地说-它运行这个
node node_modules/react-scripts/bin/react-scripts.js start
goqiplq24#
“start”是脚本的名称,在npm中,您可以运行如下脚本npm run scriptName,npm startis also a short fornpm run start至于“react-scripts”,这是一个专门与create-react-app相关的脚本
npm run scriptName
n53p2ov05#
**npm start是npm run start**的缩写形式
您可以在此处查看**Difference between npm start and npm run start**
React脚本启动
react-scripts是一组脚本,用于支持创建、开发和测试react应用程序。它由create-react-app使用。create-react-app是官方支持的创建单页React应用程序的方式。create react app使用webpack解析和捆绑应用程序。webpack解析应用程序并从webpack配置文件中指定的入口点创建依赖关系图。解析时,webpack使用babel将应用程序转换为JavaScript,Webpack使用生成的依赖图创建一个JavaScript文件,该文件由应用程序源代码和应用程序使用的模块组成,并通过script标签将该文件注入到public/index.html中。并在http://localhost:3000上启动开发服务器。在浏览器中导航到此URL将显示应用程序的实时交互式示例。保存到源代码的任何更改都将自动反映在正在运行的应用程序示例中。您可以在此处了解有关此主题的详细信息
public/index.html
http://localhost:3000
5条答案
按热度按时间eeq64g8w1#
创建React应用程序和React脚本
react-scripts
是create-react-app
starter pack中的一组脚本。create-react-app帮助您启动项目而无需配置,因此您不必自己设置项目。react-scripts start
设置开发环境并启动服务器,以及热模块重载。您可以阅读这里,看看它为您做了什么。使用create-react-app,您可以获得以下开箱即用的特性。
npm脚本
npm start
是npm run start
的快捷方式。npm run
用于运行您在package.json的scripts
对象中定义的脚本如果脚本对象中没有
start
键,它将默认为node server.js
有时候你想做的比react脚本提供给你的更多,在这种情况下你可以做
react-scripts eject
,这将把你的项目从“托管”状态转换成非托管状态,在这种状态下你可以完全控制依赖关系,构建脚本和其他配置。pzfprimi2#
正如Sagiv b.g.所指出的,
npm start
命令是npm run start
的快捷方式,我只是想添加一个现实生活中的示例来进一步澄清它。下面的设置来自于
create-react-app
github repo,package.json
定义了一系列定义实际流程的脚本。为了清楚起见,我添加了一个图。
蓝框是对脚本的引用,所有这些脚本都可以直接用
npm run <script-name>
命令执行。但是正如您所看到的,实际上只有两个实用的流程:npm run start
npm run build
灰色框是可以从命令行执行的命令。
因此,例如,如果您运行
npm start
(或npm run start
),实际上会转换为npm-run-all -p watch-css start-js
命令,该命令是从命令行执行的。在我的例子中,我有一个特殊的
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
文件。(当事情变得复杂时,你可能想做一个小图表)。x0fgdtte3#
简洁地说-它运行这个
goqiplq24#
“start”是脚本的名称,在npm中,您可以运行如下脚本
npm run scriptName
,npm start
is also a short fornpm run start
至于“react-scripts”,这是一个专门与create-react-app相关的脚本
n53p2ov05#
**
npm start
是npm run start
**的缩写形式您可以在此处查看**Difference between npm start and npm run start**
React脚本启动
react-scripts是一组脚本,用于支持创建、开发和测试react应用程序。它由create-react-app使用。
create-react-app是官方支持的创建单页React应用程序的方式。create react app使用webpack解析和捆绑应用程序。webpack解析应用程序并从webpack配置文件中指定的入口点创建依赖关系图。解析时,webpack使用babel将应用程序转换为JavaScript,Webpack使用生成的依赖图创建一个JavaScript文件,该文件由应用程序源代码和应用程序使用的模块组成,并通过script标签将该文件注入到
public/index.html
中。并在http://localhost:3000
上启动开发服务器。在浏览器中导航到此URL将显示应用程序的实时交互式示例。保存到源代码的任何更改都将自动反映在正在运行的应用程序示例中。您可以在此处了解有关此主题的详细信息