Question

我有一个独立的React应用程序，该应用程序使用webpack进行捆绑，要求能够在Web组件中运行此捆绑包。谁能建议我该怎么做？

我在想类似的东西：

//webpack.config.js
output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        library: 'reactUmd',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },

//react-component.js
import '../../packages/react-umd/dist/bundle.js'

class ReactComponent extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
    reactUmd.renderSomeComponentTo(mountPoint)
  }
}

customElements.define('react-component', ReactComponent)

但是我不确定如何导入已编译的包并获得对React，ReactDOM，Main组件等的引用，是否可以作为UMD导出提供我需要的引用？

Answer 1

因此，您基本上想在缩小的捆绑文件之外访问react组件。

这是一种方法：

您将webpack告诉文件create a library。这基本上将创建一个全局变量，您可以使用该全局变量访问js条目文件中的所有导出函数。为此，请在library对象下的webpack配置中添加一个名为output的密钥。

module.exports = { entry: './main.js', output: { library: 'someLibName' }, ... }
完成此操作后，重新启动Webpack服务器，并在控制台上键入window.someLibName。这应该将main.js导出的所有方法打印为对象。
下一步是创建一个接受DOM元素和renders the react component on the element的函数。该函数将如下所示：

export const renderSomeComponentTo = (mountNode) => { return ReactDOM.render(<App />,MOUNT_NODE); }
现在，您可以使用
从项目的任何位置访问上述功能
const mountNode = document.getElementById('theNodeID'); window.someLibName.renderSomeComponentTo(mountNode);

这样，所有的特定于反应的代码都被抽象化了：）

我希望我回答了你的问题。别忘了点击明星并投票。欢呼声

在Web组件中导入并运行独立的React应用程序

1 个答案: