({\n containerRef: null,\n microApp: null,\n });\n\n const loadApp = () => {\n if (current.containerRef) {\n current.microApp = loadMicroApp({\n ...props.microAppConfig,\n container: current.containerRef,\n }, {\n sandbox: {\n experimentalStyleIsolation: true,\n },\n });\n }\n };\n\n useEffect(() => {\n loadApp();\n\n return () => {\n current.microApp?.unmount();\n };\n }, []);\n\n useEffect(() => {\n if (current.microApp && current.microApp.update) {\n current.microApp.update({});\n }\n }, []);\n\n\n useImperativeHandle(microAppRef, () => {\n return {\n appStore: current,\n };\n });\n\n return (\n {\n current.containerRef = ref;\n }} />\n );\n});\n"
},
{
"path": "packages/core/src/common/constants.ts",
"content": "export const JS_PREFIX = 'static/js';\nexport const CSS_PREFIX = 'static/css';\nexport const IMG_PREFIX = 'static/images';\nexport const FONT_PREFIX = 'static/fonts';\nexport const FILE_PREFIX = 'static/files';\n"
},
{
"path": "packages/core/src/common/paths.ts",
"content": "import * as path from 'path';\n\nexport const sourcePath = path.resolve(process.cwd(), 'src');\n\nexport const publicPath = path.resolve(process.cwd(), 'public');\n\nexport const appConfigPath = path.resolve(process.cwd(), 'app-config.ts');\n"
},
{
"path": "packages/core/src/index.ts",
"content": "export { MicroAppConfig } from './node/micro-fe-app-config';\nexport { MicroAppWebpackConfigOptions } from './node/get-micro-app-webpack-config';\nexport { webpackBuild, webpackPromisify, webpackServe } from './node/webpack-command';\nexport { getMicroAppConfigManager } from './node/micro-fe-app-config';\nexport { generateMfExposeDeclaration } from './node/generate-mf-expose-declaration';\nexport { bundleTsDeclaration } from './node/bundle-ts-declaration';\nexport { generateDtsBundle } from 'dts-bundle-generator';\nexport { bundleModuleDeclare } from './node/bundle-module-declare';\nexport { emitMfExposeDeclaration } from './node/emit-mf-expose-declaration';\nexport { EmitMfExposeWebpackPlugin } from './node/emit-mf-expose-webpack-plugin';\nexport { getMicroAppWebpackConfig } from './node/get-micro-app-webpack-config';\nexport { getModuleFederationExposes } from './node/get-module-federation-exposes';\n"
},
{
"path": "packages/core/src/node/add-entry-attribute-webpack-plugin.ts",
"content": "import webpack from 'webpack';\nimport { Hooks } from 'html-webpack-plugin';\n\n/**\n * 向 html-webpack-plugin 导出的 HTML 模板 script 添加属性\n *\n * @author yuzhanglong\n * @date 2021-10-10 02:31:52\n */\nexport class AddEntryAttributeWebpackPlugin {\n private readonly entryMatchCallback;\n\n constructor(matchCallback: (src: string) => boolean) {\n this.entryMatchCallback = matchCallback;\n }\n\n apply(compiler: webpack.Compiler) {\n compiler.hooks.compilation.tap('AddEntryAttributeWebpackPlugin', (compilation) => {\n // 通过最终的 webpack 配置的 plugins 属性，根据插件的 constructor.name 拿到 html-webpack-plugin 实例\n const HtmlWebpackPluginInstance: any = compiler.options.plugins\n .map(({ constructor }) => constructor)\n .find(constructor => constructor && constructor.name === 'HtmlWebpackPlugin');\n\n\n if (HtmlWebpackPluginInstance) {\n // 获取 html-webpack-plugin 所有的 hooks\n const hooks = HtmlWebpackPluginInstance.getHooks(compilation) as Hooks;\n\n // 在插入标签之前做些什么\n hooks.alterAssetTagGroups.tap(\n 'AddEntryAttributeWebpackPlugin', (data) => {\n // 拿到所有的标签，如果是 script 标签，并且满足我们的匹配函数，则将其 attributes['entry'] 设为 true\n data.headTags.forEach(tag => {\n if (tag.tagName === 'script' && this.entryMatchCallback(tag.attributes?.src)) {\n // eslint-disable-next-line no-param-reassign\n tag.attributes.entry = true;\n }\n });\n return data;\n },\n );\n }\n });\n }\n}\n"
},
{
"path": "packages/core/src/node/bundle-module-declare.ts",
"content": "import { ModuleDeclarationKind, Project, SyntaxKind } from 'ts-morph';\n\nexport interface FileOptions {\n // 声明文件路径\n path: string;\n\n // 声明文件模块名称\n moduleName: string;\n}\n\n/**\n * 打包类型定义文件\n *\n * @author yuzhanglong\n * @date 2021-10-03 19:28:19\n * @param fileOptions 文件相关选项，可参考上面的类型定义\n */\nexport const bundleModuleDeclare = (fileOptions: FileOptions[]) => {\n const project = new Project();\n\n const content = [];\n\n fileOptions.forEach(file => {\n // 添加源代码\n const source = project.addSourceFileAtPath(file.path);\n\n // 遍历每一个子节点，如果是 SyntaxKind.DeclareKeyword（即 declare 关键词），进行文本替换\n source.forEachDescendant(item => {\n if (item.getKind() === SyntaxKind.DeclareKeyword) {\n // 删除即可, 需要判断是不是第一个节点，否则会报异常\n item.replaceWithText(item.isFirstNodeOnLine() ? 'export' : '');\n }\n });\n\n // 备份根节点\n const baseStatements = source.getStructure().statements;\n\n // 移除现存的所有节点\n source.getStatements().forEach(res => res.remove());\n\n // 创建一个 module declaration，将上面备份的根节点插入之\n source.addModule({\n name: `'${file.moduleName}'`,\n declarationKind: ModuleDeclarationKind.Module,\n hasDeclareKeyword: true,\n statements: baseStatements,\n });\n\n // 格式化代码\n source.formatText();\n\n // 补充一些注释\n content.push(`// module name: ${file.moduleName}\\n\\n`);\n content.push(source.getText());\n content.push('\\n');\n });\n\n return content.join('');\n};\n"
},
{
"path": "packages/core/src/node/bundle-ts-declaration.ts",
"content": "import * as os from 'os';\nimport * as path from 'path';\nimport { runCommand } from '@attachments/utils/lib/node/run-command';\n\nexport interface BundleFileConfig {\n // 入口文件路径\n entryPath: string;\n\n // 输出路径\n outputPath: string;\n}\n\n/**\n * 封装 dts-bundle-generator\n *\n * @author yuzhanglong\n * @date 2021-10-01 20:09:23\n * @param entries 一个数组，详见 BundleFileConfig\n * @see BundleFileConfig\n */\nexport const bundleTsDeclaration = async (\n entries: BundleFileConfig[],\n) => {\n // 最大并行工作数目为 cpu 核心数 - 1\n const maxWorkSize = os.cpus().length - 1;\n\n while (entries.length > 0) {\n const runningItems = entries.splice(0, maxWorkSize);\n await Promise.all(runningItems.map((item) => {\n const { entryPath, outputPath } = item;\n return runCommand(\n path.resolve(\n require.resolve('dts-bundle-generator'),\n '../bin/dts-bundle-generator.js',\n ), [\n entryPath,\n '--out-file',\n outputPath,\n '--project',\n path.resolve(process.cwd(), 'tsconfig.json'),\n '--no-banner',\n ]);\n }));\n }\n};\n"
},
{
"path": "packages/core/src/node/emit-mf-expose-declaration.ts",
"content": "import * as path from 'path';\nimport * as fs from 'fs-extra';\nimport { MicroAppConfig } from './micro-fe-app-config';\nimport { BundleFileConfig, bundleTsDeclaration } from './bundle-ts-declaration';\nimport { bundleModuleDeclare } from './bundle-module-declare';\n\n/**\n * 供公共组件的提供者使用，用来将相应的类型定义写入某个文件目录下\n * 我们可以在 webpack 写入文件之后 hook 到相应的生命周期中追加内容\n *\n * @author yuzhanglong\n * @date 2021-10-02 14:51:10\n * @param appConfig app 配置\n * @param baseUrl 写入的根路径\n */\nexport const emitMfExposeDeclaration = async (appConfig: MicroAppConfig, baseUrl: string) => {\n // 增加临时缓存文件，用来打包每个小 bundle\n await fs.ensureDir(path.resolve(baseUrl, '.cache'));\n\n const entries: (BundleFileConfig & { name: string })[] = [];\n\n\n for (const expose of appConfig.exposes) {\n // 只处理 module 类型\n if (typeof expose === 'object' && expose.type !== 'package') {\n entries.push({\n name: expose.name,\n entryPath: expose.path,\n outputPath: path.resolve(baseUrl, '.cache', `${expose.name}.d.ts`),\n });\n }\n }\n\n // 并行打包\n await bundleTsDeclaration(entries.slice());\n\n // 合并上面的所有小 bundle\n const content = bundleModuleDeclare(\n entries.map(res => {\n return {\n path: res.outputPath,\n moduleName: `${appConfig.name}/${res.name}`,\n };\n }),\n );\n\n await fs.writeFile(path.resolve(baseUrl, 'exposes.d.ts'), content);\n await fs.remove(path.resolve(baseUrl, '.cache'));\n};\n"
},
{
"path": "packages/core/src/node/emit-mf-expose-webpack-plugin.ts",
"content": "import webpack from 'webpack';\nimport * as path from 'path';\nimport { MicroAppConfig } from './micro-fe-app-config';\nimport { emitMfExposeDeclaration } from './emit-mf-expose-declaration';\n\n\ninterface EmitMfExposeWebpackPluginOptions {\n // app 配置\n appConfig: MicroAppConfig;\n\n // 输出内容的基础路径，如果没有指定则为 compilation.compiler.outputPath\n // 由于 serve 模式 build 模式输出位置不同，这个选项是有必要的，降低开发成本\n outputBasePath?: string;\n}\n\n/**\n * 防抖函数\n *\n * @author yuzhanglong\n * @date 2021-12-01 00:51:19\n */\nexport const debounce = any>(fn: T, timeout: number = 0) => {\n if (typeof fn !== 'function') {\n throw new Error('fn should be a function');\n }\n\n let timer = null;\n return function(...args: Parameters) {\n if (timer) {\n clearTimeout(timer);\n }\n\n timer = setTimeout(() => {\n fn.call(this, ...args);\n }, timeout);\n };\n};\n\n/**\n * 向 build 打包产物注入类型定义的 webpack-plugin\n *\n * @author yuzhanglong\n * @date 2021-10-03 19:31:02\n */\nexport class EmitMfExposeWebpackPlugin {\n private readonly config: EmitMfExposeWebpackPluginOptions;\n\n constructor(config: EmitMfExposeWebpackPluginOptions) {\n this.config = config;\n }\n\n apply(compiler: webpack.Compiler) {\n const { appConfig, outputBasePath } = this.config;\n\n const handler = debounce(async (compilation: webpack.Compilation) => {\n try {\n // 用 try catch 包裹一下防止 webpack-dev-server 热更新过程中偶发的强制 exit 现象\n if (appConfig) {\n // 拿到本项目的 outputPath\n const { outputPath } = compilation.compiler;\n // 生成相关目录\n const target = path.resolve(outputBasePath ?? outputPath, 'mf-expose-types');\n console.log('[mf-lite] compiling shared remote module declarations...');\n\n // 基于用户的配置 appConfig 生成类型定义\n await emitMfExposeDeclaration(appConfig, target);\n }\n } catch (e) {\n console.log(e);\n }\n }, 1500);\n\n // afterEmit 生命周期的时机：输出 asset 到 output 目录之后\n // 实践证明，它不会阻塞 webpack dev-server 的流程，不会影响开发体验。\n compiler.hooks.afterEmit.tap('EmitMfExposeWebpackPlugin', handler);\n\n // TODO: 使用文件 hash 进行缓存，避免相同的内容重复打包，可以参考下面的的注释 DEMO\n // compiler.hooks.thisCompilation.tap('EmitMfExposeWebpackPlugin', (compilation) => {\n // compilation.hooks.processAssets.tapAsync({\n // name: 'EmitMfExposeWebpackPlugin',\n // stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,\n // }, (compilationAssets, callback) => {\n // // 首先收集所有的文件，进行 content hash 值比对\n // // @ts-ignore\n // const data = [...compilation.modules].filter(res => res.request && res.request.includes('shared-utils.ts'))[0];\n // console.log(data.buildInfo);\n // return callback();\n // });\n // });\n }\n}\n"
},
{
"path": "packages/core/src/node/generate-mf-expose-declaration.ts",
"content": "/**\n * 生成 module federation expose 声明，一般用于消费者调用\n *\n * @author yuzhanglong\n * @date 2021-10-02 14:53:24\n */\nimport axios from 'axios';\nimport * as url from 'url';\nimport * as fs from 'fs-extra';\nimport * as path from 'path';\nimport { MicroAppConfig } from './micro-fe-app-config';\nimport { sourcePath } from '../common/paths';\n\nexport const generateMfExposeDeclaration = async (appConfig: MicroAppConfig) => {\n const declareTypeRoot = path.resolve(sourcePath, 'types', 'mf-remotes');\n await fs.ensureDir(declareTypeRoot);\n\n for (const { name, url: remoteUrl } of appConfig.remotes) {\n const targetFileName = `${name}-exposes.d.ts`;\n // example: https://base-40kkvlqeq-yzl.vercel.app/mf-expose-types/exposes.d.ts\n const remote = url.resolve(remoteUrl, 'mf-expose-types/exposes.d.ts');\n console.log(`fetching remotes types declarations from ${remote}...`);\n const declarations = await axios.get(remote);\n await fs.writeFile(path.resolve(declareTypeRoot, targetFileName), declarations.data);\n }\n\n console.log('Done!');\n};\n"
},
{
"path": "packages/core/src/node/get-micro-app-webpack-config.ts",
"content": "import webpack, { NormalModuleReplacementPlugin } from 'webpack';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';\nimport MiniCssExtractPlugin from 'mini-css-extract-plugin';\nimport moment from 'moment';\nimport * as path from 'path';\nimport { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';\nimport merge from 'webpack-merge';\nimport { publicPath as assetPublicPath, sourcePath } from '../common/paths';\nimport { CSS_PREFIX, FILE_PREFIX, JS_PREFIX } from '../common/constants';\nimport { getMicroAppConfigManager, MicroAppConfig } from './micro-fe-app-config';\nimport { getModuleFederationExposes } from './get-module-federation-exposes';\nimport { EmitMfExposeWebpackPlugin } from './emit-mf-expose-webpack-plugin';\nimport { AddEntryAttributeWebpackPlugin } from './add-entry-attribute-webpack-plugin';\n\nconst TerserWebpackPlugin = require('terser-webpack-plugin');\n\nconst { ModuleFederationPlugin } = require('webpack').container;\n\nexport interface MicroAppWebpackConfigOptions {\n // 项目类型，base: 基座， micro-app 微应用\n type: 'base-app' | 'micro-app';\n\n // 项目运行的端口\n port: number;\n\n // 微应用配置\n appConfig: MicroAppConfig;\n\n // 是否在构建环境\n isBuildMode: boolean;\n\n // 开启分析模式\n isAnalyzeMode?: boolean;\n}\n\n/**\n * 基座或者微应用的 webpack 配置封装\n *\n * @author yuzhanglong\n * @date 2021-10-03 19:32:18\n * @param options 相关配置选项，可参考上面的类型定义\n * @see MicroAppWebpackConfigOptions\n */\nexport const getMicroAppWebpackConfig = (options: MicroAppWebpackConfigOptions) => {\n const { port, appConfig, isBuildMode, isAnalyzeMode } = options;\n const websocketPath = `ws://localhost:${port.toString()}/ws`;\n\n // 是否为生产环境\n const isProductionEnvironment = process.env.NODE_ENV === 'production';\n\n // 微应用工具管理类\n const microAppConfigManager = getMicroAppConfigManager(appConfig);\n\n // 样式默认配置\n const baseStyleConfigRules = [\n isProductionEnvironment ? MiniCssExtractPlugin.loader : require.resolve('style-loader'),\n require.resolve('css-loader'),\n {\n loader: require.resolve('postcss-loader'),\n options: {\n postcssOptions: {\n plugins: [\n require('autoprefixer'),\n ],\n },\n },\n },\n ].filter(Boolean);\n\n // noinspection UnnecessaryLocalVariableJS\n const config = {\n mode: isProductionEnvironment ? 'production' : 'development',\n\n // 打包入口，默认为 index.tsx\n entry: path.resolve(sourcePath, 'index.tsx'),\n\n // 在生产环境下默认不会打包 sourcemap (但有时候可能还是有必要的，比如接入监控平台)\n devtool: isProductionEnvironment ? false : 'source-map',\n\n // 开启打包文件缓存，第二次打开可以节约大量的时间\n // 在 build 模式下不要打开，否则会报错\n cache: isBuildMode ? false : {\n type: 'filesystem',\n },\n\n // 代码优化配置\n optimization: {\n // 这里保证了基座热更新的实现\n runtimeChunk: 'single',\n minimize: isProductionEnvironment,\n minimizer: [\n new TerserWebpackPlugin({\n terserOptions: {\n format: {\n comments: false,\n },\n },\n extractComments: false,\n }),\n ],\n // 一些常见依赖的代码分割\n splitChunks: {\n chunks: 'all',\n cacheGroups: {\n thirdVendors: {\n name: 'initial-third-vendors',\n test: /moment|lodash|mobx|qiankun/,\n priority: 20,\n enforce: true,\n },\n reactVendors: {\n name: 'initial-react-vendors',\n test: /react\\/|react-dom\\/|react-router\\/|react-router-dom\\/|axios/,\n priority: 20,\n enforce: true,\n },\n uiComponents: {\n name: 'initial-ui-components-vendors',\n test: /antd/,\n priority: 20,\n enforce: true,\n },\n uiIcons: {\n name: 'initial-ui-icons-vendors',\n test: /@ant-design\\/icons/,\n priority: 20,\n enforce: true,\n },\n uiOthers: {\n name: 'initial-material-ui-others-vendors',\n test: /@ant-design\\/*/,\n priority: 10,\n enforce: true,\n },\n },\n },\n },\n\n // webpack dev-server\n // @ts-ignore\n devServer: {\n client: {\n webSocketURL: websocketPath,\n },\n static: {\n directory: assetPublicPath,\n watch: {\n ignored: (f: string) => {\n // 生成的类型定义不要监听，否则会引发全局的 reload 使 HMR 失去意义\n return f.endsWith('.d.ts');\n },\n },\n },\n allowedHosts: 'all',\n hot: true,\n port: port,\n historyApiFallback: true,\n headers: {\n 'Access-Control-Allow-Origin': '*',\n },\n },\n\n // 输出\n output: {\n // library 名称\n library: `${microAppConfigManager.config.name}`,\n\n // 输出的文件名称\n // 如果你要修改此内容，请看一下下面调用 html-webpack-plugin 代码的相关注释\n filename: isProductionEnvironment\n ? `${JS_PREFIX}/[name].[contenthash:8].bundle.js`\n : `${JS_PREFIX}/[name].bundle.js`,\n\n // 输出文件名称，和 fileName 不同，这里的输出文件为非初始（non-initial）文件，例如我们熟悉的路由懒加载\n chunkFilename: isProductionEnvironment\n ? `${JS_PREFIX}/[name].[contenthash:8].chunk.js`\n : `${JS_PREFIX}/[name].chunk.js`,\n\n // asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录\n assetModuleFilename: `${FILE_PREFIX}/[name].[hash][ext]`,\n\n // 公共路径\n publicPath: microAppConfigManager.config.url,\n\n // 输出 umd 类型的 bundle\n libraryTarget: 'umd',\n },\n\n\n plugins: [\n // NormalModuleReplacementPlugin 需要我们传入一个回调\n // 我们可以在这里将默认的公共的 package 级别依赖重定向到 remote(即共享模块)\n // 这个回调已被封装成公共方法，它会从你的 app-config 目录下读取 remote 字段，从中找到匹配的 sharedLibraries\n new NormalModuleReplacementPlugin(\n /(.*)/,\n microAppConfigManager.getNormalModuleReplacementPluginCallBack(),\n ),\n\n // 输出 html 入口文件\n new HtmlWebpackPlugin({\n template: path.resolve(assetPublicPath, 'index.html'),\n }),\n\n // qiankun 底层依赖的 import-html-entry 会取所有 scripts 里面排在最后的 script 作为 entry。\n // 具体代码可查看：https://github.com/kuitos/import-html-entry/blob/master/src/index.js#L321\n // 但是我们通过 html-webpack-plugin 导出的 HTML，一般情况下是 main 在最后，但是在 webpack module federation 中，会生成一个额外的 entry 排在 main 的后面。\n // 从而导致拿不到 main 入口的生命周期函数, 我们可以向 script 标签加入 entry 属性解决这个问题\n new AddEntryAttributeWebpackPlugin((src => {\n return !!(src.match(/main\\.(.*)\\.bundle.js$/) || src.match('main.bundle.js'));\n })),\n\n // webpack module federation 的插件，其配置基于 app-config 封装，一般无需改动\n new ModuleFederationPlugin({\n name: microAppConfigManager.config.name,\n filename: 'module-federation-entry.js',\n remotes: microAppConfigManager.getModuleFederationRemotes(),\n exposes: getModuleFederationExposes(microAppConfigManager.config.exposes),\n }),\n\n // 非生产环境下启动 react 热更新插件\n // 注意，如果将代码打包到测试服务器上(非生产环境)，那么也应该开启这个插件以向主应用插入相关胶水代码\n // 由于子应用的 react 是由主应用 share 的，子应用如果需要热更新必须依赖这些胶水代码\n // 另外这需要和 src/utils 目录下的 init-common 配合使用，开发者无需额外处理\n !isProductionEnvironment && new ReactRefreshWebpackPlugin({\n overlay: {\n sockPath: websocketPath,\n },\n }),\n\n // css 压缩\n isProductionEnvironment && new MiniCssExtractPlugin({\n filename: `${CSS_PREFIX}/${isProductionEnvironment ? '[name].[contenthash].css' : '[name].css'}`,\n chunkFilename: `${CSS_PREFIX}/${isProductionEnvironment ? '[id].[contenthash].css' : '[id].css'}`,\n ignoreOrder: true,\n }),\n\n // 定义一些全局的变量，例如版本、打包时间、环境信息\n new webpack.DefinePlugin({\n // eslint-disable-next-line import/no-dynamic-require\n __APP_VERSION__: JSON.stringify(require(path.resolve(process.cwd(), 'package.json')).version),\n __MODE__: JSON.stringify(process.env.NODE_ENV?.toUpperCase()),\n __BUILD_TIME__: JSON.stringify(moment().format('MMMM Do YYYY, h:mm:ss A')),\n }),\n\n // Moment.js 默认情况下它会打包所有的 locale 文件\n // 我们需要用户选择导入特定的区域设置\n new webpack.IgnorePlugin({\n resourceRegExp: /^\\.\\/locale$/,\n contextRegExp: /moment$/,\n }),\n\n // 写入共享模块（非 package）的类型定义\n new EmitMfExposeWebpackPlugin({\n appConfig: microAppConfigManager.config,\n outputBasePath: isBuildMode ? undefined : assetPublicPath,\n }),\n\n isAnalyzeMode && new BundleAnalyzerPlugin(),\n ].filter(Boolean),\n\n // 解析配置\n resolve: {\n // 扩展名省略\n extensions: ['.ts', '.tsx', '.js', '.jsx'],\n\n // 实用 alias\n alias: {\n '~src': sourcePath,\n },\n },\n\n // 模块解析\n module: {\n rules: [\n {\n oneOf: [\n // babel 相关\n {\n test: [/\\.[jt]sx?$/],\n include: [sourcePath],\n use: {\n loader: require.resolve('babel-loader'),\n options: {\n presets: [\n [\n require.resolve('@babel/preset-env'),\n ],\n [\n require.resolve('@babel/preset-react'),\n {\n runtime: 'automatic',\n },\n ],\n [\n require.resolve('@babel/preset-typescript'),\n ],\n ],\n plugins: [\n [\n require.resolve('@babel/plugin-proposal-decorators'),\n {\n legacy: true,\n },\n ],\n [require.resolve('@babel/plugin-transform-runtime')],\n ].filter(Boolean),\n },\n },\n },\n // css 预处理相关 css 和 less\n {\n test: [/\\.(le|c)ss$/],\n use: [\n ...baseStyleConfigRules,\n {\n loader: require.resolve('less-loader'),\n options: {\n lessOptions: {\n javascriptEnabled: true,\n },\n },\n },\n ],\n },\n // css 预处理相关 sass\n {\n test: [/\\.s[ac]ss$/],\n use: [\n ...baseStyleConfigRules,\n {\n loader: require.resolve('sass-loader'),\n },\n ],\n },\n // 其它内容全部以 asset/resource 输出\n {\n exclude: [/^$/, /\\.(js|mjs|jsx|ts|tsx)$/, /\\.html$/, /\\.json$/],\n type: 'asset/resource',\n },\n ],\n },\n ],\n },\n };\n\n // 合并用户自定义的 webpack 配置\n const additionalConfig = microAppConfigManager.config.webpackConfig;\n if (typeof additionalConfig === 'function') {\n // 用户可以二次修改\n additionalConfig(config as webpack.Configuration);\n return config;\n }\n\n // @ts-ignore\n return merge(config, additionalConfig || {});\n};\n"
},
{
"path": "packages/core/src/node/get-module-federation-exposes.ts",
"content": "/**\n * File: get-mf-exposes.ts\n * Description: 根据配置的目录（src/externals 下）, 生成 webpack module federation 配置\n * Created: 2021-08-29 13:39:40\n * Author: yuzhanglong\n * Email: yuzl1123@163.com\n */\n\nimport { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve';\nimport * as fs from 'fs';\n\ntype MfExposesModule = string | {\n name: string;\n path: string;\n}\n\nconst myResolver = ResolverFactory.createResolver({\n fileSystem: new CachedInputFileSystem(fs, 4000),\n conditionNames: ['node'],\n extensions: ['.js', '.json', '.node'],\n useSyncFileSystemCalls: true,\n mainFields: ['esm', 'module', 'main'],\n});\n\nexport function getModuleFederationExposes(modules: MfExposesModule[]) {\n const exposes: Record = {};\n for (const module of modules) {\n if (typeof module === 'string') {\n const key = `./${module}`;\n\n const resolveResult = myResolver.resolveSync({}, process.cwd(), module);\n\n if (typeof resolveResult !== 'string') {\n throw new Error(`resolve error: ${module}`);\n }\n\n exposes[key] = resolveResult;\n } else if (typeof module === 'object') {\n exposes[`./${module.name}`] = module.path;\n }\n }\n return exposes;\n}\n"
},
{
"path": "packages/core/src/node/micro-fe-app-config.ts",
"content": "import webpack from 'webpack';\n\ntype SharedLibraryExpose = string | {\n name: string;\n path: string;\n type?: 'package' | 'module'\n};\n\ntype SharedLibrary = string | {\n name: string;\n type?: 'package' | 'module'\n};\n\nexport interface MicroAppConfig {\n name: string;\n url: string;\n remotes: {\n name: string;\n url: string;\n sharedLibraries?: SharedLibrary[]\n }[];\n exposes: SharedLibraryExpose[];\n webpackConfig?: Partial | ((config: webpack.Configuration) => void);\n}\n\n/**\n * 基于 micro app config 生成目录\n *\n * @author yuzhanglong\n * @date 2021-09-28 00:40:39\n * @return object 一个对象, key 表示远程应用的名称，value 表示其入口 url\n */\nexport const getModuleFederationRemotes = (microAppConfig: MicroAppConfig) => {\n const remotes: Record = {};\n\n // example: 'base_app': `base_app@https://base-yzl.vercel.app/base_app_entry.js`,\n for (const remote of microAppConfig.remotes) {\n remotes[remote.name] = `${remote.name}@${remote.url.endsWith('/') ? remote.url : `${remote.url}/`}module-federation-entry.js`;\n }\n return remotes;\n};\n\n/**\n * 获取 share library 的导入替换回调函数\n *\n * 基座暴露一些公共库，我们称为 share library，我们通过 NormalModuleReplacementPlugin 将所有的公共依赖导向相应的 app\n *\n * @author yuzhanglong\n * @date 2021-09-28 00:47:33\n */\nexport const getNormalModuleReplacementPluginCallBack = (microAppConfig: MicroAppConfig) => {\n return (v: { request: string }) => {\n // 寻找相应的 request，例如我们要重定向 react，那么我们要从所有的 remotes 中找到第一个其 shareLibrary 中有 react 的远程模块\n const externalRemoteApp = microAppConfig.remotes\n .find(res => {\n if (!res.sharedLibraries) {\n return false;\n }\n\n return res.sharedLibraries\n .some(i => {\n // 如果直接是 string 类型表示是一个 package\n if (typeof i === 'string') {\n return i === v.request;\n }\n\n return i.type === 'package' && i.name === v.request;\n });\n });\n if (externalRemoteApp) {\n // eslint-disable-next-line no-param-reassign\n v.request = `${externalRemoteApp.name}/${v.request}`;\n }\n };\n};\n\n/**\n * 初始化全局 manager 方便调用\n *\n * @author yuzhanglong\n * @date 2021-09-28 00:53:32\n */\nexport const getMicroAppConfigManager = (microAppConfig: MicroAppConfig) => {\n return {\n getNormalModuleReplacementPluginCallBack: () => getNormalModuleReplacementPluginCallBack(microAppConfig),\n getModuleFederationRemotes: () => getModuleFederationRemotes(microAppConfig),\n config: microAppConfig,\n };\n};\n\n\n"
},
{
"path": "packages/core/src/node/webpack-command.ts",
"content": "import webpack from 'webpack';\nimport WebpackDevServer from 'webpack-dev-server';\n\nexport const webpackPromisify = (config: Record) => {\n return new Promise((resolve, reject) => {\n webpack(config, (err: any, state) => {\n if (err) {\n console.error(err.stack || err);\n if (err.details) {\n console.error(err.details);\n }\n reject();\n }\n\n const info = state.toJson();\n\n if (state.hasErrors()) {\n console.error(info.errors);\n reject();\n }\n\n if (state.hasWarnings()) {\n console.warn(info.warnings);\n reject();\n }\n\n resolve(true);\n });\n });\n};\n\nexport const webpackBuild = async (config: Record) => {\n await webpackPromisify(config);\n};\n\n\nexport const webpackServe = async (config: Record) => {\n const compiler = webpack(config);\n\n const devServerOptions = {\n ...config.devServer,\n };\n\n // @ts-ignore\n const server = new WebpackDevServer(devServerOptions, compiler);\n\n server.startCallback(() => {\n console.log('webpack dev server is running...');\n });\n};\n"
},
{
"path": "packages/core/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"lib\",\n \"rootDir\": \"./src\",\n \"jsx\": \"react\"\n },\n \"include\": [\n \"src/**/*\"\n ]\n}\n"
},
{
"path": "packages/proxy/README.md",
"content": "This project has moved [here](https://github.com/yuzhanglong/attachments/tree/main/packages/proxy)\n\n\n"
},
{
"path": "pnpm-workspace.yaml",
"content": "packages:\n - 'packages/*'\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"module\": \"CommonJS\",\n \"declaration\": true,\n \"moduleResolution\": \"Node\",\n \"resolveJsonModule\": true,\n \"types\": [\n \"jest\",\n \"node\"\n ],\n \"emitDecoratorMetadata\": true,\n \"sourceMap\": true,\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"isolatedModules\": false,\n \"experimentalDecorators\": true,\n \"jsx\": \"preserve\",\n \"downlevelIteration\": true\n }\n}\n"
}
]
![](\"https://user-images.githubusercontent.com/56540811/137176565-c6f240c2-73ee-4b9d-bc18-11b29e4512a4.png\")
\n\n