其中之一就是 Create React App(CRA)，该 CLI 工具帮助 JavaScript 开发者不用配置就能创建 React 应用。...可即便是应用了 CRA 这么棒的工具，开发者仍需要稍作调整，增加 CRA 中不含的特别的脚本和模块等。今天，我将教你如何为自己的团队创建自定义的 create-react-app 脚本。...有很多包括 JavaScript 新人在内的开发者，一天天的简直是胡乱地创建 React 应用，所以 Facebook 的 CRA 团队才构建了 create-react-app 工具以使创建此类应用的过程更快更安全...作为一个需要支持以上我高亮过的功能的开发者，一个办法就是运行 npm run eject。这条命令拷贝所有配置文件和依赖到你的项目中，然后你可以通过所有这些工具手动配置你的应用以达到满意。...在 packages 目录内，有一个叫做 react-scripts 的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上，这就是我们能作出改进的地方，可以配置并增加新的脚本和模版。
架构 packages/create-react-app 准备工作 创建package.json 安装依赖项 拷贝模板 查看效果 packages/cra-template packages/cra-template...Create React App是一个官方支持的创建React单页应用程序的脚手架。它提供了一个零配置的现代化配置设置。 平时工作中一部分项目使用的React，使用之余也需要了解其脚手架实现原理。...在当前工作环境创建myProject目录，然后创建package.json文件写入部分配置 const fse = require('fs-extra') const init = async ()...对React原理感兴趣的可前往由浅入深React的Fiber架构查看。 packages/cra-tempalte--typescript 同上，不是本文讨论重点。...创建scripts/build.js文件，主要负责两件事 拷贝模板项目的public目录下的所有静态资源到build目录下 配置为production环境，使用webpack(config).run()
可参考文档创建AccessKey2 长按识别二维码查看原文 标题：创建AccessKey 2.2. Bucket Bucket 是 OSS 中的存储空间。...「对于生产环境，可对每一个项目创建单独的 Bucket」，而在测试环境，多个项目可共用 Bucket。 在创建 Bucket 时，需要注意以下事项。...PS: 上传 OSS 的配置文件位于 scripts/uploadOSS.js8 中，可通过它使用脚本控制静态资源上传。...，是为了安装依赖可最大限度利用缓存 ADD package.json yarn.lock /code/ RUN yarn ADD ....可以，实际上 OSS/COS (对象存储服务) 也可以如此配置，但是较为繁琐，如 Rewrite、Redirect 规则等配置。
何为脚手架 脚手架一词最早来源于建筑工程领域。...Vue 是 是 Vue官方维护 「CRA」: Facebook 官方提供的 React 开发工具集, 包含两个基础包 自定义配置能力 react-app-rewired:利用config-overrides.js...文件来对 webpack 配置进行扩展 customize-cra:利用react-app-rewired的配置文件config-overrides.js对webpack配置进行修改 create-react-app...为 CRA 创建自定义模板 作为一个最简化的 CRA 模板，模板中包含如下必要文件 README.md：用于在 npm 仓库中显示的「模板说明」 package.json：用于描述模板本身的「元信息」，...例如名称、运行脚本、依赖包名和版本等 template.json：用于描述基于模板创建的项目中的 package.json 信息 template 目录：用于「复制」到创建后的项目中，gitignore
可参考文档创建 AccessKey Bucket Bucket 是 OSS 中的存储空间。对于生产环境，可对每一个项目创建单独的 Bucket，而在测试环境，多个项目可共用 Bucket。...PS: 上传 OSS 的配置文件位于 scripts/uploadOSS.js 中，可通过它使用脚本控制静态资源上传。...，是为了安装依赖可最大限度利用缓存 ADD package.json yarn.lock /code/ RUN yarn ADD ....该 compose 配置位于 cra-deploy/docker-compose.yaml 在 docker-compose 配置文件中，通过 build.args 可对 Dockerfile 进行传参...可以，实际上 OSS/COS (对象存储服务) 也可以如此配置，但是较为繁琐，如 Rewrite、Redirect 规则等配置。
PS: 本项目以 cra-deploy3 仓库作为实践，配置文件位于 simple.Dockerfile4 长按识别二维码查看原文 标题：cra-deploy 长按识别二维码查看原文 标题：simple.Dockerfile...# 创建一个 cra 应用 $ npx create-react-app cra-deploy # 进入 cra 目录 $ cd cra-deploy # 进行依赖安装 $ yarn # 对资源进行构建...而对于前端项目而言，如果 package.json/yarn.lock 文件内容没有变更，则无需再次 npm i。...FROM node:14-alpine as builder WORKDIR /code # 单独分离 package.json，是为了安装依赖可最大限度利用缓存 ADD package.json...WORKDIR /code # 单独分离 package.json，是为了安装依赖可最大限度利用缓存 ADD package.json yarn.lock /code/ RUN yarn ADD
定制CRA配置 react-app-rewired 可以在不 ‘eject’ 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有...在根目录中创建一个 config-overrides.js 文件 const { override, addWebpackPlugin, } = require('customize-cra'...Typescript 配置 3.2.1. tsconfig.json create-react-app 脚手架默认生成的文件 tscofnig.json 新增下述配置。...构建scratch工程 虽然通过npm包形式安装和使用scratch相关工程，但仍需配置webpack进行构建scratch。 3.3.1....原因分析 比如 scratch-vm 包中，当在浏览器的工程中引用时，默认引入文件路径为源码：./src/index.js 3.3.2.
也可以在 package.json 中修改 babel、jest、eslint 等相关配置。...，那么 package.json 中的代码，会变得非常冗长，单 jest 配置代码就超过 1 屏。...因此社区中提供了一些可配置的 cra 方案，craco、react-app-rewired craco 可配置的 cra 这里以 craco 为例，首先需要安装 @craco/craco yarn add...，还提供了 plugin 模式，若你想覆盖 cra 的配置，可以先在 plugins 里面找找，比如上面提到的，让项目支持 less，就可以直接使用 craco-less 这个插件。...创建一个名为 src 的文件夹，所有源代码都放在该目录下，在src目录下，创建index.js文件，该文件也就是 webpack 构建的入口文件 import React from 'react' import
修改 CRA 项目的配置使用 create-react-app 创建的项目默认是无法修改其内部的 webpack 配置的，不像 vue-cli 那样可以通过一个配置文件修改。...虽然有一个 eject 命令可以是将配置完全暴露出来，但这是一个不可逆的操作，同时也会失去 CRA 带来的便利和后续升级。...如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式 通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包使用...可以看到这里项目的包体积高达 24M,有非常多的重复文件被打包。 代码拆分，减少重复打包由于使用了懒加载，每个页面都对应一个独立的 chunk 文件。...在 craco 中可以通过 configure 属性拿到 webpack 的配置对象，对其进行修改来配置，将重复的包拆分出去。
我们直接将从 Landing 上下载的 Home 文件夹直接拷贝到 src 文件包里; ├── README.md ├── ... ├── public │ ├── ... │── src +...less less-loader 配置加载less 安装完 less 加载 后， 我们还需要修改 package.json 里的启动配置。...config-overrides.js 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。...javascriptEnabled 和 antd 的主题配置。...更改的 src 里的 index.js 页面，打开 index.js，引入 Home 文件包并渲染。
重新部署，路由出现问题 根据上篇文章的 docker-compose 配置文件重新部署页面。...: no-cache，「避免浏览器默认为强缓存」 nginx.conf 文件需要维护在项目当中，经过路由问题的解决与缓存配置外，最终配置如下: 该 nginx 配置位于 cra-deploy/nginx.conf3...修改 router.Dockerfile 配置文件如下: PS: 该 Dockerfile 配置位于 cra-deploy/router.Dockerfile4 长按识别二维码查看原文 标题：cra-deploy.../router.Dockerfile FROM node:14-alpine as builder WORKDIR /code # 单独分离 package.json，是为了 yarn 可最大限度利用缓存...如 gzip/brotli 压缩的开启、Cache-Control 等响应头的控制、不同路由的缓存策略，均需告知运维完成，且「很难有版本管理」。
，同时scripts目录下会有新的命令文件更新，package.json文件中scripts命令同步更新。...、customize-cra@^1.0.0 配置package.json的命令 "scripts": { - "start": "react-scripts start", + "start":...css预处理器 - less 为啥在这里只强调了less呢，因为create-react-app中内置了sass/scss的预处理器，只需要使用时安装相关的依赖就可以了（运行时，根据提示缺失的包进行安装即可...@7.3.0，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题，所以使用了低版本的。...配置 // package.json文件 "scripts": { "build:analyzer": "cross-env ANALYZER=true react-app-rewired build
是 Vue官方维护 「CRA」: Facebook 官方提供的 React 开发工具集, 包含两个基础包 create-react-app 用于选择脚手架「创建项目」 react-scripts...则作为所创建项目中的「运行时依赖包」,提供了封装后的项目「启动、编译、测试」等基础工具 自定义配置能力 react-app-rewired:利用config-overrides.js 文件来对 webpack...配置进行扩展 customize-cra:利用react-app-rewired的配置文件config-overrides.js对webpack配置进行修改 「Vue CLI」: Vue CLI 由...为 CRA 创建自定义模板 作为一个最简化的 CRA 模板，模板中包含如下必要文件 README.md：用于在 npm 仓库中显示的「模板说明」 package.json：用于描述模板本身的「元信息」，...例如名称、运行脚本、依赖包名和版本等 template.json：用于描述基于模板创建的项目中的 package.json 信息 template 目录：用于「复制」到创建后的项目中，gitignore
create-react-app是一个react的cli脚手架+构建器，我们可以基于CRA零配置直接上手开发一个react的SPA应用。...，探查CRA实现的原理。...CRA做到了可以0配置，就能进行react项目的开发，调试，打包。...其实是因为CRA把复杂的webpack config配置封装起来了，把babel plugins预设好了，把开发时会常用到的一个环境检查，polyfill兼容都给开发者做了，所以使用起来会比我们直接使用...webpack，自己进行重复的配置信息设置要来的简单很多。
在此之前，我需要做两件事 cra.shanyue.tech 域名属于我个人。域名可自行在域名提供商进行购买。...cra.shanyue.tech 域名通过 A 记录指向搭建好 traefik 网关的服务器的 IP 地址。此处需要通过域名提供商的控制台进行配置。...labels: - "traefik.http.routers.cra.rule=Host(`cra.shanyue.tech`)" 编辑 domain.docker-compose.yaml，配置文件如下...PS: 该配置文件位于 cra-deploy/domain.docker-compose.yaml1 长按识别二维码查看原文 标题：cra-deploy/domain.docker-compose.yaml.../json | jq '.[] | .Labels' 小结 目前为止，终于将一个前端应用使用域名进行部署。
默认情况下，Create-react-app CRA的工作方式是在开发人员模式下不存在ServiceWorker，并且任何以前安装的sw都将被虚拟人替换。...service-worker.js' ：'custom-sw.js'const swUrl =`$ {process.env.PUBLIC_URL} / $ {swFileName}`; 现在让我们创建的一个服务人员的公共文件夹...额外的步骤：等等，生产模式如何？ 在这种情况下，Create React App会编译build文件夹中的文件，并在其中放置一个默认服务工作程序，其中包含对现代应用程序有用的东西。...如果您还没有准备好主动地投入到CRA上下文中的Workbox配置研究中，我认为此软件包是最方便的方法。...首先，添加一个新的depenendecy： yarn add cra-append-sw 之后，我们需要在package.json中扩展build-script，在其中添加一个新命令，该命令在main进程之后执行
Laravel, 甚至很多模仿 Rails 命名的，如 Sails、Grails....这种强约定也是有好处的，比如不需要管理配置; 而且 CRA 团队谨慎可靠地维护着 CRA，这使得开发者可以一般无痛地升级 CRA....文件 (可选) ├── index.js # service 插件 └── package.json 安装阶段: prompts: 收集用户意见和配置 gernerator: 在安装阶段生成模板文件...: 验证 npm 包名称，比如创建的项目名是否合法 dotenv & dotenv-expand: 从.env 文件中加载配置，环境变量 网络相关 portfinder: 获取可用的端口 address...: webpack 包分析器 扩展(一些相关的技术栈) http-server 快速伺服静态文件 plop 模板生成器 yeoman 项目脚手架工具 Please enable JavaScript
创建 launch.json 我们需要为这个小项目创建一个 launch.json。...代码中已经包含了这个配置文件。尽管非常简单，但还是逐行介绍一下，确保你能够了解它都做了些什么事。打开 .vscode/launch.json： ?...准备的插件 每个调试器 type 都有其特定的配置，所以请试着用 VS Code 随附的便捷自动完成功能。...name：你喜欢的任何名称，它将显示在调试工具栏中： ? name url：浏览器将要加载的URL——必须与运行 CRA 开发服务器的 URL 相匹配！ webRoot：项目源文件的路径。...在这种情况下，要做的设置大致如下： 启动开发服务器 通过配置你的 launch.json 在调试浏览器中打开应用 在源代码中设置断点 当你需要反复检查同一属性时，可以设置监视表达式 用 step 命令检查代码流
背景 使用 CRA 脚手架创建的项目，如果想要修改编译配置，通常可能会选择 npm run eject 弹出配置后魔改。...如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式 通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包 使用... 打包时是否生成 sourceMap BUILD_ANALYZER 文件方式输出编译分析基础的配置到此完成了，接下来是处理各种配置的覆盖，完整的 craco.config.js 配置文件结构，可以在 craco...总结 确实能够在不 eject 弹出配置的情况下，能够自定义所有的 cra 构建配置，之前进行了详细的说明，有这方面的需求可以去看看(传送门)。...中可以解构出你想要的参数比如mode、devtool、entry等等，更多信息请查看webpackConfig.json文件 /** * 修改 output
在 React 脚手架（如 create-react-app）生成的项目中，Webpack 的配置是默认隐藏的，因为它使用了一个名为 react-scripts 的包来处理所有的构建和启动任务。...注意：这个操作是不可逆的，一旦执行了 eject，你就不能再回到隐藏配置的状态了。 执行后，你会在项目的根目录下看到一个名为 config 的新文件夹，其中包含 Webpack 的配置文件。...安装 react-app-rewired 和任何你想要使用的自定义配置插件（如 customize-cra）。...修改 package.json 中的脚本命令，使用 react-app-rewired 替换 react-scripts。...在项目根目录下创建一个 config-overrides.js 文件，用于定义你的自定义配置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
