React 和 react-dom 仍然被 rollup bundler 捆綁

Question

我不確定我做錯了什么，但我根本無法為 rollup.js 構建帶有反應鈎子的組件。 我已經嘗試了所有流行的評論，例如在我的解析插件中添加 skip 並添加外部組件並在 package.json 中添加為 peerdependencies。

我的進口如下：

 import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "@rollup/plugin-typescript"; import { terser } from "rollup-plugin-terser"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; import postcss from "rollup-plugin-postcss"; import image from "@rollup/plugin-image"; const packageJson = require("./package.json"); export default { input: "./src/index.ts", output: [ { file: packageJson.main, format: "cjs", sourcemap: true, }, { file: packageJson.module, format: "esm", sourcemap: true, }, ], external: ["react", "react-dom"], plugins: [ peerDepsExternal(), resolve({ skip: ["react", "react-dom"], }), commonjs(), typescript({ tsconfig: "./tsconfig.json", }), postcss({ plugins: [require("tailwindcss"), require("autoprefixer")], }), terser(), image(), ], };

Answer 1

對我來說， 'rollup-plugin-ignore'起作用了。

  import ignore from 'rollup-plugin-ignore';
  ignore(['fs', 'net', 'react', 'react-dom', 'prop-types', 'PropTypes']),

和這樣的外部

external: [
  (id) => /^react$|^react-dom$|^@babel\/runtime/.test(id),
];