使用 webpack 进行微前端开发

Question

我正在尝试构建微前端生态系统。有许多团队开发不同的组件，使应用程序在单页中作为单页应用程序一起工作。所有组件都应该独立构建和部署，并且应该在单个 HTML 页面中引用，以便通过在运行时解析来开始协同工作。例如，在生产中，我们应该在 html 页面中有以下脚本文件：

<script src="http://deploy-server/external/vendor1.js" />
<script src="http://deploy-server/external/vendor2.js" />
<script src="http://deploy-server/external/vendor3.js" />
<script src="http://deploy-server/internal/comp1.js" />
<script src="http://deploy-server/internal/comp2.js" />
<script src="http://deploy-server/internal/comp3.js" />

现在，下面将是包的详细信息：

vendor1 -> Reactjs, react-dom, react-router (most used lib for making react eco-system, Used by all internal component scripts)
vendor2.js -> react-datepicker, lodash, (libraires used by comp2.js)
vendor3.js -> Used by comp3.js

comp1.js,comp2.js,comp3.js -> 使用 vendor1.js 并且将来可能正在使用或可能开始使用 vendor2 和 vendor3 js 模块。

如何分别捆绑外部供应商文件和内部库，同时希望使用它们在不同团队之间共享以进行开发。假设我已经捆绑了 vendor1.js，它应该如何用于开发和构建 comp3、comp4、....？

我尝试使用“共享”构建 vendor1.js，但是当使用 comp2.js 引用它时，出现运行时错误。

编辑：添加代码我尝试共享供应商文件不同的团队，我在 app1 中创建了供应商文件，具有以下 webpack.config.js

   entry: {
      home: { 
        import: './src/app1-index.js',
        dependOn: 'shared',
        filename: 'js/app1.js',
      },
      shared: ['react', 'react-dom', 'react-is']
    },
    output: {
      publicPath: '/',
      path: path.join(__dirname, '/build/'),
      filename: `js/vendor.js`,
    },

这已经创建了 2 个文件：

       Asset      Size
  js/app1.js  4.82 KiB  [emitted]  [name: home]
js/vendor.js   993 KiB  [emitted]  [name: shared]

一起使用这 2 个文件工作正常，因为我已将它们捆绑在单个捆绑进程中。下面是我使用的html：

  <script src="/build/js/vendor.js" ></script>
  <script src="/build/js/app1.js" ></script>

现在，由于我希望在不同的团队之间共享供应商文件，因此在另一个应用程序 app2 中，我保留在 webpack.config 下：

entry: './src/app2-index.js',
externals : {
  react: 'react',
  'react-dom': 'react-dom',
  'react-is': 'react-is'
},
output: {
  publicPath: '/',
  path: path.join(__dirname, '/build/'),
  filename: `js/app2.js`,
},

这仅创建了 1 个文件：

     Asset     Size
js/app2.js  6.3 KiB  [emitted]  [name: main]

提到外部作为模块将由之前创建的 vendor.js 提供服务。

现在使用 app2.js 和之前创建的供应商文件不起作用。我将 vendor.js 从以前的构建文件夹复制到 app2 构建文件夹：

  <script src="/build/js/vendor.js" ></script>
  <script src="/build/js/app2.js" ></script>

这是抛出错误：

参考错误：未定义反应

我理解为什么它不起作用可能是因为它们没有捆绑在单个捆绑过程中。但是我们如何使用 webpack 实现这一点呢？

我想在 vendor.js 中捆绑外部库并希望分发给不同的团队以开始使用它，但他们（差异团队）在返回他们的应用程序包时不应该捆绑这些供应商模块。依赖模块只会在运行时在浏览器中解析。

同样，一旦开发了 comp1，team1 将与 team2 共享他们的文件以构建 comp2，假设 comp2 依赖于 comp1，但共享不应通过 npm 包完成，而应通过脚本文件完成，team2 可以假设它将通过以下方式解决他们的 webpack 模块 comp2，在运行时。

我们可以在 webpack 中实现这一点吗？我尝试使用外部和共享。我应该尝试其他任何选择吗？