"Embed" javascript 文件中使用 grunt 的全局变量

Question

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

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

其中 API_ENDPOINT 在 dev/prod 个环境中变化

它不是 js 应用程序，主要是带有一些客户端增强功能的经典服务器端应用程序 (Django)。

我开始使用 G运行t 来管理客户端依赖项，我想，在 G运行t 配置中指定 API_ENDPOINT 是个好主意 "embed" 将其放入 .js 文件中。

但我找不到用 G运行t 处理文件的方法。

生成的 .js 文件在浏览器环境中将是运行，所以我需要将我的 API_ENDPOINT 变量嵌入到 source.js 文件中或创建一个单独的 .js 文件，如 [=18] =]

var API_ENDPOINT = '...';

我将在 script.js

之前包含

（另外，我想 "embed" 这个变量到我的 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 section）
不知道如何解析 python 中的 json-config，但应该不会太难...

"Embed" javascript 文件中使用 grunt 的全局变量

"Embed" a global variable in javascript file using grunt

javascript

gruntjs