使用grunt“嵌入” JavaScript文件中的全局变量

Question

我的项目中有一个.js文件，其代码如下：

var API_ENDPOINT = 'http://example.com:8000';
var api = new RemoteApi(API_ENDPOINT);

API_ENDPOINT在开发/产品环境之间变化的地方

它不是js应用程序，主要是带有某些客户端功能的经典服务器端应用程序（Django）。

我开始使用Grunt来管理客户端依赖性，并认为，在Grunt配置中指定API_ENDPOINT并以某种方式将其“嵌入” .js文件是个好主意。

但是我找不到用Grunt处理文件的方法。

生成的.js文件将在浏览器中运行，因此我需要将API_ENDPOINT变量嵌入到API_ENDPOINT文件中，或创建一个单独的.js文件，例如

var API_ENDPOINT = '...';

我将在script.js之前包含

（此外，我想将此变量“嵌入”到我的Django的settings.py ）

Answer 1

对于客户端js，我会将所有配置提取到config.json文件中，并使用grunt-replace注入代码。

文件夹结构如下所示：

- Gruntfile
- config.json
- client/
  - src/
    - script.js
  - dist/      

config.json

{
  "API_ENDPOINT": "http://example.com:8000"
}

src / script.js

var API_ENDPOINT = '@@API_ENDPOINT'; // everything starting with @@ will be replaced by grunt-replace by default
var api = new RemoteApi(API_ENDPOINT);

Gruntfile

grunt.initConfig({
  replace: {
    dist: {
      options: {
        patterns: [{
         json: require('config.json')
        }]
      },
      files: [
        {expand: true, flatten: true, src: ['./client/src/*.js'], dest: './client/dist/'}
      ]
    }
  }
});

一些细节：

• 您的最终clientsidecode将驻留在client/dist
• 需要一个json文件将自动解析它
• 当然，您可以使用yaml / cson来做到这一点（请参阅grunt-replace部分 ）
• 不知道如何在python中解析json-config，但这并不难...