Node.js服务端将环境变量注入客户端JS文件的实现方法

嘿，我来帮你解决这个在Node.js服务器中给AngularJS文件注入环境变量的问题！针对你的Ubuntu 14.04 LTS + Node.js v8.11.1的场景，我整理了几个实用的实现方案，你可以根据项目情况选择：

方案1：使用模板引擎（比如EJS）动态渲染JS文件 #

这是比较灵活的动态注入方式，适合需要每次请求都确认环境变量的场景：

1. 首先安装EJS模板引擎：

   npm install ejs --save
   

2. 在你的Node.js服务器（以Express为例）中配置视图引擎，把目标JS文件当成模板处理：

   const express = require('express');
   const app = express();
   
   // 设置模板文件的目录（假设你的JS文件放在public/js下）
   app.set('views', './public/js');
   // 指定使用EJS作为模板引擎
   app.set('view engine', 'ejs');
   
   // 专门处理需要注入变量的JS文件请求
   app.get('/js/your-angular-script.js', (req, res) => {
       // 从服务器环境变量中取值，同时设置默认值避免变量不存在报错
       const targetEnvValue = process.env.YOUR_TARGET_VAR || 'default_value';
       // 渲染模板并把变量传递进去
       res.render('your-angular-script', { injectedEnvVar: targetEnvValue });
   });
   
   // 其他静态文件（HTML、无需注入的JS/CSS）正常托管
   app.use(express.static('public'));
   
   app.listen(3000, () => console.log('Server running on port 3000'));
   

3. 把你的目标JS文件重命名为your-angular-script.js.ejs，在需要注入变量的位置用EJS语法替换：

   // 在AngularJS代码中把注入的值定义为全局常量，方便整个应用调用
   angular.module('yourApp').constant('SERVER_ENV_VAR', '<%= injectedEnvVar %>');
   

当客户端请求这个JS文件时，服务器会先渲染模板，把环境变量值替换进去后再发送给浏览器。

方案2：手动读取文件并替换占位符 #

如果不想引入模板引擎，也可以手动读取文件内容并替换预留的占位符：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.get('/js/your-angular-script.js', (req, res) => {
    const jsFilePath = path.join(__dirname, 'public/js/your-angular-script.js');
    // 读取原始JS文件内容
    fs.readFile(jsFilePath, 'utf8', (err, content) => {
        if (err) {
            console.error(err);
            return res.status(500).send('Failed to load script');
        }
        // 替换文件中预留的占位符（比如用{{INJECTED_ENV}}作为标记）
        const envValue = process.env.YOUR_TARGET_VAR || 'default_value';
        const modifiedContent = content.replace(/{{INJECTED_ENV}}/g, envValue);
        // 设置正确的响应头，告诉浏览器这是JS文件
        res.setHeader('Content-Type', 'application/javascript');
        res.send(modifiedContent);
    });
});

// 托管其他静态资源
app.use(express.static('public'));
app.listen(3000);

对应的原始JS文件中预留占位符：

angular.module('yourApp').constant('SERVER_ENV_VAR', '{{INJECTED_ENV}}');

方案3：构建时注入（适合有固定构建流程的项目） #

如果你的项目有构建环节（比如用Gulp/Grunt），可以在构建阶段就把环境变量注入到JS文件中，之后服务器只需要托管静态文件即可：
以Gulp为例，先安装依赖：

npm install gulp gulp-replace --save-dev

然后编写Gulp任务：

const gulp = require('gulp');
const replace = require('gulp-replace');

gulp.task('inject-env-vars', () => {
    const envValue = process.env.YOUR_TARGET_VAR || 'default_value';
    return gulp.src('src/js/your-angular-script.js')
        .pipe(replace('{{INJECTED_ENV}}', envValue))
        .pipe(gulp.dest('public/js'));
});

运行gulp inject-env-vars完成构建后，服务器正常托管public目录即可。

额外注意点 #

• 确保服务器启动时环境变量已加载：可以在Ubuntu的/etc/environment中配置环境变量，或者启动服务器时直接指定：YOUR_TARGET_VAR=your_custom_value node app.js
• 对于AngularJS应用，把注入的值封装成constant或value是最佳实践，能让整个应用方便地引用。

内容的提问来源于stack exchange，提问作者Robert Oschler