基于Open WC Generator的项目：开发与Rollup构建的变量替换方案求解

一、修复开发环境（Web Dev Server）的process未定义问题 #

开发环境用的是Web Dev Server（WDS）而非Rollup，需给WDS添加变量替换插件，模拟Rollup replace的功能：

1. 安装替换插件：

npm install --save-dev @web/dev-server-replace

2. 项目根目录找到web-dev-server.config.js（无则新建），添加插件配置：

import { replacePlugin } from '@web/dev-server-replace';

export default {
  plugins: [
    replacePlugin({
      replacements: [
        {
          from: 'process.env.NODE_ENV',
          to: JSON.stringify('development'),
        },
      ],
    }),
  ],
  // 保留原有其他配置，比如port、open等
};

启动开发服务时，WDS会自动将代码中的process.env.NODE_ENV替换为"development"，解决未定义报错。

二、兼容Redux制品的两种环境使用 #

Redux维护者提到的“制品”指预编译的兼容包，@reduxjs/toolkit本身已做适配，只需确保：

• 保持原有@reduxjs/toolkit的引入方式不变：

import { configureStore, EnhancedStore } from '@reduxjs/toolkit';

• 检查tsconfig.json的配置：
  • moduleResolution设为"bundler"或"node"
  • target设为"ES6"及以上
  • module设为"ESNext"或"ES6"

这样TS和WDS能正确解析Redux的模块，无需额外修改import路径。

三、关于Open WC工具链的说明 #

Open WC Generator的默认配置中，开发环境确实是用tsc --watch + Web Dev Server，没有启用Rollup watch，生产环境才用Rollup打包。这是工具链的分工设计，不是你的配置问题，只需针对开发环境单独配置WDS的替换插件即可。

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