使用RequireJS将React16 Build加载到另一个应用程序中

Posted 2021-04-09

我构建了一个小的React应用程序，最终将在其他小应用程序的页面上。系统架构的方式要求每个应用程序都是一个require模块，它导出一个init函数，调用它时会将app渲染为div。我已经调整了我的React构建，以便我有一个单独的js文件。现在我想弄清楚我是否可以用requirejs以某种方式加载这个最终版本。我发现了很多关于使用requirejs作为构建的一部分的信息，但我宁愿能够继续使用create-react-app方式，也许还能以某种方式增加以AMD方式进行输出的能力。我知道这看起来一定很傻但我无法绕过这个平台的AMD架构。

答案

你可以通过调整webpack.config.js文件的配置来实现这一点，你需要查看webpack的output.library选项（library，libraryExport和libraryTarget）：https://webpack.js.org/configuration/output#module-definition-systems

module.exports = {
  //...
  output: {
    library: 'MyReactAppLibrary',
    libraryTarget: 'amd'
  }
}