如何处理反应配置。Azure DevOps管道中的js文件

Question

我正在使用Azure DevOps管道构建和部署React JS应用程序。它包含配置。js文件，其中包含一些需要针对不同环境修改的变量。任何人都可以帮我处理这个配置。部署到不同阶段时，js是否在发布管道中？

Answer 1

我把这个问题标为重复，因为我认为已经有了一个合适的答案。尽管如此，我仍然记得实现您所追求目标的其他两种方法：

您可以轻松地将变量存储在. env文件中，如这里所述。然后，您需要为每个环境给每个. env文件一个不同的名称。您最终可能会在存储库中拥有一个。env.developemt，一个。env.production，...等等。然后，您可以根据所需的环境使用以下YAML进行构建：

# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build:staging
  displayName: 'npm install and build'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'build'
    ArtifactName: 'drop'
    publishLocation: 'Container'

对于每个构建管道，然后使用调整后的YAML。在显示的YAML中，您可以添加自定义触发器和其他内容。当然，您需要将staging更改为要构建的环境名称。在这个具体的例子中，如果你有一个。环境。开发和a。环境。生产，您将得到两个YAML，一个是阶段被生产替换，另一个是阶段被开发替换。

您可以将变量存储在JSON文件中，然后使用JavaScript文件（之前存储了变量）从这些JSON文件中加载数据。以下是详细的操作方法：

1. 创建一个JSON文件，其中包含根据环境需要更改的所有变量，例如config。包含以下内容的json：

{
    "key1":"",
    "key2":"",
    "key3":""
}

{
    "key1":"",
    "key2":"foo",
    "key3":""
}

export const config = "./config.json";

我希望这有帮助。如果有什么不清楚的地方，请留下评论，我可以试着解释：）