Stripe集成报错：无法解析'child_process'，改Webpack后require未定义

你这是把Stripe的前端、后端SDK用混了，这才导致了一连串报错，我来帮你一步步理清楚：

前端应用集成Stripe的正确方式 #

你现在用的是Stripe的Node.js后端SDK（stripe包），这个包依赖Node.js的内置模块（比如child_process），但浏览器环境根本没有这些模块，所以Webpack打包时才会找不到child_process。

前端应该用Stripe专门为浏览器设计的库：@stripe/stripe-js，有两种集成方式：

• CDN快速引入：在HTML文件中添加这段脚本：

  <script src="https://js.stripe.com/v3/"></script>
  

  之后就能在JS代码里直接初始化：

  const stripe = Stripe('你的Stripe公钥');
  

• npm安装使用：先安装依赖：

  npm install @stripe/stripe-js
  

  再在组件/代码中导入并初始化：

  import { loadStripe } from '@stripe/stripe-js';
  
  // 建议异步加载
  const stripe = await loadStripe('你的Stripe公钥');
  

为什么改target: 'node'会出现require未定义？ #

把Webpack的target设为node，等于告诉Webpack要打包出适合Node.js环境运行的代码——比如会保留CommonJS的require语法，但浏览器环境不支持require，自然就会报错。哪怕加上externals: [nodeExternals()]，也只是让Webpack跳过Node模块的打包，本质还是在为Node环境打包，不适合浏览器。

如果是后端服务要用Stripe SDK #

要是你是在Node.js后端（比如Express服务）里用Stripe处理支付逻辑，那正确的Webpack配置应该是这样：

1. 先安装webpack-node-externals：

   npm install webpack-node-externals --save-dev
   

2. 修改Webpack配置：

   import nodeExternals from 'webpack-node-externals';
   
   export default {
     // 其他基础配置
     target: 'node', // 告知Webpack打包给Node环境使用
     externals: [nodeExternals()], // 排除Node内置模块和node_modules依赖，避免打包时找不到child_process
     // 其他配置
   };
   

   这样配置后，Webpack会跳过Node相关模块的打包，后端运行时直接从Node环境读取这些模块，就不会报错了。

总结一下：前端用@stripe/stripe-js，后端用stripe包+对应Webpack配置，分清楚使用场景就不会出问题啦！

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