reactjs - 如何使用Webpack创建与容器应用程序共享库的Micro Frontend捆绑软件？

我有任务

具有带有单spa框架的Micro Frontends。

门户网站/主应用程序(通过URL加载所有其他js代码)

Micro Frontend 1(基于 react )

Micro Frontend 2(基于 react )

所以我的问题只有一个:我不想复制供应商库，例如react，react-dom(其他任何库)。我想让它们在其他Micro Frontends(与Webpack捆绑在一起)之间共享

我知道拥有一些全局性东西是一种不好的做法(违反了与webpack捆绑的整个想法)。但是，如何解决供应商库重复的问题呢？

我发现一个解决方案只是使用SystemJ加载dectric，例如html中的分隔标签，但我只是想知道也许还有另一种解决方案。

谢谢你。

SystemJs的方法是按需加载依赖项，但是从CDN，我只想做同样的事情，但要从React和其他内容中加载来自“共享” webpack捆绑包的所有依赖项。

window.SystemJS = window.System

function insertNewImportMap(newMapJSON) {
  const newScript = document.createElement('script')
  newScript.type = 'systemjs-importmap'
  newScript.text = JSON.stringify(newMapJSON)
  const allMaps = document.querySelectorAll('script[type="systemjs-importmap"]')

  allMaps[allMaps.length - 1].insertAdjacentElement(
    'afterEnd',
    newScript
  )
}

const devDependencies = {
  imports: {
    react: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js',
    'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js',
    'react-dom/server': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom-server.browser.development.js',
    'single-spa': 'https://unpkg.com/[email protected]/lib/umd/single-spa.min.js',
    lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js',
    rxjs: 'https://unpkg.com/[email protected]/bundles/rxjs.umd.js',
  }
}

const prodDependencies = {
  imports: {
    react: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js',
    'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js',
    'react-dom/server': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom-server.browser.production.min.js',
    'single-spa': 'https://unpkg.com/[email protected]/lib/umd/single-spa.min.js',
    lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js',
    rxjs: 'https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js',
  }
}

const devMode = true // you will need to figure out a way to use a set of production dependencies instead
if (devMode) {
  insertNewImportMap(devDependencies)
} else {
  insertNewImportMap(prodDependencies)
}

最佳答案

更新:

刚意识到，您的问题针对的是Micro Frontends(不仅是微服务)，因此，一般而言，它不是要与Webpack共享库。在您的标签/标题中添加了Micro Frontend，并更新了答案，使其更加专注于该主题。

您可以做的是通过向配置添加Webpack externals属性，从Micro Frontends的输出包中排除依赖项。

Micro Frontends的webpack配置:

module.exports = {
  ...
  externals = {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
}

上面的配置将排除react和react-dom，并期望它们在全局变量React和ReactDOM中。然后，您可以通过将库包含在根应用程序(也称为缝合层)的index.html内的脚本中来共享这些依赖项:

<html>
  ...
  <body>
    ...
    <script src="<your-host>/react.prod-16.9.0.min.js"></script>
    <script src="<your-host>/react-dom.prod-16.9.0.min.js"></script>
  </body>
</html>

如果您要共享其他通用组件，则还可以将库脚本集成到component library中。

使用include as脚本的原因是:我们不希望我们的容器必须使用require/import the Micro Frontends at build time以避免所有应用程序之间的构建/发行/版本管理的耦合。相反，Micro Frontends的一个目的是完全实现零件的independent deployment，其中包括从构建，测试到发布的连续交付步骤。

当然，您可以在应用程序之间创建某种形式的耦合。但是，如果您拥有一个成熟，稳定且通用的库，并且各个部分都可以共享，那么这是一个合理的决定。

希望对您有帮助(现在)!

关于reactjs - 如何使用Webpack创建与容器应用程序共享库的Micro Frontend捆绑软件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57370433/