angularjs – 使用Grunt预处理和替换环境变量

发布时间：2020-12-17 09:52:47 所属栏目：安全来源：网络整理

导读：我有一个使用grunt的角度应用程序设置,但我希望能够使用grunt作为预处理器来替换变量,我无法找到符合我需要的任何东西. 例如,如果我在配置文件中将主应用程序模块的名称更改为“someAppName”,我想在各种html和js文件中使用类似“ENV.APP_NAME”的内容,并将

我有一个使用grunt的角度应用程序设置,但我希望能够使用grunt作为预处理器来替换变量,我无法找到符合我需要的任何东西.

例如,如果我在配置文件中将主应用程序模块的名称更改为“someAppName”,我想在各种html和js文件中使用类似“ENV.APP_NAME”的内容,并将其替换为适当的值对于那种环境.

理想情况下,我希望在这些行的某处有一个配置文件,可以是.json文件,也可以使用module.exports来公开一个对象,它指定不同环境的值：

{
    APP_NAME:{
        dev: "someAppDev",prod: "someApp"
    },API_BASE:{
        dev: "localhost:8000/",prod: "https://www.some-site.com/api/"
    }
}

然后我可以创建一个grunt任务并将其传递给“dev”或“prod”以使其运行预处理器并用相应的值替换每个实例.我发现这个https://github.com/STAH/grunt-preprocessor但是这些例子令人困惑,我认为这不是我想要的.

有没有这样的东西允许你创建预处理的环境变量并从外部配置文件中读取它们,还是我被迫构建自己的grunt插件？有没有人用grunt取得类似的东西？

编辑：我已经开始为这个特定任务构建一个grunt插件,一旦完成并测试我将在npm上发布

使用 grunt-ng-constant.

Npm安装这个插件：

npm install grunt-ng-constant --save-dev

然后在grunt写入配置文件：

ngconstant: {
  // Options for all targets
  options: {
    space: '  ',wrap: '"use strict";nn {%= __ngModule %}',name: 'config',},// Environment targets
  development: {
    options: {
      dest: '<%= yeoman.app %>/scripts/config.js'
    },constants: {
      ENV: {
        myvar1: 'Hello from devel',myname: 'John Doe'
      }
    }
  },production: {
    options: {
      dest: '<%= yeoman.dist %>/scripts/config.js'
    },constants: {
      ENV: {
        myvar1: 'Hello',myname: 'John Doe'
      }
    }
  }
},

然后添加到grunt任务：

grunt.task.run([
    'clean:server','ngconstant:development','connect:livereload','watch'
  ]);

运行任务将生成带有gruntfile中定义的常量的config.js.
然后将config.js添加到index.html：

<script src="/scripts/config.js" />

将其注入您的应用：

var app = angular.module('myApp',[ 'config' ]);

并注入控制器：

.controller('MainCtrl',function ($scope,$http,ENV) {
      console.log(ENV.myvar1);
  });

您可以通过在gruntfile中设置和设置ng：production或ng：development来为生产设置不同的变量,为开发设置不同的变量.

有关详细信息,请参阅this article说明该过程.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!