0

问题：

如何（是否有可能）配置 webpack （带有单水疗中心） ，在一个范围（@orginazation）外部和其他内部（非外部）下制作一些包（项目） ？

项目信息：

我们正在使用webpack构建一个单一的 spa应用程序，并使用Github npm registrer （和 github 操作）。所有的微前端都是 Github 中的项目，其中一些是 util/helper/provider 项目，使用 webpack 编译为外部项目。

但其中一些是用微前端编译的（不能是外部的）

似乎当 webpack 将组织范围内的一个项目视为外部项目时，它将该范围内的所有包都设置为外部！

正如我们从日志中看到的，“CompilingTool”也将被编译为外部，事件认为它不应该。

包在文件中设置为：

import auth from "@ORGANIZATION/auth"  // <- Should be external
import compilingTool from "@ORGANIZATION/compilingTool" // <- Should NOT be external

可以将单水疗配置中的外部更改为其他内容，例如：

import compilingTool from "ORGANIZATION-Internal/compilingTool" // Not optimal!!

但这意味着智能不再起作用，因为它现在没有指向微前端中的实际包（仍然是“@ORGANIZATION/compilingTool”）

必须开始使用像 gulp 这样的预构建工具来进行这样的转换并不是最优的。而且我们不喜欢使用不同的 Github 帐户来拥有不同的范围。

因此，任何让 webpack 理解它不应该将“@ORGANIZATION/compilingTool”包外部化的帮助或想法都是非常重要的。

已经尝试过：

从外部的 webpack 文档中，应该可以使用验证函数和/或减法，但两者都不适用于带有 spa-setup 的作用域包。

编译/依赖信息：

single-spa/webpack 编译为SystemJs

Webpack 和 single-spa 包：

  • “单水疗”：“^5.9.3”
  • “单水疗中心布局”：“1.6.0”
  • “webpack”：“^5.48.0”
  • “webpack-cli”：“^4.7.2”
  • “webpack-config-single-spa-ts”：“^3.0.0”
  • “webpack-dev-server”：“4.0.0-rc.0”
  • “webpack 合并”：“^5.8.0”

webpack.config.js （项目特定已替换为虚拟代码！）

const { merge }  = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react-ts");
const { readFileSync } = require('fs')
const path = require('path')
const dotenv = require('dotenv').config( {
  path: path.join(__dirname, '.env')
} );

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "ORGANIZATION",
    projectName: "SOME-MICRO-FRONTEND",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    externals: [
      "react", 
      "react-dom",
        "@ORGANIZATION/auth",  // <- This should be external
        //"@ORGANIZATION/compilingTool" // <- This should NOT be external
      ],
    devServer: {
      port: 5400,
      https: {
        key: readFileSync( path.resolve(__dirname, path.join(process.env.CERT_PATH, process.env.CERT_KEY_FILE_NAME))),
        cert: readFileSync(path.resolve(__dirname, path.join(process.env.CERT_PATH, process.env.CERT_FILE_NAME)))
      }
    },
  });
};

来自 webpack 构建的运行时控制台输出：（ 项目特定已替换为虚拟代码！）

webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:XXXX/
<i> [webpack-dev-server] On Your Network (IPv4): https://XX.X.XXX.XXX:XXXX/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\path-to-PROJECT\public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
asset PROJECT-NAME.js 436 KiB [emitted] (name: main) 1 related asset
asset index.html 3.1 KiB [emitted]
runtime modules 26.3 KiB 14 modules
modules by path ./node_modules/ 329 KiB 58 modules
modules by path external "@ORGANIZATION/ 210 bytes
  external "@ORGANIZATION/auth" 42 bytes [built] [code generated]
  external "@ORGANIZATION/compilingTool" 42 bytes [built] [code generated]
modules by path (...OTHER LOGS... ) 
external "react" 42 bytes [built] [code generated]
external "react-dom" 42 bytes [built] [code generated]
webpack 5.48.0 compiled successfully in 17732 ms
No issues found.
4

1 回答 1

1

这可以通过传入orgPackagesAsExternal: falsesingle-spa webpack 配置来实现，在您的情况下名为singleSpaDefaults. 根据create-single-spa 文档，

这会改变以 @your-org-name 开头的包名称是否被视为 webpack 外部。默认为真。

然后，您将需要：

  • 枚举要标记为外部的包
  • 提供执行此操作的功能（您已在问题中指出）

然后像往常一样将其与 single-spa 的配置合并。因为这对于每个微前端都会变得冗长和烦人，因此请考虑在您发布的特定于您的公司的基础配置中执行此操作，然后每个 mfe 都需要使用这些配置。

于 2021-08-05T15:14:25.963 回答