需求
- 前端打完包给测试，需要改动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 文件，在这修改即可！
注意
