React和react-dom仍然是从rollup捆绑包中捆绑的

Question

我不确定我做错了什么，但我根本不能使用rollup.js的react钩子来构建组件。我尝试了所有流行的评论，比如在我的resolve插件中添加跳过，在package.json中添加外部变量和作为对等依赖项添加。

我的导入如下：

​

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),
];