带有 rollup 和 redux 的 lit-element：未定义进程

Question

我正在尝试将基于 lit-element 的应用程序中的状态管理从简单的全局变量切换到 redux。按照 redux 教程，我安装了 redux 工具包并创建了一个简单的 reducer 和 store。

使用汇总构建应用程序成功，但是当我在 Chrome 中加载应用程序时，出现以下错误：

ReferenceError: process is not defined

redux代码中有几行使用了'process', f.e.

/*
 * This is a dummy function to check if the function name has been altered by minification.
 * If the function has been minified and NODE_ENV !== 'production', warn the user.
 */

function isCrushed() {}
/
if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
  warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
 
}

有人可以帮忙吗？我错过了什么吗？ 'process' 是只有 Node 才有的东西吗？

Answer 1

比我作为评论发布的更合适的修复似乎是通过 rollup.config.js.

进行字符串替换

来源：https://github.com/rollup/rollup/issues/487

npm install rollup-plugin-replace --save-dev

然后在 rollup.config.js 的插件部分添加这个

replace({
  'process.env.NODE_ENV': JSON.stringify('production')
}),

Answer 2

我是一名 Redux 维护者。 Redux 库提供了几种不同的构建工件以用于不同的环境。我们希望 CommonJS 和 ES 模块构建工件将运行通过知道如何处理 process.env.NODE_ENV 检查并根据标准生态系统约定在构建时替换它们的捆绑器。

如果您尝试在非捆绑环境中使用 Redux Toolkit，您应该使用已编译的具有特定值 process.env.NODE_ENV 的构建工件之一（'production' 或'development')。我们以这种方式发布了几个 ESM 构建工件，以及 UMD 构建工件：

https://unpkg.com/browse/@reduxjs/toolkit@1.7.1/dist/

您可能应该使用 redux-toolkit.modern.production.min.js (ESM) 或 redux-toolkit.umd.min.js (UMD)。

如果您实际上是在尝试进行完整构建，那么是的，您需要配置 Rollup 以在 process.env.NODE_ENV 上进行适当的替换。

Answer 3

我发现这个插件帮我解决了问题 rollup-plugin-node-globals

带有 rollup 和 redux 的 lit-element：未定义进程

lit-element with rollup and redux: process is not defined

redux

rollupjs

react-redux

lit-element