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

标签 javascript reactjs webpack

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

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

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

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

这可能吗?

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

提前致谢!

最佳答案

这绝对有可能。

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

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

关于javascript - 使用导出到 vanilla javascript 的 react 组件创建 npm 包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65688559/

相关文章:

javascript - 从 div javascript 获取边距

javascript - 为多个应用创建 React App?

javascript - ChargeBee 直接结账 + React : Error

node.js - 尝试编译 react 时 webpack 退出状态 4294967295

javascript - 在 ReactJs 中使用 props 从父级到子级的数据无法正常工作

javascript - $(...).tooltip 不是 Rails 6 webpack 的函数

javascript - ReactJS - 如何更改 React 组件的样式和类?

javascript - 将 JSON 树导航到 Reddit API 中的数据

javascript - 当字段已由 JavaScript 设置时,CRM 2011 onChange 事件处理程序未触发

检测到 Angular 编译器,但它是错误类的实例