Azure Node.js Webapp使用config.js报module is not defined问题求助

所有报错本质是两个核心冲突：

1. 你的静态Web项目运行在浏览器环境，默认不存在Node.js专属的module.exports、process等全局变量，也没有内置AMD/ES Module的模块解析逻辑
2. SFMC的配置加载器默认期望直接读取可序列化的纯JSON格式配置对象，不支持函数、模块导出等格式，之前的写法错误点如下：
   • 第一种module.exports是Node.js CommonJS语法，浏览器端无module全局变量直接报错
   • 第二种AMD写法导出了函数，SFMC加载配置时会通过postMessage传递配置对象，函数无法被结构化克隆，触发序列化报错
   • 第三种AMD写法不符合SFMC内置的配置加载规则，无法识别配置内容
   • 第四种ES Module写法需要给script标签加type="module"属性，且SFMC加载器不支持ES Module格式的配置，所以提示export is not defined

因为你需要读取环境变量，纯静态前端无法直接读取服务端的环境变量，需要配合构建注入或者服务端动态注入实现，两种方案如下： #

方案1：轻量构建工具注入（推荐） #

用Vite/Parcel/Webpack等构建工具，在构建阶段把环境变量替换到配置文件中，输出符合SFMC要求的纯配置文件：

1. 项目根目录新建环境变量配置文件，以Vite为例，要求暴露给客户端的变量前缀为VITE_：

   # .env文件
   VITE_MY_VAR=你的环境变量值
   VITE_SOME_KEY=对应的key值
   

2. 编写config.js，不要加任何模块导出语法，直接写配置对象，用工具提供的变量占位符：

   {
     workflowApiVersion: 1.1,
     version: 1,
     someVar : import.meta.env.VITE_MY_VAR,
     somekey: import.meta.env.VITE_SOME_KEY
   }
   

   如果使用Webpack，把import.meta.env替换为process.env，配合DefinePlugin做变量替换即可。
3. 配置构建规则，确保构建后输出根目录的config.js为纯配置内容，不带任何模块运行时代码，Vite配置示例如下：

   // vite.config.js
   import { defineConfig } from 'vite'
   export default defineConfig({
     build: {
       rollupOptions: {
         input: {
           config: './config.js',
           main: './index.html'
         },
         output: {
           entryFileNames: '[name].js'
         }
       }
     }
   })
   

方案2：无需构建的服务端注入 #

如果不想引入构建工具，可以通过服务端动态注入变量实现：

1. 在index.html的head标签中加入meta标签占位：

   <meta name="myVar" content="REPLACE_ME">
   

2. 部署时用Nginx/Apache或者后端服务，把REPLACE_ME动态替换为实际的环境变量值
3. config.js直接读取meta标签的内容生成配置：

   {
     workflowApiVersion: 1.1,
     version: 1,
     someVar : document.head.querySelector('meta[name="myVar"]').content,
     somekey: '固定值'
   }
   

内容的提问来源于stack exchange，提问作者Sharath Jallu