create-react-app(不执行jest) 添加打包进度条自动添加打包版本号

记录一下本文使用 react-app-rewired+env-cmd+progress-bar-webpack-plugin实现打包或运行时会显示进度条无痛点全在如下代码片段注释比较清晰

源码 https://github.com/tothis/react-record/tree/master/base

yarn add react-app-rewired env-cmd progress-bar-webpack-plugin -D

使用env-cmd的 js方式配置环境变量指定的js文件会在项目运行/打包前预先执行

实现步骤

使用react-app-rewired重写配置并添加progress-bar-webpack-plugin进度条插件

// 根路径config-overrides.js
const chalk = require('chalk')// progress 进度条插件, progressBarPlugin = require('progress-bar-webpack-plugin')({width: 60, format: `${chalk.green('build')} [ ${chalk.cyan(':bar')} ]`+ ` ${chalk.cyan(':msg')} ${chalk.red('(:percent)')}`, clear: true})
module.exports = (config, env) => {// 添加插件config.plugins.push(progressBarPlugin)return config
}

配置version.js

// 此处定义的环境变量会覆盖env文件定义的环境变量
module.exports = Promise.resolve({REACT_APP_VERSION: '1.0',REACT_APP_BUILD_TIME: new Date().getTime()
})

package.json

{"scripts": {"start": "env-cmd -f version.js react-app-rewired start","build": "env-cmd -f version.js react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"}
}

使用
在执行yarn build或yarn start时会出现进度条
项目版本号使用

import React, { Component } from 'react'export default class extends Component {render() {const a = 'font-weight:bold;color:#fff;background:#606060;padding:5px 0;border-radius:4px 0 0 4px;';const b = 'font-weight:bold;color:#fff;background:#ff8585;padding:5px 0;border-radius:0 4px 4px 0;';return (<p>{console.log(`%c build-time %c ${process.env.REACT_APP_BUILD_TIME} `, a, b)}</p>)}
}

create-react-app(不执行jest) 添加打包进度条自动添加打包版本号相关推荐

如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
Create React App 2.0 正式发布：Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
【笔记】Create React APP 文档略读
Getting Started --创建一个React App的多种方式 Quick Start 三条指令快速创建一个项目并运行 npx create-react-app my-app cd my-a ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...

create-react-app(不执行jest) 添加打包进度条自动添加打包版本号

create-react-app(不执行jest) 添加打包进度条自动添加打包版本号相关推荐

最新文章

热门文章

create-react-app(不执行jest) 添加打包进度条 自动添加打包版本号

create-react-app(不执行jest) 添加打包进度条 自动添加打包版本号相关推荐

最新文章

热门文章

create-react-app(不执行jest) 添加打包进度条自动添加打包版本号

create-react-app(不执行jest) 添加打包进度条自动添加打包版本号相关推荐