如何避免与webpack(和single-spa)在同一范围内的一些项目的外部设置

问题:

如何(是否可能)配置webpack(single-spa)，使一些包(项目)在(@ organization)外部和其他内部(不是外部)?

项目信息:

我们正在使用webpack构建一个单spa应用程序，并使用Github npm register(和Github actions)。所有的微前端都是Github中的项目，其中一些是util/helper/provider项目，它们被webpack编译为外部项目。

其中一些是用微前端编译的(不能是外部的)。)

似乎当webpack看到组织范围下的一个项目为外部时，它将该范围下的所有包设置为外部!

我们可以从日志中看到"CompilingTool"也将编译为外部，事件认为它不应该。

这些包在文件中设置为:

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

可以将单个spa的外部配置更改为其他内容，如:

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包:

"single-spa"^ 5.9.3"
"single-spa-layout"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-merge"^ 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 build的运行时控制台输出:(项目特定代码已被替换为虚拟代码!)

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-PROJECTpublic' 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.

这可以通过将orgPackagesAsExternal: false传递给single-spa webpack配置来实现，在您的示例中称为singleSpaDefaults。根据创建单个spa文档，

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

你需要:

列举要标记为外部
提供一个这样做的函数(你已经在你的问题中注意到)

然后像往常一样将其合并到single-spa的配置中。因为对于每个微前端来说，这样做可能会变得冗长和烦人，所以可以考虑在你发布的特定于你的公司的基本配置中这样做，然后每个微前端都需要使用它。

相关内容

最新更新

热门标签：