Webpack DefinePlugin是否重写node_modules库代码？环境变量注入异常咨询

一、DefinePlugin 默认会重写 node_modules 里的代码吗？ #

简单说：默认不会。

通常我们配置 Webpack 的 loader 规则时，都会加上 exclude: /node_modules/——毕竟大多数 npm 包发布时已经是编译好的成品，没必要再重复处理。而 DefinePlugin 的变量替换逻辑是和 loader 处理流程绑定的：只有被 loader 解析的文件，才会触发它的字符串替换操作。

那什么时候会被重写？如果你在配置里特意取消了对某个包的排除，或者用 include 指定要处理 node_modules 里的特定库，那 DefinePlugin 就会对这些文件生效。

二、如何让自有 npm 模块在被引用时注入环境变量？ #

这确实是个常见的痛点，我整理了几个靠谱的方案：

方案1：让模块暴露初始化方法（最稳妥） #

在你的模块里不要直接依赖环境变量，而是提供一个初始化函数，让引用方主动传入需要的变量：

// 你的 npm 模块代码
let APP_ENV = null;

export function initEnv(env) {
  APP_ENV = env;
}

export function getCurrentEnv() {
  if (!APP_ENV) {
    throw new Error('请先调用 initEnv 初始化环境变量');
  }
  return APP_ENV;
}

然后引用方在应用启动时调用：

// 引用方的代码
import { initEnv } from 'your-package-name';

initEnv(process.env.YOUR_CUSTOM_ENV);

这种方式完全不依赖构建工具，兼容性最强，也不会有配置冲突的问题。

方案2：让引用方的 Webpack 配置针对你的包开启处理 #

如果你的模块代码里直接写了 process.env.MY_VAR，可以让引用方修改他们的 Webpack 配置，确保你的包不会被排除在 loader 处理之外：

// 引用方的 webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.MY_VAR': JSON.stringify(process.env.MY_VAR)
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除 node_modules，但你的包例外
        exclude: /node_modules(?!\/your-package-name)/,
        use: 'babel-loader'
      }
    ]
  }
};

这里的正则 node_modules(?!\/your-package-name) 是负向预查，意思是“排除所有 node_modules 下的文件，除了 your-package-name 目录里的”。这样你的模块代码就会被 loader 处理，DefinePlugin 的替换也会生效。

方案3：模块打包时保留环境变量占位符 #

如果你用 Webpack 或 Rollup 打包自己的模块，不要把环境变量提前替换成具体值，而是保留占位符。比如用 Webpack 打包模块时：

// 你的模块的 webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      // 不要直接替换成具体值，保留引用
      'process.env.MY_VAR': 'process.env.MY_VAR'
    })
  ]
};

这样打包后的模块代码里依然是 process.env.MY_VAR，当引用方用他们的 DefinePlugin 时，就会把这个占位符替换成实际的环境变量。

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