react-scripts将文件构建到`build`文件夹中，该文件夹与` `public` `不同

react-scripts是一个用于构建React应用程序的命令行工具。它提供了一组默认配置和脚本，用于处理开发、构建和部署React应用程序。

当我们使用react-scripts构建React应用程序时，它会将文件构建到build文件夹中。这个build文件夹与public文件夹是不同的。

public文件夹是用于存放静态资源的文件夹，其中的文件不会经过任何处理，会直接被复制到最终构建的目录中。这些静态资源可以是HTML文件、图片、字体文件等。在构建过程中，public文件夹中的文件会被原封不动地复制到build文件夹中，保持文件结构的一致性。

而build文件夹是构建过程中生成的目标输出文件夹，其中包含了经过编译、压缩和优化处理后的最终可部署的文件。这些文件通常是经过打包的JavaScript、CSS和其他资源文件。build文件夹中的文件是可以直接部署到服务器上的，用于在生产环境中运行React应用程序。

使用react-scripts构建React应用程序的优势是它提供了一套默认的配置和脚本，使得开发者可以快速搭建和构建React应用程序，无需手动配置复杂的构建流程。同时，react-scripts还提供了开发服务器、热模块替换和代码分割等功能，方便开发者进行开发和调试。

推荐的腾讯云相关产品是腾讯云云服务器（CVM），它是腾讯云提供的弹性计算服务，可以满足各种规模和需求的应用场景。腾讯云云服务器提供了丰富的配置选项和灵活的扩展能力，可以满足云计算领域的各种需求。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm

相关·内容

将文件夹中的文件信息统计写入到csv中

今天在整理一些资料，将图片的名字信息保存到表格中，由于数据有些多所以就写了一个小程序用来自动将相应的文件夹下的文件名字信息全部写入到csv文件中，一秒钟搞定文件信息的保存，省时省力！...下面是源代码，和大家一起共享探讨： import os import csv #要读取的文件的根目录 root_path=r'C:\Users\zjk\Desktop\XXX' # 获取当前目录下的所有目录信息并放到列表中...for dir in dirs: path_lists.append(os.path.join(root_path, dir)) return path_lists #将所有目录下的文件信息放到列表中...def get_Write_file_infos(path_lists): # 文件信息列表 file_infos_list=[] for path in path_lists..."]=filename1 #追加字典到列表中 file_infos_list.append(file_infos) return

9.2K2 0

Python识别文件名中的字段从而分类、归档栅格文件到不同文件夹

本文介绍基于Python语言，针对一个文件夹下的大量栅格遥感影像文件，基于其各自的文件名，分别创建指定名称的新文件夹，并将对应的栅格遥感影像文件复制到不同的新文件夹下的方法。 ...其中，如上图中紫色框所示，每一景遥感影像文件的文件名称中，都有一个表示其编号的字段；我们希望基于这一编号字段，将带有相同编号字段的栅格遥感影像文件，以及其对应的辅助信息文件，都复制到一个结果文件夹中；这个结果文件夹如下图所示...其中，结果文件夹内含有多个不同编号的子文件夹，这个编号就是上上图中，栅格遥感影像所带有的编号。...例如，我们希望将所有文件名称中带有15字段的栅格遥感影像文件及其辅助信息文件，都复制到结果文件夹中名称为15的子文件夹中，以此类推。知道了具体需求，我们即可开始代码的撰写。...首先，我们需要导入os、re与shutil等3个Python库，分别实现系统文件遍历、字符串匹配与遥感影像文件的复制。

1701 0

好消息：终于可以将Discord服务器组织到文件夹中

好消息：终于可以将Discord服务器组织到文件夹中　　我已经等了很久了。Discord今天宣布，您现在可以将服务器组织到文件夹中，最终为您提供一种对已加入的数十台服务器进行正确排序的方法。...以前，组织服务器的唯一方法是更改它们的显示顺序，如果您是十几个服务器中的一员，最终可能会变得很笨拙。 1.png 　　要创建一个文件夹，只需将要分组的服务器拖放在一起即可。...您可以对这些文件夹进行重命名或颜色编码，以便将与朋友共享的服务器放在一个文件夹中，并为您所订阅的流光播放另一个文件夹。此外，Discord允许您按文件夹消除通知，从而添加了一种更强大的管理通知方式。...以前，我不得不隐约地将相同类型的服务器分组到一个看上去似乎是无休止的长列的不同部分，并在我的脑海中画出它们之间的假想线。　　...您创建的文件夹将出现在台式机，移动设备和Web浏览器的各个平台上，因此使用起来非常方便。最新更新已经发布，因此您可以立即开始组织服务器。有需要云服务器优惠券需求，可以关注赵一八笔记。

2.4K1 0

修复 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝到输出文件夹

本文告诉大家如何修复 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝到输出文件夹的问题。...如果 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝到输出文件夹，那将会在调试的时候，由于找不到 PDB 符号文件而加载符号失败尽管这个坑从 2017 到现在，来来回回修了好多次...本文将告诉大家如何强行设置拷贝 PDB 符号文件方法是在自己的项目的 csproj 项目文件夹里面添加如下代码以上代码表示在 ResolveAssemblyReferences 的时候，执行 IncludeSymbolFromReferences 任务，这个任务里面，将会尝试去找所有的引用的 pdb 文件...，如果找到了，就放入到输出拷贝里面如此即可在构建时，将引用的 NuGet 包的 DLL 对应 PDB 文件拷贝到输出文件夹，而不需要关注具体的框架版本当然，在每个项目都拷贝以上的代码也不是好主意。

1.2K1 0

VBA汇总文件夹中的多文件的工作表中不同单元格区域到总表

VBA汇总文件夹中的多文件的工作表中不同单元格区域到总表【问题】我们发了这样一个表格到各单位收集资料，各单位填写完后上交上来有许多个文件，我们现在想汇总成一年一个表，怎么办？...那就加班，再加班【解决问题】我们的口号是VBA使工作效率提高，不加班 ====【代码】==== Sub 提取多文件一工作表中不同区域汇总() Dim fileToOpen, x, total_file_path...用Application.GetOpenFilename打开一个选择文件的对话框，可以多选，把选择的文件存入到fileToOpen的数据中 2.循环数组， 3.打开一个文件，并复制全部的区域，到指定的2016...-2018的表格中，下一次的复制，复制到最后的一行中的A列中， 4.因为在打开文件的过程中可能有些人在传输文件中，文件损坏了，所以加上On Error Resume Next，不报错继续运行。...，原因是：初值中是.Range("a5:t11")，想要组合进行的也是.Range("a5:t11")，所以程序是不可以的。

2.3K2 1

将公共文件夹下的数据，复制到自己的文件夹下，然后对数据进行入库与去重。防止将相同数据入库

目录 1 问题 2 实现 1 问题 A 用户将自己的数据文件,放到一个文件夹下,B 用户需要写一个代码，定时将公共文件夹下的数据，复制到自己的文件夹下，然后对数据进行入库与去重。...防止将相同数据入库 2 实现 @ApiOperation(value = "报告文件数据入库", httpMethod = "POST") @PostMapping("/insertFileInfo...") public Result insertFileInfo(String path) { ArrayList elelist = new ArrayList<...// 202309 String data = file.getParentFile().getName(); // 本地文件

1311 0

问与答93：如何将工作簿中引用的文件全部复制并汇总到指定文件夹中？

例如下图1所示，在工作簿的工作表Sheet1中有几个单元格分别引用了不同位置工作簿中的数据，我们要把引用的这几个工作簿复制到该工作簿所在的文件夹中。 ?...String Dim iPos2 As Integer Dim strPath As String Dim strFile As String '设置工作表且将该工作表中的公式单元格赋给变量...strPath = "" Else strPath = Mid(rng.Formula, 3, iPos1- 2) End If '确定文件名...strFile = Mid(rng.Formula, iPos1 +2, iPos2 - iPos1 - 2) End If '如果找到且不在当前工作簿文件夹...'则将文件复制到当前文件夹 If strPath "" AndstrFile "" And strPath ThisWorkbook.Path &"\

2.5K3 0

React 项目路径添加指定的访问前缀 - SPA

react 版本 ^18.2.0 我们将使用到其默认的命令行进行项目打包： "build": "react-scripts build" 但是，我们更改下，打包到自定义的文件夹，名为 jimmy：..."build": "react-scripts build && mv build jimmy" 这种打包的方法，能够方便笔者运行多个命令行输出不同的项目，而不是单一更改配置。...读者也可以尝试下更改其配置信息输出打包文件通过运行 npm run build 命令行，我们就会得到 jimmy 文件夹。嗯～有点超前，打包输出文件这步应该在部署项目之前打包！...{ "build": "PUBLIC_URL=/jimmy/ react-scripts build && mv build jimmy" } } 部署项目运行 npm...run build 打包后，我们会得到 jimmy 文件夹。

2.4K1 0

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

最后，是时候将这个应用程序部署到网络上，并分享你的创造。为了使事情变得简单，你只需运行npm run build，并添加一个命令将文件scp到你的服务器上。...这是你第一次运行npm run build，你发现运行该命令需要花费20秒。"这是我唯一一次部署"，你告诉自己，并忽略了构建所需的时间。你加载很炫酷的新网站，却发现上面有一个错别字。..."如果这是不同的颜色呢？" "我应该添加谷歌网站分析。" 各种各样的新想法涌入你的脑海。它们中的每一个都只需要更新一行代码。然而，要让这些代码被部署起来，却要花上20-30秒。...更新index.html Create React App创建了一个public文件夹，里面预置了几个文件。...包含在其中的index.html更像是一个模板，在运行react-scripts build时，会被处理并输出到build文件夹。在我们新的esbuild构建中，index.html不需要成为模板。

2.7K2 0

如何解决React官方脚手架不支持Less的问题

my-app： npx create-react-app my-app 通过cd my-app命令进入项目文件夹，执行yarn start命令启动程序，成功运行，则实验环境准备完毕。...因为脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，目的是让我们专注于src目录下的开发工作，不再操心环境配置。...大概意思是，执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录中。该操作是不可逆转的，执行完成后会删除这个命令，也就是说只能执行一次。...start" with "node scripts/start.js" Replacing "react-scripts build" with "node scripts/build.js"...} 然后在App.js文件中通过如下API导入上述的 less 文件： import '.

2K3 0

React目录结构详细解析

start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts...The config to share target browsers and Node.js versions between different front-end tools. 2、public文件夹...由1到4个整数构成。多个整数间用"."隔开 "manifest_version": 2, // manifest文件版本号。...src文件夹存放的是这个项目的核心内容，也就是我们的主要工作区域。.../App’;内容，就是为了将App.js的内容引入到index.js文件中。 3.2 App.js import React from 'react'; import logo from '.

2.2K4 0

初识package.json，两个重要字段不能忽略

我们可以在该字段中定义属于我们自己的指令，例如，我们要区分不同环境时，可以自定义如下指令启动项目也可以使用 npm start // 针对 dev 环境的启动指令 "start:dev": "react-scripts...需要注意的是，当我们使用 git 管理项目时，该文件夹必须被忽略掉，我们应该在 .gitignore 中添加如下的配置 // .gitignore /node_modules 我们不需要把该依赖包中的内容上传到...public 项目的入口文件。通常我们会将 index.html 存放在该目录中。构建工具会自动帮助我们补全一些逻辑，例如引入必要的 JavaScript 代码。... src 所有的 React 模块与组件代码都存放在该目录下。index.tsx 是所有 React 逻辑的入口文件。...index.tsx 在使用时，只需要引入该组件即可 import App from './App'; 这一章基础内容就介绍到这里，下一章我们将通过认识标签元素的本质来进一步学习。

7311 0

定制 create-react-app：如何制作自己的模版

TL;DR：有多种可用的工具能帮助开发者构建不同种类的网站和应用。...在 packages 目录内，有一个叫做 react-scripts 的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上，这就是我们能作出改进的地方，可以配置并增加新的脚本和模版。...改进配置 clone 目录后在代码编辑器中打开 react-scripts/scripts/init.js 文件。...react-scripts/template/public 目录中，打开 index.html 文件并将标签的内容改为 Unicode Labs。...发布 react-scripts 到 NPM 在发布到 npm 之前，我们需要将 react-scripts/package.json 文件中 name 属性的值改为 unicodelabs-react-scripts

1.4K1 0

使用 Electron 和 React 构建桌面应用

根据依赖关系将所有中间件打包成一个输出文件，这个输出文件中具有原来各个 JavaScript 中的所有功能，但是体积更小，而且依赖关系被严格限制并且无误这就是构建工具，你可以把他们认为是 JavaScript...前端路由往往与构建工具、前端界面框架相互配合，构建工具负责将所有文件打包，而前端界面框架往往自己带有自己的前端路由框架，最后打包出来的输出文件，一般只有一个 inedx.html、一个 bunble.js...注意是删除 public、src 文件夹下的所有文件，而不是删除这两个文件夹！...start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", + "start...，然后修改路由文件，在 Switch 中添加 path 与组件的对应关系即可。

3.8K2 0

在 React应用中实现Web推送通知

service-worker.js' ：'custom-sw.js'const swUrl =`$ {process.env.PUBLIC_URL} / $ {swFileName}`; 现在让我们创建的一个服务人员的公共文件夹...在这种情况下，Create React App会编译build文件夹中的文件，并在其中放置一个默认服务工作程序，其中包含对现代应用程序有用的东西。...首先，添加一个新的depenendecy： yarn add cra-append-sw 之后，我们需要在package.json中扩展build-script，在其中添加一个新命令，该命令在main进程之后执行...，这样整个行将如下所示： react-scripts build && cra-append-sw --skip-compile ..../public/custom-sw.js 结果，custom-sw.js的内容将附加在build / service-worker.js文件的末尾。最后，关于显示订阅请求的策略的一般建议。

3.2K3 0

快将你的 React 应用迁移到 Vite 吧，速度太快啦

该示例应用程序仅包含 2 个路由和 6 个组件。让我们用 Vite 看看同样的情况： Vite启动开发服务器只花了298ms，与CRA相比是非常快的。你可以看到这两种工具之间的巨大差异。...Vite 构建整个应用只用了 9.11 秒，与 CRA 相比似乎更好。因为它在使用 Vite 时减少了 40% 到 50% 的构建时间。...将 CRA 迁移到 Vite 从 package.json 中移除 react-scripts 依赖，并添加下述依赖项作为 devDependencies： "devDependencies": {...": "vite", "build": "vite build" }, 然后，在项目根目录创建 vite.config.js 文件。...将文件夹 public 中的 index.html 文件移动到根目录。

1.3K2 0

React.js基础知识总结一

（其中有一个就是：react-scripts命令） public 存放的是当前项目的HTML页面（单页面应用放一个index.html即可，多页面根据自己需求放置需要的页面）在REACT框架中，所有的逻辑都是在...JS的时候，会把导入的资源文件等插入到页面的结构中（绝对不能在JS管控的结构中通过相对目录....start”, “build”: “react-scripts build”, “test”: “react-scripts test --env=jsdom”, “eject”: “react-scripts...：项目需要部署到服务器上，我们先执行 yarn build，把项目整体编译打包（完成后会在项目中生成一个build文件夹，这个文件夹中包含了所有编译后的内容，我们把它上传到服务器即可）;而且在服务上进行部署的时候...才可以，否则报错：This git repository has untracked files or uncommitted changes… =>再去修改对应的配置项即可一但暴露后，项目目录中多了两个文件夹

1.9K3 0

Create React App 源码揭秘

创建scripts/build.js文件，主要负责两件事拷贝模板项目的public目录下的所有静态资源到build目录下配置为production环境，使用webpack(config).run()...: resolveApp('public') } npm run build后可查看build目录下会生成编译打包后的所有文件 react-scripts start 创建scripts/start.js.... // 使一些环境变量在index.html中可用。 // public URL在index中以%PUBLIC_URL%的形式存在。...先来了解下使用node_modules模式的机制将依赖包的版本区间解析为某个具体的版本号下载对应版本依赖的tar 报到本地离线镜像将依赖从离线镜像解压到本地缓存将依赖从缓存拷贝到当前目录的node_modules...public URL在index中以%PUBLIC_URL%的形式存在。

3.7K2 0

如何在Ubuntu上使用Webhooks和Slack部署React

] 这段简短的视频显示一段内容提交并推送到GitHub存储库，该存储库触发了Slack中的应用程序构建和通知。...这将运行项目的构建脚本，从而创建构建目录。该文件夹包括index.html文件，JavaScript文件和CSS文件等。...请注意，名称与hoop定义中的id属性匹配。...Placeholder for Slack notification 该脚本将转到该文件夹，从最新的master分支中提取代码，安装新的软件包，并构建应用程序的生产版本。请注意!!...，当此脚本执行时，构建目录将更新，Nginx将自动提供新文件。

8.7K2 0

基于qiankun微前端实战 + 部署笔记

新增3个.env文件，主要配置不同环境的对应的域名 .env/.env.development.local（此处暂未区分本地和测试的域名，所有环境变量值都保持一致 REACT_APP_SUB_REACT...start", - "build": "react-scripts build", + "build": "react-app-rewired build", -...3.github,jenkins持续集成 // 详细配置步骤略 // github webHooks设置 // jenkins构建部分执行shell BUILD_ID=dontKillMe cd /var..._react.xiaoqiang.tech.pem; #将domain name.pem替换成您证书的文件名。..._vue.xiaoqiang.tech.pem; #将domain name.pem替换成您证书的文件名。

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云