Reactjs 从react组件创建纯web组件

我正在尝试从react组件构建web组件，一切正常，但我正在尝试解决两个问题：

有没有一种方法可以将这些web组件转换为纯web组件（使用webpack、transpile或其他方式），从而不捆绑react和其他依赖项

有没有办法只包含依赖项的必需部分，或者只包含全部/无，并且必须使用webpack的外部设置才能使用主机的版本

---

感谢第一个问题，没有直接的方法将React组件转换为Web组件。您必须将其包装到Web组件类中：

export function MyReactComponent() {
  return (
    <div>
      Hello world
    </div>
  );
}


class MyWebComponent extends HTMLElement {
  
  constructor() {
    super();
    // Do something more
  }

  connectedCallback() {
    
    // Create a ShadowDOM
    const root = this.attachShadow({ mode: 'open' });

    // Create a mount element
    const mountPoint = document.createElement('div');
    
    root.appendChild(mountPoint);

    // You can directly use shadow root as a mount point
    ReactDOM.render(<MyReactComponent />, mountPoint);
  }
}

customElements.define('my-web-component', MyWebComponent);

导出函数MyReactComponent（）{
返回(
你好，世界
);
}
类MyWebComponent扩展了HtmleElement{
构造函数（）{
超级（）；
//多做点什么
}
connectedCallback（）{
//创建阴影区
const root=this.attachShadow（{mode:'open'}）；
//创建挂载元素
常量mountPoint=document.createElement（'div'）；
root.appendChild（挂载点）；
//您可以直接使用阴影根作为装载点
ReactDOM.render（，mountPoint）；
}
}
customElements.define（'my-web-component'，MyWebComponent）；

当然，您可以将其概括并创建一个可重用函数，如下所示：

function register(MyReactComponent, name) {
  const WebComponent = class extends HTMLElement {
    constructor() {
      super();
      // Do something more
    }
  
    connectedCallback() {
      
      // Create a ShadowDOM
      const root = this.attachShadow({ mode: 'open' });
  
      // Create a mount element
      const mountPoint = document.createElement('div');
      
      root.appendChild(mountPoint);
  
      // You can directly use shadow root as a mount point
      ReactDOM.render(<MyReactComponent />, mountPoint);
    }
  }
  
  customElements.define(name, MyWebComponent);
}

register(MyReactComponent, 'my-web-component');

函数寄存器（MyReactComponent，名称）{
const WebComponent=类扩展HtmleElement{
构造函数（）{
超级（）；
//多做点什么
}
connectedCallback（）{
//创建阴影区
const root=this.attachShadow（{mode:'open'}）；
//创建挂载元素
常量mountPoint=document.createElement（'div'）；
root.appendChild（挂载点）；
//您可以直接使用阴影根作为装载点
ReactDOM.render（，mountPoint）；
}
}
定义（名称，MyWebComponent）；
}
注册（MyReactComponent，'我的web组件'）；

现在，您可以在希望作为web组件公开的所有组件中重复使用相同的注册函数。此外，如果组件接受应该传递的道具，则可以将此函数更改为接受第三个参数作为字符串数组，其中每个值都将使用

Object.define注册为该组件的setter。每次调用setter时，只需再次调用
ReactDOM.render

现在，关于第二个问题，您尝试做的事情有多个场景


如果您正在捆绑应用程序并使用CDN加载React或其他依赖项，那么Webpack就是一种方法。在这里，您将学习如何从应用程序运行的全局环境中替换
导入
或
要求
如果您要绑定一个库，您打算将该库发布到NPM注册表以供其他人在其应用程序中使用，那么您必须使用。阅读更多关于

库的绑定稍微复杂一些，因为您必须决定您的输出格式（common.js、ES Modules或UMD或全局或多种格式）。理想的格式是ES模块，如果您是为浏览器绑定的，因为它允许更好的树抖动。Webpack以前不支持模块格式，最近开始支持该格式。一般来说，我建议应用程序使用Webpack，图书馆使用Rollup.js。
谢谢你的回答。网页外部是我们一直在思考的方式。所以总体来说，现在似乎没有util/package来将封装的react组件转换为纯web组件？