解读

“Edge 端”在国内通常指边缘函数（Edge Function）或边缘节点（CDN 边缘），例如阿里云 EdgeRoutine、腾讯云 ESA、Vercel Edge、Netlify Edge 等。这些环境没有传统 Node 进程，代码在 V8 Isolate 里冷启动，因此不能把 process.env.NODE_ENV 直接打包进去。
面试官想知道：

1. 你是否意识到 “边缘环境 ≠ Node 环境”；
2. 能否用 Grunt 在构建阶段就把变量静态注入到产物里，而不是运行时再去读 process.env；
3. 是否熟悉 Grunt 插件生态，能给出可落地的工程化方案。

知识点

1. Grunt 构建生命周期：initConfig → registerTask → run；所有逻辑必须在本地构建机完成。
2. 边缘环境限制：
   • 无 process 对象；
   • 冷启动毫秒级，不允许同步读文件或访问环境变量；
   • 产物必须是单文件、无依赖、自包含。
3. 变量注入原理：在打包阶段把占位符替换成字面量，形成 const ENV = "production" 这样的死代码，边缘端直接执行。
4. Grunt 官方插件：grunt-contrib-replace、grunt-string-replace；
   社区方案：grunt-env-replace、grunt-webpack（配合 DefinePlugin）亦可。
5. 安全合规：国内上线需过代码审计，不能把真正的数据库密钥写死，需通过CI 密文变量 → 构建机内存 → 替换 → 产物的链路，确保不落盘、不回传。

答案

我采用“构建时静态替换”思路，分四步完成 Edge 端环境变量注入：

1. 在项目中声明占位符模板

   // src/edge/index.js
   export default {
     API_BASE: '{{__API_BASE__}}',
     SENTRY_DSN: '{{__SENTRY_DSN__}}'
   }
   

2. 安装并配置 grunt-string-replace

   // Gruntfile.js
   module.exports = function(grunt) {
     grunt.initConfig({
       'string-replace': {
         edge: {
           files: [{ expand:true, cwd:'src/edge', src:'**/*.js', dest:'dist/edge' }],
           options: {
             replacements: [{
               pattern: /\{\{__API_BASE__\}\}/g,
               replacement: () => process.env.EDGE_API_BASE || 'https://api.xxx.com'
             }, {
               pattern: /\{\{__SENTRY_DSN__\}\}/g,
               replacement: () => process.env.EDGE_SENTRY_DSN || ''
             }]
           }
         }
       }
     });
     grunt.loadNpmTasks('grunt-string-replace');
     grunt.registerTask('build:edge', ['string-replace:edge']);
   };
   

3. 在CI 流水线（GitHub Actions、阿里云 Flow、腾讯云 CODING）里注入密文变量

   - name: Build Edge Bundle
     env:
       EDGE_API_BASE: ${{ secrets.EDGE_API_BASE }}
       EDGE_SENTRY_DSN: ${{ secrets.EDGE_SENTRY_DSN }}
     run: npm run build:edge
   

4. 产物 dist/edge/index.js 被 CDN 边缘函数直接拉取，变量已变成字面量，无需再访问 process.env，满足冷启动要求。
   若需多环境，可再封装 grunt-env-replace，根据 process.env.CI_ENVIRONMENT_SLUG 读取 env/prod.js、env/stage.js，实现一份代码 + 多套配置。

拓展思考

1. Tree-Shaking 与死代码消除：边缘端对包体积极度敏感，注入后可用 grunt-terser 把 if (ENV === 'development') { ... } 整块删掉，进一步瘦身。
2. TypeScript 支持：若源码是 TS，可先用 grunt-ts 转译，再执行 string-replace，确保类型安全与变量注入顺序正确。
3. 灰度密钥轮换：国内大型项目需对接阿里云 KMS 或腾讯云 SSM，在 CI 阶段把密文拉下来后一次性替换，避免密钥长期暴露。
4. 边缘端调试：本地可用 grunt-contrib-connect 启动 HTTPS 静态服务，配合 ngrok 把本机映射到边缘域名，提前验证注入结果。
5. 未来迁移：如果团队后续切到 Vite/Rollup，可把同样思路写成 Rollup 插件，保持变量注入逻辑不变，降低迁移成本。