如何构建供 HTML 应用程序使用的 React 组件？

Question

我有一个使用 npx create-react-app 创建的 React 项目，我在其中实现了一些 React 组件。我并不真正将这个项目视为“React 应用程序”，因为它只是我在另一个项目中使用的个人组件库，一个使用服务器端技术呈现的 HTML Web 应用程序。我的目标是逐渐用 React 组件替换这个应用程序的某些部分。我并没有真正设想它成为一个单一的 React 应用程序，我的计划只是替换我认为用 React 开发有意义的部分。

我在实现这些组件时没有问题 - 我正在使用 Storybook 来组织独立的模块。但我在构建过程中苦苦挣扎。

如果我运行npm run build，我会创建一个应用程序，它基于由create-react-app 引导的原始 React 应用程序代码，我基本上放弃了它以支持 Storybook 设置。如果我添加由 npm run build 我的项目生成的文件，我无法让 React 正确渲染我的组件。

我设法让手动构建过程起作用：

• 在我的 HTML 项目中，我添加了 https://unpkg.com/react@16/umd/react.production.min.js 和 https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
• 对于我的每个 React 组件源文件，我运行 npx babel --presets react-app/prod src/MyComponent.js -o build/mycomponent.js
• 然后我将所有npx babel 输出合并到一个components.js 文件中，调整出现在所有文件顶部的一些重复函数，并禁止import 和export 语句。
• 我在我的 HTML 项目中加载了component.js 文件，我可以使用纯 JS 创建我的组件：

ReactDOM.render(
    React.createElement(MyComponent, {param: value}, null),
    document.getElementById('myComponent')
);

有没有更好的流程将我的组件构建到一个可以在我的 HTML 应用程序中使用的单个 JS 文件中？

Answer 1

如您所料，该项目应该是其他项目的可重用模块/ UI 库（例如名称为 my-ui）。我之前做过类似的事情，这里只是介绍我的方法。首先，正常导出组件。其次，创建一个 index.js。第三，导入和导出您导出的那些组件。第四，如果你熟悉 webpack，在 webpack.config.js 中使用 index.js 作为入口，将整个项目打包为一个文件。你可以发布这个包，或者只是在本地使用它。 然后在其他项目中，import my-ui，你可以使用从那个模块导出的任何组件。