2

我有一个 webapp (emberjs)，我需要根据 grunt 任务设置环境变量。所以当我运行grunt server它时，它会选择development，并且 url 将设置为localhost:5000. 但是当我这样做时grunt build，它会选择production并将 url 设置为production.com.

对我来说主要问题是，如何从 ember 中读取这些变量。或者如何让 grunt 查找变量并根据任务进行更改

有可能做这样的事情吗？

4

2 回答 2

2

是的，这是可能的。grunt-env用于指定您的环境以及将您的环境变量暴露给您的应用程序代码之类的东西grunt-usemin。

根据这个 SO 线程，您需要确保在 Ember.js 之前加载您的环境变量。

于 2013-08-20T19:01:40.587 回答
1

经过大量的谷歌搜索并且没有很好的例子，这就是我所做的。

假设您使用 yeoman 通过yo ember生成器搭建脚手架并grunt build用于构建 dist。

哟 ember-generator v0.8 使用 grunt-replace。升级到那个版本。简而言之，我使用 grunt-replace 将全局变量添加到 index.html。就是这样。

在 combine-scripts.js 块之前将此脚本标记添加到 app/index.html：

#app/index.html
<script>
  /*
    simplify grunt-replace strategy by placing env vars here.
  */
  window.MYCOMPANYCOM_ENV = {
    env: '@@env',
    apiHost: '@@apiHost'
  };
</script>

/* ADD THE ABOVE BEFORE THIS SECTION */
<!-- build:js(.tmp) scripts/main.js -->
<script src="scripts/combined-scripts.js"></script>
<!-- endbuild -->

并将 Gruntfile.js 中的替换配置更改为：

module.exports = function (grunt) {
  var appConfig = grunt.file.readJSON('app_config.json');

replace: {
  app: {
    options: {
      patterns: [
        {
          json: appConfig['app']
        }
      ]
    },
    files: [
      {src: '<%= yeoman.app %>/index.html', dest: '.tmp/index.html'}
    ]
  },
  dist: {
    options: {
      patterns: [
        {
          json: appConfig['dist']
        }
      ]
    },
    files: [
      {src: '<%= yeoman.dist %>/index.html', dest: '<%= yeoman.dist %>/index.html'}
    ]
  }
}

在 ./app_config.json 创建一个新文件

{
  "app": {
    "env": "development",
    "apiHost": "http://localhost:8080"
    },
  "dist": {
    "env": "dist",
    "apiHost": "/"
    }
}

现在您的应用脚本可以访问 app_config.json 中定义的全局变量。

我不会详细介绍，但这在开发中效果很好。对于grunt build，我将该replace:dist步骤移至构建步骤的末尾，并将 index.html 中的 @@ember 变量替换为 bower 组件的路径。

于 2014-01-18T16:45:17.333 回答