使用React和Webpack编写可嵌入的Javascript插件

发布时间：2020-12-15 20:53:44 所属栏目：百科来源：网络整理

导读：我希望能够将我的React应用程序与Webpack捆绑在一起,以便放入CDN的分布式副本可以通过与客户端相关的一堆配置来源,调用和初始化. 阅读this和this之后,我正在设置我的webpack条目文件,如下所示： // ... React requires etc.(() = { this.MyApp = (config) =

我希望能够将我的React应用程序与Webpack捆绑在一起,以便放入CDN的分布式副本可以通过与客户端相关的一堆配置来源,调用和初始化.

阅读this和this之后,我正在设置我的webpack条目文件,如下所示：

// ... React requires etc.

(() => {
  this.MyApp = (config) => {
    // some constructor code here
  }

  MyApp.prototype.init = () => {
    ReactDOM.render(<MyReactApp config={MyApp.config} />,someSelector);
  }
})();

这个想法是在我的客户端,我可以做如下的事情：

<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.init({
    some: "config"
  });
</script>

我的MyApp #init函数会将我的React应用程序渲染到客户端的某个容器中.

我是否以正确的方式思考这个问题？是否有更简单或更有效的方法来解决这个问题？

我的错误是Uncaught TypeError：无法设置未定义的属性’MyApp’,因为IIFE中的这个是未定义的.我真的很想了解为什么会发生这种情况以及如何解决它的建议.

提前致谢！

所以我找到了一个解决方案,如 here所述

如果我更改我的webpack.config.js文件以将以下属性添加到输出对象,即

var config = {
  // ...
  output: {
    // ...
    library: 'MyApp',libraryTarget: 'umd',umdNamedDefine: true,}
}

这指定我将webpack捆绑为UMD模块的文件,所以如果我在该文件中有一个函数并将其导出…

export const init = (config) => {
  ReactDOM.render(<MyReactApp config={config} />,someSelector);
}

然后,我可以在我的客户端执行以下操作.

<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.init({
    some: "config"
  }); 
</script>

而我的React应用程序呈现.

如果有人认为这是一种愚蠢的做法,我很乐意听到它！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!