react 的 esm rollup 包无法在浏览器中工作，尝试访问 process.env

问题描述 投票：0回答：1

我一直在尝试使用 rollup 捆绑一个简单的 React 应用程序。根据最近的合并（10 月 2 日），他们使用配置中的 jsx 选项将 jsx 转译添加到 js 作为核心功能。 我在 React 应用程序上使用了它，当从浏览器中的 html 文件导入时，我得到的包将无法工作。 以下是我的 rollup.config.mjs 文件的内容：

import {nodeResolve} from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default [
    {
        input: 'main.jsx',
        output: {
            file: 'bundle.js',
            format: 'esm',
            exports: 'named',
            name: 'theBundle',
        },
        jsx: true,
        plugins: [
            nodeResolve(),
            commonjs(),
        ]
    }
];

我的 main.jsx 文件：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App/>
    </StrictMode>
);

我的App.jsx文件：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App/>
    </StrictMode>
);

以及我使用 VS Code 的实时服务器插件访问的 index-prod.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React + Rollup</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="./bundle.js"></script>
</body>
</html>

在浏览器上访问该页面时，我在控制台中收到以下错误消息：

Uncaught ReferenceError: process is not defined
    requireReact http://127.0.0.1:5500/bundle.js:2772
    <anonymous> http://127.0.0.1:5500/bundle.js:2780

最后这是 npm list 的输出：

rollup-tut@ C:\rollup-demo
├── @babel/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]


bundle.js
中有几个地方尝试访问变量
process.env
。但这仅在节点环境 AFAIK 的上下文中才有可能。 那么如何将浏览器的 React 应用程序与汇总开发人员添加的这个新 jsx 选项正确捆绑在一起？或者如果这是不可能的，你能告诉我常规方法，使用 babel 等吗？我似乎找不到任何最新信息。

我尝试将汇总配置中的 jsx 设置为“react”和“react-jsx”，但结果是相同的。

reactjs rollup
1个回答
0
投票

我解决了这个问题，对于任何想知道如何解决的人，这里是新的汇总配置：

import {nodeResolve} from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import replace from '@rollup/plugin-replace';

export default [
    {
        input: 'main.jsx',
        output: {
            file: 'bundle.js',
            format: 'esm',
            name: 'theBundle',
        },
        jsx: 'react-jsx',
        plugins: [
            nodeResolve(),
            commonjs(),
            replace({
                preventAssignment: true,
                values: {
                    'process.env.NODE_ENV': JSON.stringify('production'),
                }
            }),
        ]
    }
];

您需要安装 rollup 替换插件（撰写本文时为 npm i --save-dev @rollup/plugin-replace）并将 jsx 选项设置为“react-jsx”。 替换插件将替换 process.env.NODE_ENV 变量，从而消除错误。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.