DefinePlugin在Ionic、Angular、Webpack、TypeScript中无法注入process.env问题

我之前也碰到过一模一样的坑，结合你用的@ionic/app-scripts@3.1.9版本，问题主要出在DefinePlugin的写法和Ionic自身的配置机制上，给你几个关键的修复步骤：

1. 修正DefinePlugin的核心错误 #

你当前的写法会把process.env直接替换成JSON字符串，而不是一个可访问属性的对象，这是最根本的问题：

// 错误写法：process.env会被替换成字符串，无法访问属性
new webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env) })

正确的写法有两种，选适合你的：

• 方式一：指定需要注入的具体变量（推荐，避免打包冗余变量）

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  // 按需添加其他需要的变量
  'process.env.MY_CUSTOM_VAR': JSON.stringify(process.env.MY_CUSTOM_VAR)
})

• 方式二：批量注入所有process.env变量
  如果需要把Node环境里的所有变量都注入，要确保每个变量都被单独处理：

const envDefinitions = {};
Object.keys(process.env).forEach(key => {
  envDefinitions[`process.env.${key}`] = JSON.stringify(process.env[key]);
});

new webpack.DefinePlugin(envDefinitions)

2. 确保DefinePlugin的执行顺序正确 #

在你的plugins数组里，把DefinePlugin放在Ionic自带插件的前面，避免Ionic的插件覆盖你的环境变量配置：

plugins: [
  new webpack.DefinePlugin(/* 你的正确配置 */),
  ionicWebpackFactory.getIonicEnvironmentPlugin(),
  ionicWebpackFactory.getCommonChunksPlugin()
]

3. 适配Ionic app-scripts的配置合并机制 #

Ionic app-scripts会默认加载自己的Webpack配置，如果你是通过自定义配置文件修改的，需要确保配置被正确合并：

• 在package.json里指定自定义Webpack配置路径：

"config": {
  "ionic_webpack": "./webpack.config.js"
}

• 你的自定义webpack.config.js需要基于Ionic的默认配置扩展，而不是完全重写（可以用webpack-merge工具）：

const webpack = require('webpack');
const merge = require('webpack-merge');
const ionicWebpackFactory = require('@ionic/app-scripts/dist/webpack/ionic-webpack-factory');

module.exports = merge(ionicWebpackFactory.getIonicEnvironmentConfig(), {
  plugins: [
    // 你的DefinePlugin配置
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
});

4. 验证环境变量的传递 #

确保构建时环境变量被正确传递到Node环境：

• 在package.json的scripts里用跨平台方式传递变量（推荐用cross-env包）：

"scripts": {
  "build": "cross-env NODE_ENV=production ionic build"
}

• 安装cross-env：npm install cross-env --save-dev（Windows和Unix系统都能兼容）

5. 代码中正确使用变量 #

确保你的业务代码里是直接访问process.env.XXX，而不是先引用process对象（因为浏览器环境本身没有process对象，DefinePlugin是做字符串替换）：

// 正确写法
console.log(process.env.NODE_ENV);
// 错误写法（会报错，因为process对象不存在）
const env = process;
console.log(env.env.NODE_ENV);

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