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

"Embed" a global variable in javascript file using grunt

本文关键字：全局变量 一个 嵌入 grunt javascript 文件 使用      更新时间：2023-09-26

我的项目中有一个.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变量嵌入在 source.js 文件中或创建一个单独的.js文件，例如

var API_ENDPOINT = '...';

我将在脚本之前包含.js

（另外，我想将这个变量"嵌入"到我的 django settings.py中）

对于客户端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);

咕噜咕噜的文件

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 配置，但这应该不难......
相关文章：