为反应库配置汇总

Question

对不起，我没有别的地方post这个。

这是我的汇总配置

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';

export default {
  input: 'src/index.js',
  external: ['react', 'react-dom', 'prop-types'],
  output: [
    { file: pkg.main, format: 'cjs', exports: 'named' },
    { file: pkg.module, format: 'es', exports: 'named' },
  ],
  plugins: [
    resolve(),
    commonjs({
      include: 'node_modules/**',
    }),
    babel({
      exclude: 'node_modules/**',
    }),
    terser(),
  ],
};

这是我项目的全部源代码https://github.com/withvoid/melting-pot

发布在npmjs https://www.npmjs.com/package/@withvoid/melting-pot

我的问题是，如果我将它添加到 https://github.com/facebook/create-react-app 项目中，我的库工作得很好，但是当我将它添加到 codesandbox 项目中时

https://codesandbox.io/s/6lqzp7q28w

它给我一个错误

Invariant Violation Hooks can only be called inside the body of a function component.

我似乎无法确定这是 codesandbox 问题（我对此表示怀疑）还是我的汇总配置有问题。

Answer 1

问题是 melting-pot 将 "react" 和 "react-dom" 指定为 dependencies，但它们应该指定为 peerDependencies。这具有将 React 拉入两次并带来不良影响的效果。如果我从沙箱中完全删除 React 依赖项，它会起作用，因为 React 只会被拉入一次（通过熔炉）。显然这不是合适的解决方案，但它是验证错误原因的快速方法。

为反应库配置汇总

Configuring rollup for a react library

reactjs

rollupjs

react-hooks

codesandbox