Javascript 基于ENV通过Grunt动态设置脚本标记

在我的Grunt构建过程中，我想在

index.html

中设置脚本标记，它基于

process.env.NODE\u env

动态引用Google Maps API。 比如：

let googleMapsUrl;

if (process.env.NODE_ENV === 'development') {
  googleMapsUrl = '//maps.googleaps.com/maps/api/js?v=3.exp&libraries=visualization';
} else {
  googleMapsUrl = `//maps.googleaps.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}v=3.exp&libraries=visualization`;
}

---

我的问题是如何在

index.html

中的脚本标记中插入

googleMapsUrl

，就像这样：

您可以使用许多选项。从简单的

grunt-replace

到更高级的

grunt-processhtml

。我将描述第一个，因为它对于简单任务来说是一个很好的选择，并且只需要一个简单的配置

使用grunt替换

grunt replace

将在源文件中搜索简单的变量定义，如

@@foo

，并用提供的值或回调返回的值替换这些变量

首先使用

npm install grunt replace--save dev安装插件

然后按如下方式配置任务：

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: 'gmaps',
          replacement: function() {
            var googleMapsUrl;
            if(process.env.NODE_ENV === 'development') {
              googleMapsUrl = '//maps.googleaps.com/maps/api/js?v=3.exp&libraries=visualization';
            } else {
              googleMapsUrl = '//maps.googleaps.com/maps/api/js?key=' + process.env.GOOGLE_MAPS_API_KEY + 'v=3.exp&libraries=visualization';
            }
            return googleMapsUrl;
          }
        }
      ]
    },
    files: [
      {
        expand: true,
        flatten: true,
        src: ['path/to/your/source/file.html'], dest: 'destination/folder/'
      }
    ]
  }
}

使用
grunt.loadNpmTasks（'grunt-replace'）
加载插件，然后将其添加到构建过程中

在源文件上，只需添加定义的变量作为脚本源：

<script src="@@gmaps"></script>



该任务将用定义的回调返回值替换
@@gmaps

希望能有帮助

更多关于插件的信息可以找到