在 VSTS 中使用 powershell 运行 webpack答案

【问题标题】：Running webpack with powershell in VSTS在 VSTS 中使用 powershell 运行 webpack
【发布时间】：2018-06-29 21:50:13
【问题描述】：

以this 帖子为起点，我按照那里列出的基本步骤进行操作。

在代理上安装 webpack
获取 webpack 的安装路径
从确切的安装路径运行 webpack

我已在本地对此进行了测试，脚本运行良好。一旦我把它作为构建的一部分放在 VSTS 上（只是代理上的一个 powershell 任务），它就会一直工作，直到我执行 webpack 命令它什么都不返回。没有任何输出。

Write-Host `nInstalling webpack and webpack-command
npm install --no-save --no-package-lock -g webpack webpack-command

Write-Host `nGetting the environment variables for webpack
(Get-Item -Path ".\" -Verbose).FullName
$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
$webpackOptions = Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition

Write-Host `nThe options:
$webpackOptions | Write-Host

Write-Host `nSelected:
$webpack = $webpackOptions -Match 'cmd' | Select-Object -First 1
Write-Host $webpack

# On the build agent it is at this point that I get blank results
# On my local machine I get the paths such as:
#    C:\Users\Admin\AppData\Roaming\npm\webpack.cmd --config webpack.css.config.js
# The results of webpack running
Write-Host `nPacking webpack.config.cs
Write-Host $webpack --config webpack.config.js
& $webpack --config webpack.config.js

# Same as above
Write-Host `nPacking webpack.css.config.cs
Write-Host $webpack --config webpack.css.config.js
& $webpack --config webpack.css.config.js

有人有什么想法吗？这对我来说特别奇怪，因为当我为 webpack 打印 selected 路径时，它似乎找到了我期望的值，即它打印了 C:\npm\prefix\webpack.cmd

【问题讨论】：

所以，仅供查看此内容的任何人将来参考。我实际上通过简单地使用 npm 运行 webpack 来解决这个问题。我 npm installed --dev webpack webpack-command 并且作为 package.json 中的脚本，我调用了两个配置 "build-prod": "webpack -p --config 1 && "webpack -p --config 2""。在构建服务器上，我运行了一个npm install 步骤和一个自定义步骤run build-prod。虽然我不得不稍微解决它，但它比 powershell 脚本要好得多，所以我想我应该从一开始就这样做。（上面的代码块是伪代码）
您可以将解决方案写成答案并接受它。它可以帮助其他成员更清楚地获得解决方案:)
@MarinaLiuMSFT 我不确定我是否想把它作为答案，因为我并没有真正回答我的问题，我只是提供一个解决方法（尽管我正在非常迂腐地画出这种区别）。我至少会添加答案，因为格式会更清晰，你是对的。

标签： powershell webpack azure-devops azure-pipelines

【解决方案1】：

我有一个解决方法，我使用 npm 和 package.json 运行脚本并安装依赖项。

npm install webpack webpack-cli --save-dev - 这些是您运行 webpack 所需的依赖项，您可以将 webpack-cli 与 webpack-command 交换，如果您愿意，这显然更轻
- 这是在本地完成的，而不是作为构建步骤。更新 package.json 时签入。
在package.json 中创建构建步骤。我创建了两个：build 和 build-prod
在您的 vsts 构建中创建两个 npm 步骤。
- 第一个只是一个 npm install 来安装你所有的包
- 第二个是运行 package.json 脚本的自定义步骤。在我的情况下，文本是run build-prod

就是这样！

package.json 带有我必须调用 webpack 的两个脚本：

{
  ...
  "scripts": {
    "build": "webpack --config webpack.config.js && webpack --config webpack.2.config.js",
    "build-prod": "webpack -p --config webpack.config.js && webpack -p --config webpack.2.config.js"
  }
  ...
}

最后是任务的图片。

【讨论】：