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

终于搞好了 这些东西真的繁琐 希望有更好的解决方案 特此记录一下 本文使用 env-cmd+dotenv-cli+react-app-rewired+customize-cra+progress-bar-webpack-plugin实现 不光打包时显示 运行时也会显示进度条 无痛点 全在如下代码片段 都有中文注释

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

yarn add env-cmd dotenv-cli react-app-rewired customize-cra progress-bar-webpack-plugin -D

在此我只使用env-cmd的指定js脚本功能 即在项目运行/打包前预先执行的js
有更好解决方案再回来更新
到最后发现已经不需要customize-cra也可以完成 但customize-cra包使用起来也比较方便 主要是网上文档多

实现步骤

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

// 根路径config-overrides.js
const path = require('path')
const {
    override
    , fixBabelImports
    , addWebpackAlias
    , addWebpackPlugin
} = require('customize-cra')

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
    })

// customize-cra中组件 在此函数中使用方可生效
module.exports = override(
    // 添加插件
    addWebpackPlugin(progressBarPlugin)
    , addWebpackAlias({
        '@': path.resolve(__dirname, 'src')
        // , 'components': path.resolve(__dirname, 'src/components')
    })
    // 配置按需加载 依赖babel-plugin-import库
    , fixBabelImports('import', {
        libraryname: 'antd',
        librarydirectory: 'es',
        style: true
    })
)

/**
 * 不使用customize-cra包 仅使用react-app-rewired包 覆写webpack配置
 * 虽然此处未对config进行操作但 此文件从上往下执行 此方法会把上方override配置全部冲掉
 * so 只能二者选一使用
 */
// module.exports = (config, env) => {
//     // console.log(env, 'env')
//     // console.log(config, 'config')
//     // 配置路径别名
//     config.resolve.alias = {
//         '@': path.resolve(__dirname, 'src')
//     }
//     // 添加插件
//     config.plugins.push(progressBarPlugin)
//
//     return config
// }

2. 配置预先执行脚本 配置env环境变量文件
   在目录创建version.js文件

// 写入当前时间至version文件 此文件会自动创建 react环境变量必须由REACT_APP_开头
require('fs').writeFile('version', 'REACT_APP_BUILD_TIME=' + date(), function(err) {
    if (err) {
        throw err
    }
})

function date() {
    const date = new Date
    const y = date.getFullYear()
    const M = (date.getMonth() + 1).toString().padStart(2, '0')
    const d = date.getDate().toString().padStart(2, '0')
    const H = date.getHours().toString().padStart(2, '0')
    const m = date.getMinutes().toString().padStart(2, '0')
    const s = date.getSeconds().toString().padStart(2, '0')
    return `${y}-${M}-${d} ${H}:${m}:${s}`
}

package.json

{
	"scripts": {
	    "start": "env-cmd -f version.js dotenv -e version -e .env.dev cross-env PORT=8888 react-app-rewired start",
	    "build:dev": "env-cmd -f version.js dotenv -e version -e .env.dev react-app-rewired build",
	    "build:prod": "env-cmd -f version.js dotenv -e version -e .env.prod react-app-rewired build",
	    "test": "react-app-rewired test",
	    "eject": "react-scripts eject"
  }
}

解释scripts中start命令 指定version.js为项目执行前脚本 指定version .env.dev为环境变量文件 指定端口号为8888
3. 使用
在执行yarn build或yarn start时会出现进度条
项目版本号使用

import React, { Component } from 'react'

export default class extends Component {
    render() {
        return (
            <p>{process.env.REACT_APP_BUILD_TIME}</p>
        )
    }
}