能否合并VSTS中Dev与Test环境的前端Webpack构建任务？

完全没必要维护两个几乎一模一样的构建任务——合并它们能大幅减少重复配置，降低后续维护的工作量（毕竟改一次总比改两次强对吧？）。下面是具体的实现思路和步骤：

核心思路：用构建变量替代硬编码的环境值 #

两个任务的差异只有第三步的npm build dev/npm build test，我们可以把环境参数抽成构建变量，让构建任务根据变量值动态执行对应的命令。

具体操作步骤 #

1. 创建构建变量
   在你的构建任务中，添加一个自定义变量（比如命名为TargetEnvironment），默认值可以设为dev，然后勾选「允许在队列时设置」。这样后续触发构建时可以随时切换环境值。

2. 修改npm build命令
   把原来固定的npm build dev或npm build test，替换成动态引用变量的命令：

   npm build $(TargetEnvironment)
   

   这样构建任务会根据TargetEnvironment的值自动执行对应的构建命令。

3. 区分不同环境的工件
   为了避免Dev和Test环境的构建工件混淆，在归档和发布工件时，也可以用变量来命名：

   • 归档步骤的目标路径可以设为dist-$(TargetEnvironment)
   • 发布工件时，工件名称也带上环境标识，比如drop-$(TargetEnvironment)
     这样你的发布流水线就能精准对应到各自环境的工件了。

4. 配置触发规则（可选）
   如果需要不同分支自动触发对应环境的构建，可以在「触发器」模块里设置分支过滤，结合变量来实现：

   • 比如监听dev分支时，自动把TargetEnvironment设为dev
   • 监听test分支时，自动把TargetEnvironment设为test
     具体可以通过构建任务的「变量组」或者触发器的「变量覆盖」来配置。

5. 关联发布流水线
   你的独立发布流水线可以分别关联对应环境的工件（比如Dev流水线关联drop-dev，Test流水线关联drop-test），或者也在发布流水线中使用变量，保持和构建任务的一致性。

额外好处 #

• 后续如果要修改构建步骤（比如调整npm install参数、更新归档规则），只需要改这一个构建任务，不用两个都改，减少出错概率
• 统一的配置更容易维护和排查问题

内容的提问来源于stack exchange，提问作者Lars