reactjs - 从 React 组件创建纯 Web 组件

Question

我正在尝试从 React 组件构建 Web 组件，一切正常，但我正在尝试解决两个问题:

有没有办法将此类 Web 组件转换为纯 Web 组件(使用 webpack、transpile 或其他方式)，从而不捆绑 react 和其他依赖项？

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

谢谢

Answer 1

对于第一个问题，没有直接的方法可以将 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);

当然，您可以概括这一点并创建一个可重用的函数:

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');

现在可以在您想要作为 Web 组件公开的所有组件中重复使用相同的注册功能。此外，如果您的组件接受应该传递的 Prop ，则可以将此函数更改为接受第三个参数作为字符串数组，其中每个值都将使用 Object.define 注册为该组件的 setter。 .每次调用 setter 时，您只需调用 ReactDOM.render再次。
现在对于第二个问题，您尝试执行的操作有多种情况。

如果您是捆绑销售 申请并使用 CDN 加载 React 或其他依赖项，然后使用 Webpack externals是一条路。在这里你会教Webpack如何替换import或 require来自应用程序将运行的全局环境。

如果您要捆绑一个 图书馆您打算将其发布到 NPM 注册表以供其他人在他们的应用程序中使用，那么您必须使用 library target configuration 构建您的项目.阅读更多关于 authoring libraries here .

库的捆绑稍微有点棘手，因为您必须决定输出格式(common.js、ES 模块或 UMD 或全局或多种格式)。如果您捆绑浏览器，理想的格式是 ES 模块，因为它允许更好的摇树。 Webpack 以前不支持 Module 格式，最近开始支持它。总的来说，我推荐 应用程序的 Webpack 和库的 Rollup.js。