Question

我有一个基于Visual Studio“ React”模板的相当简单的Web应用程序。当我运行MSBuild时，它将运行npm install，然后调用webpack创建一个Javascript捆绑包。当我在本地构建时，该应用程序运行良好。当我在DevOps管道中构建此页面时，主页是空白页面，控制台中出现脚本错误：

我怀疑该错误是否真的很重要，而且我什至不知道该从何开始跟踪该错误。但是，经过大量调查后，这是到目前为止我所知道的：

我在本地构建的源代码和DevOps在构建的源代码完全相同。
我已验证package.json和package-lock.json完全相同。
我已经在本地node_modules和DevOps上完成了 diff 。每个目录中的每个文件都完全相同。我正在npm install使用所有版本的完全相同的版本。
我的本地计算机和DevOps都在使用node 12.10.0
这不是Web服务器。如果我压缩本地生成的文件并将其上传到Web服务器，则可以正常工作。

这是我的package.json文件：

{
  "name": "LimeadeDocs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.4.1",
    "core-js": "^3.1.4",
    "js-yaml": "^3.13.1",
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.3",
    "react": "^16.9.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.9.0",
    "react-is": "^16.9.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "redoc": "2.0.0-rc.14",
    "rimraf": "^2.6.2",
    "styled-components": "^4.4.0",
    "swagger-diff": "^0.6.0"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

这是我的DevOps构建管道：

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  buildConfiguration: 'Debug'

steps:
- task: UseNode@1
  displayName: 'Install Node 12.10.0'
  inputs:
    version: '12.10.0'
- task: NuGetCommand@2
  displayName: 'Restore NuGet Packages'
  inputs:
    command: 'restore'
    restoreSolution: './LimeadeDocs.sln'
- task: MSBuild@1
  inputs:
    solution: './LimeadeDocs.sln'
    platform: 'Any CPU'
    configuration: '$(BuildConfiguration)'
    msbuildArguments: '/t:publish'
- task: PublishBuildArtifacts@1
  displayName: 'Publish Build Artifacts'
  inputs:
    PathtoPublish: '$(Build.SourcesDirectory)/LimeadeDocs/bin/$(BuildConfiguration)/netcoreapp2.1/publish/'
    ArtifactName: 'Website'
  condition: succeededOrFailed()

这是它正在构建的CSPROJ文件：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.App" />
    <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.1.2" PrivateAssets="All" />
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.1.1" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>

因此，总而言之，如果我从命令行运行msbuild .\LimeadeDocs.sln /t:publish，请压缩\bin\Debug\netcoreapp2.1\publish的内容并将其拖放到Web服务器上，它将起作用。但是，当我部署DevOps中内置的网站工件的内容时，会出现脚本错误。

我还在本地产生的bundle.js文件和一个DevOps产生的文件之间进行了比较。有大量的差异，所以我不确定是什么原因造成的。最初，似乎在本地安装的软件包版本与在DevOps上安装的软件包版本不同，但是我已经做了我能想到的一切，以表明并非如此。因此，采用所有这些软件包并构建一个巨大的bundle.js文件的捆绑机制，必须在DevOps上以与本地不同的方式运行。但是，它们都是相同的代码。我很想知道从这里去哪里。

Answer 1

因此，答案是从构建中删除package-lock.json文件，以便DevOps构建代理必须自行生成文件。不知道我的本地构建机器和DevOps代理之间存在什么样的环境差异，但是似乎这两个文件不兼容，因此无法检入Git。

希望这也会对将来遇到此问题的人有所帮助。

Web应用程序在本地运行良好，但在由DevOps构建时出现脚本错误

1 个答案: