JavaScript调用Mailchimp API时require语句无法生效是什么原因？

• @mailchimp/mailchimp_marketing 是专用于Node.js服务端的SDK，不支持在浏览器环境运行。该SDK依赖Node.js原生核心模块，打包到前端后会缺失运行依赖，同时浏览器默认不支持CommonJS的require语法，你未正确配置webpack打包也会直接触发require语法报错，进而导致页面异常重载。
• 你将Mailchimp API密钥直接写在前端代码中属于严重安全漏洞，所有访问页面的用户都可以提取到该密钥，任意操作你的Mailchimp账户资源。

仅本地测试SDK功能 #

不需要用到webpack，直接用Node.js运行你的代码即可：

1. 打开终端进入项目根目录
2. 执行命令 node app.js
3. 正常情况下终端会输出{ "health_status": "Everything's Chimpy!" }的返回结果

需要在前端页面使用Mailchimp相关能力 #

必须通过后端代理实现，禁止直接在前端引入SDK：

1. 本地搭建Node.js后端服务（如Express、Koa），在后端服务中集成@mailchimp/mailchimp_marketing SDK，编写专属接口供前端调用
2. 前端代码通过fetch/axios调用你自己实现的后端接口，不要在前端代码中存储任何API密钥
3. 补充webpack基础配置：在项目根目录新建webpack.config.js，内容如下：

const path = require('path');

module.exports = {
  entry: './你的前端代码入口文件路径.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development'
};

4. 在package.json的scripts字段中添加打包命令："build": "webpack"
5. 执行npm run build生成打包后的产物，在HTML文件中引入打包后的dist/bundle.js，不要直接引入未打包的源码文件

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