自定义 React 组件库 - 开玩笑"找不到模块反应"- 测试库，汇总

Question

我正在构建一个自定义react组件库，以便与其他应用程序共享。我正在使用rollup并跟踪这个博客和其他一些博客:https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe

我的rollup配置的相关片段如下:

export default [
{
input: "src/index.ts",
output: [ { file: packageJson.main, format: "esm", sourcemap: true } ],
plugins: [ peerDepsExternal(), resolve(), terser() ],
external: ["react", "react-dom"]
}
]

在我的包里。我把react和react-dom从'devDependencies'移到了'peerDependencies'。My simplified package.json:

{
"name": "custom components",
"version": "1",
"devDependencies": {
...stuff, (but not react/react-dom)
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"main": "dist/esm/index.js",
"files": ["dist"]
}

然后使用npm link，我已经将我的组件库导入到另一个使用CRA和反应测试库的应用程序中。

到目前为止，这是有效的。我能够按照预期呈现我的公共组件。

然而，似乎把react/react-dom移出devDependencies会使我的jest测试在和中失败项目。在这两种情况下，笑话都找不到反应。导入组件的CRA中的Jest输出如下所示:

Test suite failed to run
Cannot find module 'react' from 'index.js' //<-- this is the index of the component library
However, Jest was able to find:
.../MyComponent.tsx
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js',...etc] (defaults)

当我在公共组件库中运行测试时:

Test suite failed to run
Cannot find module 'react' from 'MyComponent'
import React from 'react';
^

我不知道该如何解决这个问题。如果我把react/react-dom移回devDependencies，测试将会成功运行，但是由于项目中有多个react副本，任何使用react state的组件都将无法渲染。

这可能是一个问题，因为我使用npm链接，而不是实际发布应用程序到npm和安装，或者这是我的rollup配置/jest配置/package.json的问题?如有任何帮助，不胜感激。

Answer 1

react和react-dom应包含在您的库的devDependencies和peerDependencies中。

在devDependencies中包含它们使它们在开发(和运行测试)时可用，但是当您将它们与Rollup捆绑在一起时(这是您想要的)，它们不会包含在库中。

在peerDependencies中包含它们告诉任何使用它们的应用程序"你必须在指定的版本范围内拥有这些依赖项"，但是Rollup并没有将它们包含在库包中。

如果只在peerDependencies中包含它们，那么在开发库或运行测试时不会安装它们，尽管如果使用npm v7，可能不再是这样。

如果你的应用程序包含的React版本与你的库不同，你可能会遇到项目中有多个版本的React的问题，但如果应用程序和库都有相同的版本范围，你应该不会有这个问题。