使用 rollup 编译 React 组件返回 webpack 错误

Question

使用 rollup 编译 React 组件返回 webpack 错误

Ugo*_*Lfe 5 jsx node.js reactjs webpack rollupjs

我正在尝试通过 Rollup.js 编译 React jsx 组件来填充 commonjs 中的组件库。

这是我的汇总配置

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';

export default {
  input: ['./src/xxx.jsx'],
  output: [
    {
      dir: './public/build/lib/xxx/commonjs/',
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true,
      preferBuiltins: false,
      extensions: ['.mjs', '.js', '.json', '.node', '.jsx', '.ts', '.tsx'],
    }),
    babel({
      exclude: './node_modules/**',
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: ['@babel/plugin-transform-runtime'],
      babelHelpers: 'runtime',
    }),
    commonjs(),
    postcss({
      extensions: ['.css'],
    }),
    image(),
    json(),
  ],
};

Run Code Online (Sandbox Code Playgroud)

在汇总编译时，我没有收到错误，但只有这个警告

（！）循环依赖 node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/ es/components/fields/ArrayField.js -> node_modules/@rjsf/core/dist/es/utils.js node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/ es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/BooleanField.js -> node_modules/@rjsf/core/dist/es/utils.js node_modules/@rjsf/ core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/MultiSchemaField.js - > node_modules/@rjsf/core/dist/es/utils.js ...还有 19 个

但是当我想将我的组件导入另一个应用程序时，我遇到了有关 webpack 的错误，但它来自哪里？

编译有问题：X

./node_modules/@xxx/xxx/xxx.js 中的错误 1:0-32

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“http”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "http": require.resolve("stream-http") }'

安装'stream-http' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "http": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 2:0-33

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“https”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "https": require.resolve("https-browserify") }'

安装 'https-browserify' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "https": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 3:0-31

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“url”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "url": require.resolve("url/") }'

install 'url' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "url": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 4:0-34

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“流”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'

安装'stream-browserify' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "stream": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 5:0-32

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“assert”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "assert": require.resolve("assert/") }'

install 'assert' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "assert": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 6:0-30

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“zlib”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'

安装 'browserify-zlib' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "zlib": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 7:0-28

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“加密”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'

安装 'crypto-browserify' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "crypto": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 8:0-30

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“fs”

./node_modules/@xxx/xxx/xxx.js 中的错误 9:0-32

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“路径”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "path": require.resolve("path-browserify") }'

安装 'path-browserify' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "path": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 10:0-34

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“模块”

./node_modules/@xxx/xxx/xxx.js 中的错误 12:0-34

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“缓冲区”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "buffer": require.resolve("buffer/") }'

install 'buffer' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "buffer": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 13:0-32

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“util”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "util": require.resolve("util/") }'

install 'util' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "util": false }

./node_modules/@xxx/xxx/xxx.js 中的错误 123470:44-83

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“../include/module.js”

./node_modules/@xxx/xxx/xxx.js 中的错误 123471:44-83

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“../include/action.js”

./node_modules/@xxx/xxx/xxx.js 中的错误 162102:17-48

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“ajv-i18n/localize/fr”

./node_modules/string_decoder/node_modules/safe-buffer/index.js 中的错误 4:13-30

找不到模块：错误：无法解析“C:\dev\Test\my-app\node_modules\string_decoder\node_modules\safe-buffer”中的“缓冲区”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要：

添加后备 'resolve.fallback: { "buffer": require.resolve("buffer/") }'

install 'buffer' 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "buffer": false }

Answer 1

小智 2

我可以通过添加resolve: ({ browser : true })到 rollup.config.js 来解决这个问题，我看到你已经添加了。

对我有用的另一个解决方案是使用： https ://github.com/FredKSchott/rollup-plugin-polyfill-node

要使用此插件，请修改 rollup.config.js，如下所示

import nodePolyfills from 'rollup-plugin-polyfill-node';

...

export default {

  ...

  resolve: ({ 
    preferBuiltins: false 
  }),

  ...

  plugins: [
    nodePolyfills()
  ],

  ...

};

Run Code Online (Sandbox Code Playgroud)

这将在您的捆绑包中包含这些“缺失”的库。

归档时间：	3 年，11 月前
查看次数：	4249 次
最近记录：	2 年，7 月前