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