使用导出到 vanilla javascript 的 React 组件创建 npm 包

Question

我的公司有几个不同的网站，大部分都有反应前端，但也有一些没有。

我们想要构建一个可以在任何地方导入和使用的 cookie bar……基本上它应该是独立于框架的，并且最好是一个 npm 包。

我不完全确定这是否可能，但我有想法用 React 构建 cookie bar 包...这将非常简单，只需一些带有 jsx 和样式的组件，一旦全部完成，使用 webpack 来将其全部编译为独立于 React 的普通 JavaScript，并且可以插入到任何具有任何框架或没有框架的网站上。

cookie 栏的所有 html（最初被编写为 React Components / jsx，但随后使用 webpack 编译为 vanilla JS），然后将其注入到包含脚本的网站的 html 中。

这可能吗？

我在网上能找到的只是人们将 React 组件制作为 npm 包，但这并不是我想要实现的目标。

提前致谢！

Answer 1

这是绝对有可能的。

如果目标页面中根本没有 React，您可能需要将其捆绑为一个小型应用程序并按照此处的答案中的方式安装它。如果它确实有 React，您可能可以通过将现有的 React 放在其他代码（import React from 'react'; window.React = React.

对于捆绑单个组件或几个组件，使用 Rollup 可能比使用 Webpack 更好（它们有不同的用例；两者都是捆绑器，但 Rollup 有一些专门用于捆绑库的优点）。这个示例可能有用（它还包括 Sass、Storybook 以及您可能需要或不需要的其他一些附加功能）。这将为您提供更大的灵活性和可能更小的捆绑包，但这意味着您仍然需要一个 React 应用程序来实际导入和使用组件，如上所述。