前端项目构建的同时还能做什么？

旺仔的M82A1
93 阅读1分钟

写在前面的话

在前端项目构建的时候，我们的核心要的就是那个js，又或者分宝后的那些js产物。但是有没有想过，我们如果有一些额外的大的静态文件，这些文件也打包进js文件显然是不合理的。

beforePackage

我们可以写一个小的打包脚本，我们可以在这个脚本中执行我们的build命令。然后对于那些额外的静态文件，我们可以直接使用mv命令来挪动到指定的目录下。

执行时机

这个脚本谁执行？项目打包平台。
这个脚本什么时候执行？项目构建时。

该如何写呢?

#!/bin/bash
# 进到我们的打包机中的前端项目代码
BasePath=$(cd `dirname $0`; pwd)
DistPath=$BasePath/dist
TempPath=$BasePath/output
PublicPath=$BasePath/public

# 1. 获取当前分支名称
Branch=`git name-rev --name-only HEAD`
[$Branch == 'master'] || Branch=`echo $Branch | awk -F'/' '{print $2}'`
# 2. 获取当前commit id
CommitId=$(git log -n 1 | grep commit | head -n 1 |awk '{print $2}')

rm -rf $DistPath
mkdir -p $DistPath
cd $DistPath

# 3. 如果有，则判断当前分支是否与构建产物分支一致，如果一致，则直接使用构建产物，否则重新打包
wget bulabulabula。。。。
# 4. 如果没有，则重新打包
if ['$?' == "0"]; then
    echo "拉取构建产物成功"
else
    echo "拉取构建产物失败，重新打包"
    # 重新打包
    cd $BasePath
    # 安装依赖
    npm install
    # 打包
    npm run build
    # 后面可能每个项目的结构不一样的，大家可能构建出来的产物也会挪到不同的地方，这里需要大家根据实际情况修改
    # 例如一些打包后的index.js具体存放的目录。一些静态文件具体存放的目录，这个都跟打包工具，例如webpack的配置有关。
    mv XXXXXXXXX
    rm -rf XXXXXXXXXX
    # 最后打包成tar.gz
    tar czf output.tar.gz ./output
fi

# 这里只是拿添加字体文件为例
echo "添加字体文件"
cp -r $BasePath/fonts.tar.gz $DistPath/fonts.tar.gz

# 生成 “安装脚本”,具体静态文件放到哪里，根据实际情况修改
InstallScript=$DistPath/install.sh
echo "#!/bin/bash" > $InstallScript
cat >> $InstallScript << EOF
StaticPath=\XXXXX
rm -rf \$StaticPath 2>dev>null
tar xzf output.tar.gz

mkdir -p /usr/share/fonts
mv fonts /usr/share/fonts
EOF

chmod 755 $InstallScript
echo "打包完成"

这只是一个demo

这只是一个demo，具体的血肉要参考自己实际的项目，这个世界上没有复制过来就可以用的代码，但是所有的原理和思想都是相通的。

avatar
文章
阅读
粉丝