开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在npm start中呈现create-react-app应用程序，但在npm build中仅显示react-empty: 1

。

这个问题可能是由于构建过程中的某些配置或依赖项问题导致的。下面是一些可能的原因和解决方法：

确保你已经正确安装了create-react-app，并且项目文件夹中的依赖项已经正确安装。可以使用以下命令安装create-react-app：

npm install -g create-react-app

然后在项目文件夹中运行以下命令安装依赖项：

npm install

检查项目文件夹中的配置文件是否正确。特别是检查package.json文件中的scripts部分，确保"start"和"build"命令正确配置。示例配置如下：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

确保你的代码没有错误或缺少必要的文件。在运行npm build之前，可以尝试在npm start中检查应用程序是否正常工作。如果有任何错误或警告，请根据错误消息进行修复。
如果上述步骤都没有解决问题，可以尝试删除node_modules文件夹并重新安装依赖项。可以使用以下命令删除node_modules文件夹：

rm -rf node_modules

然后重新运行以下命令安装依赖项：

npm install

如果问题仍然存在，可能需要进一步检查构建过程中的其他配置或依赖项。可以查看create-react-app的官方文档或社区支持论坛，寻求更多帮助和解决方案。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：提供高性能、可扩展的 MySQL 数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于各种数据存储需求。详情请参考：https://cloud.tencent.com/product/cos
人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

相关搜索:在docker构建中，本地npm依赖项“不包含package.json文件”，但在npm start中运行良好。在VS代码中为NodeJS应用程序在调试配置中运行"npm start“在create-react-app中，开发构建'npm start‘会将输出输出到文件系统吗？Visual Studio中的构建后Vue应用程序给出了“命令npm run build exited with code 1”在react应用程序中运行npm start后，出现以下错误: internal/modules/cjs/loader.js:834 bid域名注册 cat域名注册 cc腾讯云视频 cdn加速价格 cdn加速违规

相关搜索:

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

有帮助

没帮助

相关·内容

如何用 esbuild 替换 Create React App 中的 Webpack

npx create-react-app my-app cd my-app npm start 在大约一分钟的依赖包安装和几秒钟的npm启动后，你就可以开始了。...最后，是时候将这个应用程序部署到网络上，并分享你的创造。为了使事情变得简单，你只需运行npm run build，并添加一个命令将文件scp到你的服务器上。...安装esbuild npm i -D esbuild 在package.json中更新构建脚本 // package.json "scripts": { "start": "react-scripts..."test": "react-scripts test", "eject": "react-scripts eject" }, 重新运行构建 npm run build 在默认的create-react-app...应用程序中，你应该会看到以下错误： esbuild-errors.png 启用JS文件的JSX语法前两个错误建议在构建命令中加入 --loader:.js=jsx。

2.7K2 0

vscode搭建react框架(vscode补全js方法)

点击 ( ctrl + `) 调出终端输入指令node -v，能显示版本号，说明 node 已经装好了输入指令npm -v，能显示版本号，说明 npm 可以使用了点击链接查看图文教程 https...：npm install -g create-react-app 这需要等待一段时间，这个过程在安装三个东西 react: react的顶级库 react-dom: react在web段的运行环境 react-scripts...: 包含运行和打包react应用程序的所有脚本及配置五、创建项目先创建一个放置项目的文件夹www 在终端中使用cd指令跳转到这个文件夹创建项目指令：create-react-app your-app...npm run build Bundles the app into static files for production....We suggest that you begin by typing: cd your-app npm start Happy hacking!

1.5K1 0

在create-react-app中使用sass

不管你是刚使用Reactjs或者是Reactjs的老司机，你们一定都听说过create-react-app这个脚手架，而从create-react-app的官方文档中，我们可以看到他们暂时还不支持直接导入...npm install node-sass 然后在自己项目的package.json中，将以下行添加到scripts中: "build-css": "node-sass-chokidar src/ -...watch-css将在src子目录中找到每个Sass文件，并在其旁边创建一个相应的CSS文件，在我们的例子中覆盖src/App.css。...$ npm install npm-run-all --save-dev # or $ yarn add npm-run-all --dev 最后，在不使用ejec命令的情况下，更改create-react-app...-p watch-css start-js", "build": "npm run build-css && node scripts/build.js", "test": "node

2.9K2 0

「React TS3 专题」从创建第一个 React TypeScript3 项目开始

一、使用 create-react-app 构建 1、全局安装 create-react-app 使用以下命令进行全局安装： npm install -g create-react-app 2、运行项目创建命令...5、运行项目如果你能按照上述顺序执行，输入以下命令，不出意外你就能成功运行我们的的项目了: npm start ?...11、创建启动和构建脚本 11.1 、启动应用程序 接下来我们使用npm命令启动我们的应用程序，一个用于开发模式，一个用于生产打包模式，你可以修改 package.json 中 scripts 属性对应的内容部分...11.3、在开发环境中预览接下来我们输入以下命令，在开发模式下进行预览： npm start 11.4、打开浏览器接下来我们在浏览器里进行访问，在浏览器输入 http://localhost:9000...; }; 11.6、保存 index.tsx 文件保存后，我们会看到浏览器会自动刷新显示我们更新的内容： ? ?

2.2K1 0

React 学习笔记之创建 React 项目

安装 React 的学习环境 // 安装创建 react 项目的工具 npm install -g create-react-app // 创建一个项目 ➜ Project create-react-app...Installing react, react-dom, and react-scripts... // 启动项目 cd jiajia-react npm start 目录结构介绍 node_modules...随后在代码中使用 ReactDOM.render 将 App 模块渲染到了界面上。这个 App 在 React 中称为组件(component)。...里面实现了 render 函数，该函数仅返回了一些 html 代码，用于界面上显示。...npm run build // 安装 pushstate-server 用于将已经编译好的项目部署 npm install -g pushstate-server // 将编译项目运行在本地查看效果

7271 0

react全家桶包括哪些_react 自定义组件

1.1 创建项目并启动全局安装第一步，全局安装：npm i -g create-react-app 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react...第三步，进入项目文件夹：cd hello-react 第四步，启动项目：npm start npx npx create-react-app react_app cd react_app npm...create-react-app 中使用 // 1....build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build...state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中 Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护单一的数据源可以让整个应用程序的

5.8K2 0

React 学习笔记之创建 React 项目

安装 React 的学习环境 // 安装创建 react 项目的工具 npm install -g create-react-app // 创建一个项目 ➜ Project create-react-app...Installing react, react-dom, and react-scripts... // 启动项目 cd jiajia-react npm start 目录结构介绍 node_modules...随后在代码中使用 ReactDOM.render 将 App 模块渲染到了界面上。这个 App 在 React 中称为组件(component)。...里面实现了 render 函数，该函数仅返回了一些 html 代码，用于界面上显示。...npm run build // 安装 pushstate-server 用于将已经编译好的项目部署 npm install -g pushstate-server // 将编译项目运行在本地查看效果

2453 0

React 面试必知必会 Day8

1. 你如何实现服务器端渲染或SSR？ React 已经具备了在 Nod e服务器上处理渲染的能力。有一个特殊版本的 DOM 渲染器，它与客户端的模式相同。...create-react-app CLI 工具允许你快速创建和运行React应用程序，无需配置步骤。让我们使用 CRA 创建 Todo 应用程序。...# 安装 $ npm install -g create-react-app # 创建新项目 $ create-react-app todo-app $ cd todo-app # 构建、测试、运行...$ npm run build $ npm run test $ npm start 它包括我们建立一个 React 应用程序所需要的一切。...渲染 props 和高阶组件都只渲染一个 children，但在大多数情况下，Hooks 是一种更简单的方式，通过减少树中的嵌套来达到这个目的。 9. 推荐用什么方式来命名组件？

2.4K4 0

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

，我们会发现webpack的配置文件找不到，我们需要运行以下命令将wepack配置显示出来 npm run eject 复制代码 scss 这个方法参照的是create-react-app中的说明adding-a-css-preprocessor-sass-less-etc...", "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", +...参考 create-react-app github open api接口文档 REACT TRAINING / REACT ROUTER 在create-react-app创建的应用中配置Sass 广而告之

1.3K2 0

大前端快闪二：react开发模式一键启动多个服务

最近全权负责了一个前后端分离的web项目，前端使用create-react-app[1], 后端使用golang做的api服务。...npx create-react-app my-app cd my-app npm start 歘歘歘，就搭建了一个react前端项目。...前端老鸟都知道npm start或yarn start以开发模式启动react App：在localhost:3000调试预览前端项目，编辑器的变更会实时体现在web页面。...前端老鸟也知道npm run build或yarn build是以生产为目标，将优化后的静态文件输出到build文件夹 (优化构建性能、压缩产出物、给文件名哈希)。...1. 安装concurrently插件 npm install concurrently -D 2 .

7343 0

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

# 1、安装脚手架 npm install -g create-react-app # 2、为Flask_React项目创建React App->frontend create-react-app frontend...npm start。效果如下： ? 没多大问题的话，是时候打包写好的React App给后端服务了。...Done 很舒服的是create-react-app封装好了 Babel 和 webpack，我们可以直接使用npm run build打包写好的App到frontend/build目录中。...npm 允许我们在package.json文件里面，使用scripts字段自定义脚本命令。更舒服的是npm script提供了pre和post钩子。...编辑后的package.json文件的Script命令如下如下： "scripts": { "start": "react-scripts start", "prebuild": "rm -rf

6.7K4 0

你的第一个React App (一 ) - 项目初始化

在这篇文章中，我将带您经历一个简单的开发过程，创建一个用于跟踪待办事项的应用程序。准备开发环境需要为React的开发做一些准备。在接下来的部分中，我将解释如何设置和准备创建您的第一个项目。...安装create- react-app (npm install --global create-react-app) 安装一个编辑器（Visual Studio Code，Sublime Text）总之选一个你熟悉的...$ npx create-react-app todos 一切正常的情况下，将会在目录下看到todos这个项目。进入到todos目录下，添加bootstrap css框架。...$ npm start 项目运行成功后，你将看到如下内容： Compiled successfully! You can now view todo in the browser....To create a production build, use npm run build. 此时，你通过浏览器访问http://localhost:3000/，即可看到React项目最初的样子。

8881 0

React 基础

通过引入文件的名字就可以看出来，前两个是有关于 React 的，里面的一个子串是 development ，也就是说是仅适合在开发阶段的，在我们的需要部署时，将其换成 react.production.min.js...说明：babel 虽然可以将 ES6 转码成 ES5，但是在浏览器中编译 JSX 的效率还是比较低的。...： create-react-app my-app cd my-app/ npm start 注意：如果上述不成功可以尝试下面的。...启动项目 npm start 正常的样子： $ npm start > my-demo@0.1.0 start F:\1A-Folder\loveQAQ\React\reacttest\my-demo...To create a production build, use npm run build.

4053 0

React官方脚手架create-react-app

create-react-app所创建的应用入口文件是src/index.js文件。...1、使用的原因以及特性：无需配置；集成了对 React, JSX, ES6 和 Flow 的支持；集成了开发服务器；配置好了浏览器热加载的功能；在 JavaScript 中可以直接 import...2、create-react-app 的安装命令行中使用 npm 执行安装命令 npm install -g create-react-app，注意需要添加 g 参数进行全局安装以及权限的问题。...安装后执行运行命令 npm start 即可在浏览器看到运行后的结果，并且已经实现了热加载的功能。...或 yarn test 可以执行测试动作，更多请参阅这里；编译项目执行 npm run build 或 yarn build；更多使用向导请插件这里。

8963 0

如何将Docker镜像从1.43G瘦身到22.4MB

步骤1：创建项目 1、借助脚手架通过命令行模式创建React项目 npx create-react-app docker-image-test 2、命令执行成功后将生成一个基础React应用程序架构...步骤2：构建第一个镜像 1、在项目的根目录中创建一个名为Dockerfile的文件，并粘贴以下代码： FROM node:12 WORKDIR /app COPY package.json ....步骤3：修改基础镜像 1、先前的配置中我们用node:12作为基础镜像。但是传统的Node镜像是基于Ubuntu的，对于我们简单的React应用程序来说这大可不必。...步骤4：多级构建 1、在之前的配置中，我们会将所有源代码也复制到工作目录中。 2、但这大可不必，因为从发布和运行来看我们只需要构建好的运行目录即可。.../build 4、在第一阶段，安装依赖项并构建我们的项目 5、在第二阶段，我们复制上一阶段构建产物目录，并使用它来运行应用程序。 6、这样我们在最终的镜像中就不会有不必要的依赖和代码。

3.8K3 0

带你了解一些package.json的骚操作

： "scripts": { start: 'node node_modules/.bin/my-app-cli' } 咦，怎么看起来和 vue create/create-react-app之类的命令不太像...中不配置 homepage 属性时，build 打包之后的文件资源应用路径默认是 /，如下图：一般来说，我们打包的静态资源会部署在 CDN 上，为了让我们的应用知道去哪里加载资源，则需要我们设置一个根路径...注意，当 create-react-app 的版本高于 2.0 版本的时候在 package.json 中只能配置 string 类型，这意味着如果要使用 package.json 来解决跨域问题，则只能代理一个服务器地址.../start.js", "build": "NODE_ENV=production node scripts/build.js", }, 项目启动起来后，在代码中我们可以通过 process.env.NODE_ENV...首先，需要在 package.json 中配置以下内容： "scripts": { "start": "NODE_ENV=development node scripts/start.js",

1.9K4 0

Docker镜像瘦身：从1.43G到22.4MB

但在使用 Docker 时，镜像大小至关重要。...步骤 1：创建项目 ①借助脚手架通过命令行模式创建 React 项目： npx create-react-app docker-image-test ②命令执行成功后将生成一个基础 React 应用程序架构...步骤 4：多级构建 ①在之前的配置中，我们会将所有源代码也复制到工作目录中。 ②但这大可不必，因为从发布和运行来看我们只需要构建好的运行目录即可。.../app RUN yarn build # STAGE 2 FROM node:12-alpine WORKDIR /app RUN npm install -g webserver.local...⑤在第二阶段，我们复制上一阶段构建产物目录，并使用它来运行应用程序。 ⑥这样我们在最终的镜像中就不会有不必要的依赖和代码。

1.5K2 0

Create React App 源码揭秘

由于npm限制，需要先在package.json中做如下设置 "publishConfig": { "access": "public" }, 然后前往各个子包先通过npm publish发布一次.../bin/react-scripts.js start", "build": "node ....'), appPublic: resolveApp('public') } npm run build后可查看build目录下会生成编译打包后的所有文件 react-scripts start 创建...// public URL在index中以%PUBLIC_URL%的形式存在。...public URL在index中以%PUBLIC_URL%的形式存在。

3.6K2 0

常用的package.json，还有这么多你不知道的骚技巧

版本： "engines": { "npm": ">= 6.9.0" }, 需要注意的是，engines属性仅起到一个说明的作用，当用户版本不符合指定值时也不影响依赖的安装。...： "scripts": { start: 'node node_modules/.bin/my-app-cli' } 咦，怎么看起来和 vue create/create-react-app之类的命令不太像...中不配置 homepage 属性时，build 打包之后的文件资源应用路径默认是 /，如下图： ?.../start.js", "build": "NODE_ENV=production node scripts/build.js", }, 项目启动起来后，在代码中我们可以通过 process.env.NODE_ENV...首先，需要在 package.json 中配置以下内容： "scripts": { "start": "NODE_ENV=development node scripts/start.js",

1.6K3 0

create-react-app入门教程

Quick Start（快速入门）全局安装首先确保你电脑上安装最新的 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app...npm test #or yarn test 构建生产版本 npm run build #or yarn build 解压默认的webpack配置到配置文件中 npm run eject 启用sass...潇洒 ); } } export default App; 在sass文件中引入其他sass文件引入src中的scss...=abcdef npm start 添加自定义环境变量文件.env 项目根目录下创建.env文件，文件内部添加 key=value的配置可以直接应用于项目的编译中。...build/static/js/main.*", "start": "react-scripts start", "build": "react-scripts build",

2.4K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭