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

Question

我的公司有几个不同的网站，大部分有 React 前端，但有几个没有。

我们想要构建一个可以在任何地方导入和使用的 cookie bar...基本上它应该是独立于框架的，理想情况下是一个 npm 包。

我不完全确定这是否可行，但我想到了用 react 构建 cookie bar 包……这将非常简单，只需几个带有 jsx 和样式的组件，一旦完成，使用 webpack 将其全部编译成独立于 react 的 vanilla javascript，并且可以插入任何具有任何框架或没有框架的站点。

cookie 栏的所有 html(最初将编写为 react 组件/jsx，但随后使用 webpack 编译成 vanilla JS)然后将被注入(inject)到包含脚本的网站的 html 中。

这可能吗？

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

提前致谢!

Answer 1

这绝对有可能。

如果目标页面中根本没有 React，您可能希望将其捆绑为一个小应用程序并按照 the answers here 中的方式安装它。 .如果它确实有 React，您可能可以通过将它放在其他代码中的 window 上来找到使用现有 React 的方法(import React from 'react'; window.React = React。

对于捆绑单个组件或几个组件，使用 Rollup 可能比使用 Webpack 更幸运(它们有不同的用例；两者都是 bundler ，但 Rollup 在捆绑库方面有一些优点)。 This example可能很有用(它还包括 Sass、Storybook 和其他一些您可能需要或可能不需要的附加功能)。这将为您提供更大的灵 active 和可能更小的包，但这意味着您仍然需要一个 React 应用程序来实际导入和使用组件，如上所述。