需求

• 前端打完包给测试，需要改动env中的配置 如：请求地址，logo，title；每次修改再去打包太麻烦，

思路

• 把env包提取到build打包后的文件中，方便每次修改

代码实现

#!/bin/bash
# 配置时间戳当做hash值，防止缓存
TIME=$(date "+%Y%m%d%H%M%S")   

# 新建globalConfig.js
touch  globalConfig.js   

 # 抓取.env.production 中的参数  
# 注意.env.production 格式应为：
# REACT_APP_API_TITLE=title  等号左右不要有空格

function copy_env_to_config_json() {
    array=($(cat .env.production))
    echo -e "window.__globalEnvData__={" > globalConfig.js
    for ((i=0;i<${#array[@]};i++)); do
        num=$(echo $((${#array[@]}-1)))
        name=$(echo ${array[$i]%=*})
        value=$(echo ${array[$i]#*=})
      if [[ ${name} && ${value}  ]];
        then
          if [[ "$i" == ${num} ]];
             then
                echo -e "\"${name}\":\"${value}\"" >> globalConfig.js
             else
                echo -e "\"${name}\":\"${value}\"," >> globalConfig.js
           fi
      fi
    done
    echo -e "}" >> globalConfig.js
}

copy_env_to_config_json
echo "1. 保存config配置文件"

grep "process.env" -rl ./src* | xargs sed -i "s/process.env/window.__globalEnvData__/g"
echo "2. 修改process.env 为window.__globalEnvData__"

npm run build
echo '3. 构建项目'

grep "window.__globalEnvData__" -rl ./src* | xargs sed -i "s/window.__globalEnvData__/process.env/g"
echo "3.1 还原源文件"

sed -i "s%</head>%<script src='/globalConfig/globalConfig${TIME}.js'></script></head>%g" ./build/index.html
echo "4. 设置index.html script引入"

mkdir ./build/globalConfig
mv ./globalConfig.js ./build/globalConfig/globalConfig${TIME}.js
echo '5. 移动配置文件到构建完的项目'

最后

• 打包完之后会有一个build/globalConfig/globalConfig${TIME}.js 文件，在这修改即可！

注意