前言
不同的公司有不同的前端资源构建发布方式，这里主要介绍下网易内部NDP平台下基于Ant构建前端企业级项目的实践。
企业级的含义就是追求至高的可维护性和尽可能的降低个性化。如果你看过egg、umi、ssr、next等项目的话，应该知道对于多人团队来说，约定优于配置的重要性。
传统的Ant构建
传统的前端工程，NDP是基于Ant语法来构建的，Ant语法晦涩难懂，需要额外增加学习成本和心智负担。这里可以举个例子，先看看入口文件：
<project>
<!--property 相对与basedir，include、import相对于当前文件位置-->
<property environment="env" />
<property file="./deploy/ndp/frontend/build.properties"/>
<property name="nej-build.js" value="${basedir}/${nej}"/>
<property name="custom_path" value="${node-bin}"/>
<property environment="env"/>
<import file="./env-judge.xml"/>
<import file="./tasks.xml"/>
<target name="deploy">
<echo message="begin deploy......"/>
<exec executable="sh" failonerror="true">
<env key="PATH" value="${custom_path}:${env.PATH}"/>
<arg line="${basedir}/deploy/ndp/frontend/build.sh"/>
</exec>
<!--根据配置-->
<antcall target="npm_prune"/>
<antcall target="bower_cache_clean"/>
<parallel failonany="true">
<antcall target="clean"/>
</parallel>
<parallel failonany="true">
<antcall target="bower_install"/>
<antcall target="npm_install"/>
</parallel>
<parallel failonany="true">
<antcall target="sync_module"/>
<antcall target="build_style"/>
</parallel>
<!--只有条件的满足才执行-->
<antcall target="nej_build_test_wap"/>
<antcall target="nej_build_online_pre_wap"/>
<!--<antcall target="nej_upload_wap_cache"/>-->
<antcall target="cp"/>
<echo message="全部优化后总耗时为："/>
</target>
</project>
再看看具体的任务定义：
<project>
<!--clean-->
<target name="clean">
<echo message="begin clean..."/>
<echo message="begin delete lib "/>
<delete dir="${basedir}/lib"/>
<echo message="begin delete node_modules "/>
<!-- <delete dir="${basedir}/${web.dir}/node_modules"/> -->
<echo message="begin delete pub..."/>
<delete dir="${basedir}/pub"/>
<delete file="${basedir}/deploy/names.json"/>
<delete dir="${basedir}/${compress.dir}"/>
<echo message="begin clean html module-xx..."/>
<delete includeemptydirs="true">
<fileset dir="${basedir}/src/wap/html" >
<include name="module-*/**"/>
</fileset>
</delete>
<echo message="begin clean res/module-xx、component-xx、res-base..."/>
<delete includeemptydirs="true">
<fileset dir="${basedir}/res" >
<include name="module-*/**"/>
<include name="component-*/**"/>
<include name="res-base/**"/>
</fileset>
</delete>
</target>
<!--npm install-->
<target name="npm_install">
<echo message="begin npm_install..."/>
<exec dir="." executable="${npm}" failonerror="true">
<env key="PATH" value="${custom_path}:${env.PATH}"/>
<arg line="install"/>
</exec>
</target>
<!--build style-->
<target name="build_style">
<echo message="begin build_style..."/>
<exec dir="." executable="${npx}" failonerror="true">
<env key="PATH" value="${custom_path}:${env.PATH}"/>
<arg line="gulp scss -p wap"/>
</exec>
</target>
<!--bower cache clean if必须是${]才是判断true,false, 否则只要有设定值即可执行-->
<target name="bower_cache_clean" if="${is_bower_cache_clean}">
<echo message="begin bower_cache_clean ..."/>
<exec dir="." executable="${npx}" failonerror="true">
<arg line="bower cache clean" />
</exec>
</target>
<!--npm cache clean if必须是${]才是判断true,false, 否则只要有设定值即可执行-->
<target name="npm_prune" if="${is_npm_cache_clean}">
<echo message="begin npm_cache_clean ..."/>
<exec dir="." executable="${npm}" failonerror="true">
<arg line="cache clean --force" />
</exec>
</target>
<!--bower install-->
<target name="bower_install">
<echo message="begin bower_install ..."/>
<exec dir="." executable="${npx}" failonerror="true">
<arg line="bower install" />
</exec>
</target>
<!--sync module-->
<target name="sync_module_item">
<echo message="begin sync_module ..."/>
<copy todir="${basedir}/src/wap/html" overwrite="true" includeEmptyDirs="true">
<fileset dir="${basedir}/lib">
<include name="module-*/src/**" />
<include name="module-*/res/**" />
</fileset>
</copy>
</target>
<target name="sync_module">
<parallel failonany="true">
<antcall target="sync_module_item">
<param name="html.dir" value=""/>
</antcall>
</parallel>
</target>
<!-- wap -->
<target name="nej_build_wap">
<echo message="begin nej_build_wap ${build_type}..."/>
<parallel failonany="true">
<exec dir="." executable="${npx}" failonerror="true">
<arg line="nej build ${basedir}/deploy/release${build_type}.conf -l info"/>
</exec>
</parallel>
</target>
<target name="nej_build_test_wap" if="${is_test}">
<antcall target="nej_build_wap">
<param name="build_type" value="_dev"/>
</antcall>
</target>
<target name="nej_build_online_pre_wap" if="${is_online_pre}">
<antcall target="nej_build_wap">
<param name="build_type" value=""/>
</antcall>
</target>
<target name="nej_upload_wap_cache" if="${is_online_pre}">
<echo message="begin nej_upload_wap_cache ..."/>
<exec dir="." executable="${npx}" failonerror="true">
<env key="PATH" path="/home/appops/.ndp/base/jdk/jdk1.8.0_101/bin:${env.PATH}"/>
<arg line="nej cache ${basedir}/deploy/cache.json"/>
</exec>
</target>
<!--cp-->
<target name="cp">
<copy todir="${basedir}/${compress.dir}" overwrite="true">
<fileset dir="${basedir}">
<include name="pub/" />
<include name="res/" />
<include name="mail_template/" />
</fileset>
</copy>
<antcall target="cpsrc"></antcall>
</target>
<!-- copy src -->
<target name="cpsrc" if="${is_dev}">
<copy todir="${basedir}/${compress.dir}" overwrite="true">
<fileset dir="${basedir}">
<include name="src/" />
<include name="lib/" />
</fileset>
</copy>
</target>
</project>
你会发现，在你理解中的前端项目不是简单的npm run build就能解决的事情，为啥这里这么复杂呢？而且，随着项目越来越多，你需要给每个项目都配置一遍这种让人难以理解的Ant脚本。
所以这种模式的缺点有以下几个：
1、基于Ant语法，难以理解；
2、每个工程都需要侵入去写构建流程，千人千面不易于维护。
优化后的构建
为了优化上面说到的两个问题，从两个方向入手。第一个是统一构建，不再分布式管理，通过约定来约束每个工程的构建流程；第二个是用shell取代Ant语法，通过shell来完成构建的全部过程。
统一构建
由于NDP还是基于Ant语法的，所以我们保证入口一致，从远端去调用构建脚本的方式，来完成统一构建。
每个工程都在NDP中提供一个统一的入口文件即可，其通过curl从远端拉取构建的shell脚本来完成构建。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE project [<!ENTITY buildfile SYSTEM "file:./build-user.xml">]>
<project basedir="." default="deploy_proxy" name="study">
<property name="custom_path" value="/home/appops/.nvm/versions/node/v10.7.0/bin"/>
<property name="tag" value="browser"/>
<property environment="env"/>
<target name="getShell">
<exec executable="curl">
<arg value="--header" />
<arg value="PRIVATE-TOKEN: YOURTOKEN"/>
<arg value="https://g.hz.netease.com/api/v4/projects/YOUR_PROJECT_ID/repository/files/deploy.sh/raw?ref=master" />
<arg value="-o" />
<arg value="deploy-ndp.sh" />
</exec>
</target>
<target name="deploy" depends="getShell">
<exec executable="bash" failonerror="true">
<env key="PATH" value="${custom_path}:${env.PATH}"/>
<arg line="./deploy-ndp.sh"/>
<arg value="${tag}"/>
</exec>
<echo message="全部优化后总耗时为："/>
</target>
<target name="deploy_proxy">
<antcall target="deploy" />
</target>
</project>
shell构建
完整的构建脚本如下：
1、通过文件夹的命名来区分环境是测试还是预发、线上；
2、通过npm ci来完成三方库的安装，保证稳定性和速度；
3、通过环境变量来执行构建npm run build:test还是npm run build:prod，通过这样来约束每个工程只能提供对应的script命令。
4、通过外部标识来区分是浏览器端项目还是node服务项目，如果是浏览器端项目则只上传dist，如果是服务端项目则全部需要（node_modules）
5、利用set -e和return 1配合，构建失败则抛出错误中断流程，确保原子性。
#!/bin/bash
set -e
tag=$1
echo "current environment is :${tag}"
build_tag="prod"
echo "current path: $PWD"
re="/home/appops/ndp/source/.*?(_|-)test"
if [[ $PWD =~ $re ]]; then build_tag="test"; fi
re="/home/appops/ndp/source/.*?(_|-)pre"
if [[ $PWD =~ $re ]]; then build_tag="pre"; fi
echo "shell param build_tag is : ${build_tag}"
echo "current node version:"
node -v
echo "current npm version:"
npm -v
echo "current git version:"
git --version
#clean
rm -rf compressed
rm -rf node_modules
mkdir compressed
echo "clean done"
ls -la
#npm install
(
if npm ci; then
echo "node_module ci done"
else
echo "Error: npm ci error, please check it"
return 1;
fi
)
#npm build
(
echo "build:${build_tag} start"
if npm run build:${build_tag}; then
echo "build:${build_tag} end"
else
echo "Error: npm run build error, please check it"
return 1;
fi
)
#copy
(
echo "copy start in ${tag}"
if [ $tag = "browser" ]
then
if cp package.json compressed/ && cp -R dist compressed/;
then
echo "cp success in browser"
else
echo "Error: copy in browser fail"
return 1
fi
elif [ $tag = 'node' ]
then
if rsync -avr --exclude='compressed' --exclude=".git" . compressed;
then
echo "cp success in node"
else
echo "Error: copy in node fail"
return 1;
fi
else
echo "Error: tag is necessary and must be one of browser and node"
return 1;
fi
)
echo "build.sh done"
set +e
总结
在完成了上面的统一化配置后，每个工程在创建NDP实例时，只需要通过实例名称就可以定义环境，通过<property name="tag" value="browser"/>指定是node还是broswer。然后提供build:test，build:prod命令即可完成前端构建。
扫一扫
3627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
