Question

我正在编写自己的库来帮助使用React构建表单。

目标是能够在任何React应用程序中重新使用它（从头开始制作，使用 create-react-app ， nextjs 和其他？）< / p>

我的问题是我无法弄清楚如何重新使用它。

这是我尝试在另一个项目中重用库时遇到的第一个问题：

无效的挂机呼叫警告

反应说，原因可能是以下之一：

您可能使用的React和React DOM版本不匹配。
您可能正在违反挂钩规则。
您可能在同一应用中拥有多个React副本。

经过调查，我排除了点1.和2.

我最初是使用 Parcel 来构建我的库的，但是我需要从捆绑中排除React来解决3.

这就是为什么我切换到 Webpack 并将 React 依赖项移至peerDependencies + devDependencies的原因。

我尝试了不同的Webpack配置：

const config: webpack.Configuration = {
  ...
  externals: {
    react: 'React'
  }
}

->在使用中的应用程序中导致以下错误：

未定义反应

const config: webpack.Configuration = {
  ...
  externals: {
    react: {
      root: 'React',
      amd: 'react',
      commonjs: 'react',
      commonjs2: 'react',
      umd: 'react',
    }
  }
}

->导致以下错误：

无法读取未定义的属性'createContext'

我尝试将我的库与npm链接一起使用，并且也将其发布到npm上，但是结果是相同的。

复制步骤：

在您的React应用程序（@mlaopane/formhook或npm i @mlaopane/formhook）中安装yarn add @mlaopane/formhook
例如，尝试使用组件

import { Form } from '@mlaopane/formhook'

export default function App() {
  return <Form />
}

您应该在控制台中看到错误

谢谢您的帮助：）

注意：这是我的第一个问题，请告知是否需要更多信息。

Answer 1

我终于找到了受create-react-library启发的解决方案。

看起来 Rollup 是捆绑 React 库的更好的选择。

即使我仍然无法在本地链接我的库，也可以在发布时使用它。

如何通过钩子重用React库

1 个答案: