开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么"npm start“起作用而"react-scripts start”不起作用，这显然就是"npm start“所执行的？

"npm start"和"react-scripts start"是在使用React框架进行开发时常见的命令。

首先，"npm start"是一个npm（Node Package Manager）的命令，用于启动项目中的开发服务器。它的作用是执行项目中定义的"start"脚本命令，一般是用来启动开发服务器，实时监测文件变化并重新编译并刷新页面。

而"react-scripts start"是指使用create-react-app脚手架工具创建的React项目默认的启动命令。create-react-app是一个用于快速创建React项目的官方脚手架工具，它提供了一些默认配置和命令，以便开发者可以更快速地开始项目开发。"react-scripts start"命令会启动一个开发服务器，并在浏览器中打开项目的入口页面。

如果"npm start"能够正常起作用，而"react-scripts start"不能起作用，可能是由于以下几种原因：

react-scripts没有正确安装：在使用create-react-app创建项目后，需要确保已经正确安装了依赖包，可以通过运行"npm install"来安装项目所需的依赖。
react-scripts版本不兼容：可能是当前安装的react-scripts版本与项目所需的不兼容。可以尝试升级或降级react-scripts的版本，通过"npm install react-scripts@x.x.x"指定安装特定版本。
其他配置问题：可能是项目的配置文件出现了问题，导致"react-scripts start"无法正常执行。可以检查项目根目录下的配置文件（如package.json、.env等）是否正确配置，并尝试重新生成配置文件。

需要注意的是，对于React开发来说，"npm start"和"react-scripts start"的作用是相同的，它们都是用于启动开发服务器，以便开发者可以在开发过程中实时预览和调试页面。推荐使用"npm start"来启动项目，因为它是npm的标准命令，而"react-scripts start"是特定于create-react-app的命令，对于其他类型的项目可能不适用。

腾讯云提供了云计算相关的产品和服务，包括云服务器、云数据库、云存储等，可以根据项目的需求选择合适的产品进行部署和运维。具体推荐的腾讯云产品和产品介绍链接地址需要根据实际情况进行选择，可以参考腾讯云官方文档或咨询腾讯云的技术支持。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

写给前端同学的终端修炼手册

在Zsh shell语言中，默认提示符由一个箭头和当前目录的名称组成，如→ PersonWorkSpace。 ❝但是，为什么之前是波浪号，而不是父目录的名称？...如果 ctrl + c 因某种原因不起作用，ctrl + d 可能会起作用。最后，如果所有方法都失败了，你可以关闭当前的标签页/窗口。快捷键取决于操作系统和终端应用程序。...这些编辑器以难以退出而闻名；ctrl + c 在这里不会起作用！要在不保存的情况下退出，请按照以下步骤操作：按 Escape。按 :。这应该会在终端底部添加一个提示符。输入 q!...这是一个长时间运行的过程，因此 ctrl + L 快捷键不起作用。此时我们可以使用⌘ + k来执行清屏工作别名有时我们会反复输入相同的命令。...方法如下： npm install && npm run start && 操作符允许我们将多个命令链接在一起。第一个命令会执行 npm install。一旦完成，第二个命令会自动运行。

1281 0

react思维

即使现在，在HTML中直接使用onclick很不专业，原因如下：· •onclick添加的事件处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果；•给很多DOM元素添加onclick...拆解create- react-app 前端最喜欢的npm语句应该是npm start，看下官方脚手架的命令脚本： "scripts": { "start": "react-scripts...start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts...eject" }, react-scripts是官方脚手架提供的一个npm包，我们尝试用npm run eject（弹射）语句把它封装的工程配置不可逆地暴露出来。...）的思想，这也就是React为什么叫做React的原因。

1.3K2 0

React Error: Failed at the xxx@0.1.0 start script react-scripts start.

syscall spawn npm ERR! UpScore@0.6.0 start: `react-scripts start` npm ERR! spawn ENOENT npm ERR!...npm ERR! Failed at the UpScore@0.6.0 start script 'react-scripts start'. npm ERR!...react-scripts start npm ERR!...Solution 应该就是react-scripts没有安装成 global 的解决方式很简单: npm install -g npm@latest to update npm because it...参考文献 npm start error with create-react-app

9672 0

写给前端程序员的命令行入门

等一下，为什么之前是一个波浪字符，而不是父目录的名称？在MacOS和Linux上，波浪字符是用户home目录的缩写。在我的机器上，"~"相当于"/Users/joshu"。...如果ctrl + c在某些情况下不起作用，ctrl + d可能会起作用。最后，如果上面的方法都失败了，可以直接关闭当前的tab页或者窗口。该方式的快捷键取决于你使用的操作系统以及终端程序。...如果你查看项目的package.json ，你可能会看到这样的一部分配置： { "scripts": { "start": "react-scripts start", "build...它们可以通过运行npm run [name]来执行。...这些应用程序级的快捷键要好用得多。即使在shell繁忙的时候也可以使用它们。比如说，假设你正在运行一个开发服务器，这是一个长期运行的进程，所以ctrl + L的快捷键是不起作用的。

1.1K3 0

【React 实战教程】从0到1 构建 github star管理工具

前言在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。...而大体功能我们就模仿astralapp。...", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts...", - "start": "react-scripts start", - "build": "react-scripts build", + "start-js": "react-scripts...start", + "start": "npm-run-all -p watch-css start-js", + "build-js": "react-scripts build", +

1.3K2 0

大前端快闪：package.json文件知多少？

": "4.0.3", "web-vitals": "^1.1.2" }, "scripts": { "start": "react-scripts start", "build...如果为true，则不会发布到公开的npm生态系统。...", "react-scripts": "4.0.3", react版本：^17.0.2，意味着npm将安装与“17.x.x”匹配的最新版本。..."scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts...test", "eject": "react-scripts eject" } npm start将会执行 react-scripts start Browserlist: 这个属性用于在不同的前端工具之间共享目标浏览器和

6093 0

package.json文件知多少？

": "4.0.3", "web-vitals": "^1.1.2" }, "scripts": { "start": "react-scripts start", "build...如果为true，则不会发布到公开的npm生态系统。...", "react-scripts": "4.0.3", react版本：^17.0.2，意味着npm将安装与“17.x.x”匹配的最新版本。..."scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts...test", "eject": "react-scripts eject" } npm start将会执行 react-scripts start Browserlist: 这个属性用于在不同的前端工具之间共享目标浏览器和

5351 0

一天一夜，山月写完了这份高效组织 npm script 最佳实践

众所周知，一个 Javasript 项目的脚本类工具，可以使用 package.json 中的 scripts 字段来组织，简单来说，这就是 npm script。...约定速成的亲儿子脚本自然和其它第三方脚本不一样，如果需要执行它，直接使用 npm 前缀即可，如 npm start，那其它脚本呢？那就需要 npm run 前缀了。...使用 create-react-app 生成的项目，它的 npm script 中只有 npm start { "start": "react-scripts start", "build":...dev 与 start 的区别趋于明显，一个为生产环境，一个为开发环境 dev: 在开发环境启动项目，一般带有 watch 选项，监听文件变化而重启服务，此时会耗费大量的 CPU 性能，不宜放在生产环境...原因你懂的但即便是十分谨慎，也有可能遇到以下几个叫苦不迭、浪费了一下午时间的坑: 前端有可能在「本地环境启动时需要依赖前端构建时所产生的文件」，所以有时需要「先正常部署一遍，再试着按照本地环境启动 (

2K2 0

【React 实战教程】从0到1 构建 github star管理工具

前言在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。...而大体功能我们就模仿astralapp。...", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts...", - "start": "react-scripts start", - "build": "react-scripts build", + "start-js": "react-scripts...start", + "start": "npm-run-all -p watch-css start-js", + "build-js": "react-scripts build", +

1401 1

创建 React 应用的 7 种方式，你用过几种？

cd my-app npm start 还可以选择 typescript 模板 npx create-react-app my-app --template typescript 项目是零配置的，在..."scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts...start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start...运行 npm run start 启动脚本时， React 应用程序应该在端口 8080 上运行，此时我们可以在本地开发 react 应用了配置 proxy 代理开发时，需要请求接口，而接口往往是由后端同学完成的.../ 这 2 个网站可以快速你创建应用。

7K1 0

create react app 区分不同的环境

但是使用 Create React App 搭建的项目，npm run start 指向本地环境 development，npm run build 指向线上环境 production，那么还有其他两个环境应该怎么做呢...使用 REACT_APP_ENV 我们直接新开一个变量，但是不能随意开，比如 JIMMY_ENV 就不会被承认，而 REACT_APP_ENV 就会被承认接受，Ant Design Pro 的脚手架中就有这样的一个环境变量...小坑提示：REACT_APP_ENV=development react-scripts start 不可中间插入其他的脚本。.../config/default.js", } 在构建或者本地开发，需要前置命令配置，应该如下编写： "scripts": { "start": "npm run set-config &&.../config/default.js", } 而不是这样： "scripts": { "start": "REACT_APP_ENV=development && npm run set-config

8791 0

react Cannot find module node_modules_react-scriptsconfigwebpack.config.dev

原来运行得好好的react项目，突然运行不成功了，提示如下错误 $ npm start > react-app-rewired start internal/modules/cjs/loader.js...Exit status 1 npm ERR! npm ERR! Failed at the my_project@0.1.0 start script. npm ERR!...大致意思就是react-app-rewired这个插件升级导致了不会单独生成dev和prod配置文件了，所以导致文件找不到。...所以通过git版本回退找到了以前的代码的package.json中react_script的使用版本是2.0.3，所以将版本也固定在了2.0.3 删掉node_modules目录，重新执行npm install...npm start 启动项目，成功启动并打开浏览器tab页。

1K2 0

create-react-app入门教程

my-app cd my-app # 启动编译当前的React项目，并自动打开 http://localhost:3000/ npm start 以上命令执行完成后，则自动打开： http://localhost...CSS文件后缀直接改为 .scss 或者.sass,然后组件中导入的文件不再是 css文件而给我scss文件即可。...那么以下配置：配置HTTPS的环境变量为true然后再用npm start启动dev server就是HTTPS的了。...build/static/js/main.*", "start": "react-scripts start", "build": "react-scripts build",..."test": "react-scripts test", 那么就可以运行以下命令进行分析最终打包的情况了： npm run build npm run analyze 其他react的默认配置直接可以使用

2.4K2 1

给在本机运行的 React 程序配置 HTTPS

我们都知道，create-react-app 程序是用 npm run start（或简称为 npm start）运行的，在 package.json 文件的 scripts 部分中，有这样一行配置：..."start": "react-scripts start" 把它修改为： "start": "HTTPS=true react-scripts start" 把环境变量 HTTPS 的值设置为 true...❝注意：以下命令是在 macOS 上执行的，Linux 下可以用相同的方式操作。但是不保证在 Windows 下也能成功。...现在把 package.json 文件中的 start 脚本改为： "start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem...react-scripts start", 现在运行 npm run start 并访问 React 程序，应该能看到下面的警告消息： ?

2.8K2 0

05-React Antd UI库

AntDesign UI 库地址 https://ant.design/components 添加依赖 yarn add antd 我在使用的时候一致报错超时 npm install antd --...button ); } } export default App; 效果就是这样子喽...start" with "node scripts/start.js" Replacing "react-scripts build" with "node scripts/build.js"...配置Package.json /* package.json */ "scripts": { - "start": "react-scripts start", //去除 - "build...": "react-scripts build", //去除 - "test": "react-scripts test", //去除 + "start": "craco start",

9603 0

【react】开发一款城市选择组件

想到做这个，是因为无意中在github上看到了这一个仓库https://github.com/lunlunshiwo/ChooseCity，做的就是一个城市选择控件，是用vue写的，说的是阿里的一道题目...运行运行需知：首先去百度开放云平台申请自己的AK，申请方法见下面的定位 # dev npm install npm start # deploy npm run build npm install...，因此没有做成一个具体的组件(要组件化也就是把state换成props传值即可)，但是在整个页面中做了很小单元的拆分。..."start": "react-scripts start", - "build": "react-scripts build", + "start-js": "react-scripts...start", + "start": "npm-run-all -p watch-css start-js", + "build-js": "react-scripts build", +

3.9K3 0

在 React 代码中使用自动更新的 CRA 环境变量

而 version 的值，则希望能在每次运行发布时自动更新。...具体 package.json 定义如下： { "name": "yekai-net", "version": "1.1.2", "scripts": { "start": "react-scripts...start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject...": "react-scripts eject", "publish": "REACT_APP_VERSION=$(npm version patch) npm run build && rsync...所以后面的 npm run build 能将 React 代码中的 ${process.env.REACT_APP_VERSION} 变量，编译成具体的 version 值 1.1.3。

1.8K5 0

React目录结构详细解析

npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。...1.5 scripts字段 scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。...下面的设置指定了npm run start、npm run build、npm run test、npm run eject时，所要执行的命令 "scripts": { "start": "react-scripts...start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts...html结构的内容，就是jsx，jsx语法是react的主要语法。

2.2K4 0

跑 npm scripts，其实有更香的方式

我们也可以用 npx 来跑，比如 npx xx，它的作用就是执行 node_modules/.bin 下的本地命令，如果没有的话会从 npm 下载然后执行。...下的 start 模块：我们再去 start 下打个断点：代码执行到这里断住：这个 config 就是 webpack 的配置：再往下走，会发现启动了一个 server：我们在 server...catch 里直接忽略了：这些浏览器 hover 上去就可以看到：释放断点，你就会发现浏览器打开了：这样，我们不就梳理了一遍 react-scripts start 的流程么？...总结一下就是这样的：根据输入的 start 命令，执行 scripts/start 模块根据配置，创建 webpack 的 Compiler 对象创建 WebpackDevServer server...总结每个项目都有 npm scripts，大多数人只是用它们而不会调试它们，所以就算每天用也不知道这些工具的原理。

6611 0

React+Flask打造前后端分离项目开发环境

npm start。效果如下： ? 没多大问题的话，是时候打包写好的React App给后端服务了。...npm 允许我们在package.json文件里面，使用scripts字段自定义脚本命令。更舒服的是npm script提供了pre和post钩子。...编辑后的package.json文件的Script命令如下如下： "scripts": { "start": "react-scripts start", "prebuild": "rm -rf...\\static", "test": "react-scripts test", "eject": "react-scripts eject" }, 这时候，我们执行npm run build命令时...，会自动按照下面的顺序执行 rm -rf ..

6.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭