使用grunt在javascript文件中"嵌入"一个全局变量

Question

我的项目中有一个.js文件,代码如下:

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

其中API_ENDPOINT开发/ PROD环境之间的变化

它不是一个js应用程序,主要是一个经典的服务器端应用程序(Django),它有一些客户端的内容.

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

但是我找不到用Grunt破坏文件的方法.

生成的.js文件将在浏览器envorenment中运行,因此我需要API_ENDPOINT在source.js文件中嵌入我的变量或创建一个单独的.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/'}
      ]
    }
  }
});

一些细节:

• 您的最终客户端代码将驻留在 client/dist
• 需要json文件会自动解析它
• 当然你可以用yaml/cson做到这一点(参见grunt-replace部分)
• 不知道如何在python中解析json-config,但它不应该是困难的......