microup Boot

安装依赖

推荐安装 pnpm 作为包管理器，可以更快的升级我们的依赖包。

npm i -g pnpm
pnpm i

MAC系统设置权限

chmod -R 777 node_modules

启动

pnpm run start

简介

microup 基础的 cli 工具包，负责对master、front、app包的打包，对这些包的js，css文件进行压缩与编译工作，最终生成微前端服务的镜像。

这个包基于 webpack5 模块联邦开发，共享 boot 与目标包 dependencies 中的依赖，公开目标包内注册的动态远程容器组件，共其他 remote 模块使用。

负责目标包的基础路由解析，通过一级路由代理到不同 remote 模块，开发时也可以指定访问线上或本地其他 remote 模块。

负责管理整个项目的一些依赖包，比如 react，mobx 等包都会注册在 boot 的 dependencies 中。

配置

.env

在使用boot打包或者启动项目时，可以在.env中配常量，这些常量将最终写入window._env_变量中，可全局访问。

使用这些常量：

import {getEnv} from '@microup/utils';
const STATIC_URL = getEnv('STATIC_URL');

一些特殊常量：

API_HOST=https://***.***.com # 后端接口地址
STATIC_URL=http://192.168.**.***:9095 # 前端静态服务地址
****=http://localhost:**** # 本地调试时，连接本地的其他 remote 模块
# 例如：app2=http://localhost:9101

config.js

在使用 boot 打包或者启动项目时，可以在config.js中配置 boot 的一些配置。

{
  master: '@microup/master', // master 目录地址
  port: 9101, // 本地运行端口
  scopeName: 'app1', // 属性则是 remote 模块的 scope 标识
  titlename: 'microup', // 设置浏览器标签页标题，也可以在启动时传入 TITLE_NAME 设置标题（cross-env GENERATE_SOURCEMAP=true）
  favicon: 'favicon.jpeg', // 设置浏览器标签页图标
  routes: { // 配置项目一级路由对
    app1: './react/index'
  },
  theme: { // 注入全局样式变量
    'primary-color': '#2979FF',
  },
  htmlTemplate: require.resolve('@microup/master/lib/index.template.html') // 设置 html 模板文件的地址
  webpackConfig(config) { // 设置webpack的配置，例如设置别名
    config.resolve.alias = {
      ...config.resolve.alias || {},
      [packageName]: path.resolve('.'),
      '@': path.resolve('./src'),
    };
    return config;
  },

  isDev: true, // 设置是否以 development|production 模式打包或启动，在打包时也可以使用 --dev true 设置为 development 模式
  ///////////////下边属性不常用////////////
  src: 'react', // 组件主体代码对应目录
  lib: 'lib', // compile 打包对应目录名（一般固定lib）
  output: './dist',// dist 打包目录名字
  exposes: {}, // 对外公开远程模块
  babelConfig(config, mode, env) { // babel 配置钩子
    return config;
  },
  tmpDirPath: path.join(__dirname, '../tmp'), // tmp 文件地址
  devServerConfig: { // 本地运行时，服务器配置
    hot: true,
    historyApiFallback: true,
    host: 'localhost',
  },
  browsers: [ // 浏览器兼容配置
    'last 2 versions',
    'Firefox ESR',
    '> 1%',
    'ie >= 8',
    'iOS >= 8',
    'Android >= 4',
  ],
  isPx2rem: false // 是否开启rem 模式
}

routes

其中 routes 属性配置项目一级路由对应目录，每个模块中都需要有一个 scopeName 对应的一级路由，以便作为 remote 模块时可以做模块的路由入口。

例如本次案例中 scopeName 为 app1 ，则路由中也需要设置 app1 对应目录。

scopeName: "app1"
routes: { // 配置项目一级路由对
	app1: './react/index'
},

这里 app1 在 url 中可以被 http://:/#/app1/ 匹配，例如：被http://192.168.20.133:9091/#/a1/匹配。

scopeName

而 scopeName 属性则是 remote 模块的 scope 标识，当前模块作为 remote 模块时，被 host 模块引用可以使用 ExternalComponent 组件加载。

例如 app2 中使用 app1 的组件：

import {ExternalComponent} from '@microup/utils';

<ExternalComponent
   system={{
      scope: 'app1', module: 'App1EC',
   }}
/>

被引用组件 App1EC 则需要使用/* externalize: App1EC */注册在 app1 内：

import React from 'react';

export default function (props) {
  return (<div>app1-externalize-components</div>);
}
/* externalize: App1EC */

任意组件都可以写入/* externalize: App1EC */，写入后其他模块都可以使用 ExternalComponent 组件访问。

指令

boot 包常用指令有 pnpm run compile 和 pnpm run start:bin

compile

使用 gulp 打包 master 与 boot 包内文件到 lib 目录，这里只通过 babel 编译，不进行压缩操作。然后通过 npm publish 命令把 lib 目录打包发往私有库中。

start:bin

通过 webpack dev server 开启一个本地 http 服务示例，用于测试当前 boot 包。

根据 project.config.js 文件中路由配置开启这个服务示例。

boot 包内的服务示例写于 exampleMaster 中，该目录只在开发环境加载使用，执行 compile 时会过滤这个目录中的内容。线上环境则不在需要。

配置项 master: './src/exampleMaster' 作用是服务示例所用 master 文件的位置，master 负责全局状态管理，权限校验，路由重定向等功能。

配置项 routes 作用是一级路由与对应组件位置的描述

# 只是本地开发
routes: {
  a1: './src/exampleMaster/App1',
  a2: './src/exampleMaster/App2'
},

boot
|-bin # nodeJs 命令行实现方案
|-lib # 执行 compile 后生产的打包目录
|-src #
|  |--bin # webpack 配置目录
|  |--exampleMaster # 服务示例代码，用于测试 boot 包
|  |--store # boot 状态管理目录，仅用于 boot 内部
|  |--utils # 一些 boot 的全局方法
|  |--.env # 本地运行时服务参数配置
|  |--default.config.js # 默认 boot 配置，主要是外放的 webpack 一些配置
|  |--index.template.html # 本地运行时 html 模板
|-tmp # entry入口目录，打包时自动生成，加载 Master 组件
|-gulpfile.js # boot compile 指令运行内容，负责对 src 打包工作
|-project.config.js # 本地运行 start:bin 时，根据这个配置启动一个 host 模块

bin目录

该目录存储 boot 作为 cli 可运行的指令，有 micro-up-boot start、micro-up-boot dist、micro-up-boot compile、micro-up-boot compile。

stert

开启一个开发环境，主要用于前端开发时使用。

参数有-c|--config设置 boot 配置文件目录。

参数有-s|--src设置跟组件对应目录，默认目录是react，src 配置项优先获取指令上的变量参数，如果没有设置，则会获取 config.js 文件中设置的 src 项。

参数有-l|--lib设置 boot 打包后的目录名，通常无需设置

例如：app1设置开启本地运行的开发环境 host 模块

"scripts": {
	"start": "micro-up-boot start --config ./react/config.js",
},

dist

用于app、front包的打包，该指令不用于 master、boot包打包。

基本参数同上，在此基础多出-d|--dev参数，在生产环境打包无需开启，如果需要测试或打开发环境代码包时设置为 treu 即可。

"scripts": {
	"dist:dev": "micro-up-boot dist --config ./react/config.js --dev true"
},

compile

目前仅用于 master 打包，打出 master 的lib 包。

prePublish

用于修改 package.json 中的版本属性。

使其改为这样的示例格式0.0.1-dev-0.0.1.20230810182951。

后边 20230810182951 这串数字是当前时间精确到秒，保证每次打包都会有新的版本产生，部署时可以根据排序优先选择最大时间的对应包；并且 master 包引用时可以使用范围定义："@microup/boot": ">=1.0.0-main-1.0.0 <1.0.0-main-1.0.1"保证每次pnpm update @microup/boot都可以下载到最新的boot包。

注：该指令目前已经废弃，这个功能已在ci的脚本中实现。

src目录

boot 包主要代码，主要对webpack的配置与开发。

生成tmp

tmp 目录由 Nunjucks 模板文件自动生成，是 webpack 入口，作用是加载 Master 组件，以及分发 routes 路由与访问 remote 模块。

在src/bin/common 目录下generateApp.js、generateEntry.js、generateEnvironmentVariable.js、generateRoute.js文件代码通过 Nunjucks 模板引擎，根据 nunjucks 中的模板生成对应的 jsx 文件，放于 tmp 目录中。

前端模块，在执行 dist 和 stert 指令时，tmp 在 node_modules/@microup/boot 目录下都会生成。

路由处理详情，请查看 master 包内文档。

加载 Master 组件

webpack加载第一个文件是 tmp/bootstrap.index.js 它只有一句代码import('./{{ bootstrap }}') 起作用是解决Shared module is not available for eager consumption错误以及拆分出更大块的初始化代码。（详情参考）

然后在 tmp/app.index.js 中会渲染 Master组件。

{Master ? <Master AutoRouter={AutoRouter}/> : <AutoRouter/>}

Master 组件根据 config.js 中配置的路径查找组件，通常都是指向'@microup/master'包，boot 包除外。

master: '@microup/master', // 非 boot
master: './src/exampleMaster', // boot

webpack配置

webpack 配置代码主要位于src/common/config/getWebpackCommonConfig.js中，主要处理： babel 对 js 代码编译与压缩、less 模块化与编译、ts配置注入与编译、全局样式变量注入、全局env数据注入、sourceMap、模块联邦这些工作。

babel js代码编译

babel 配置代码的文件位于src/bin/common/config/getBabelCommonConfig.js中。

目前babel 版本为 7；使用preset-env和preset-react预设；useBuiltIns 模式默认使用 entry ，在 app.nunjucks.jsx 中使用 import "core-js"全量引入 core-js；core-js 版本默认使用 3.29.1。

注：@babel/polyfill 已被弃用，交由core-js处理（详情参考）。

注：useBuiltIns 模式默认没有使用 usage ，为避免扩展其他包时 polyfill 失效，如切换 usage 模式，需要删掉 app.nunjucks.jsx 中的 import "core-js"。

less 模块化

webpack 配置中，使用 oneOf 匹配命名 .module.less 结尾与 .less 结尾的文件，根据命名中是否有 module 判断是否开启 modules 。

开启 less 模块化后，可以使用变量引入方式添加样式例如:

// index.module.less
.red {
  color: red;
}
// index.jsx
import classnames from 'classnames'
import styles from './index.module.less'
export default withRouter((props) => {
  return (
    <div>
      <div className={classnames(styles.red)}>master</div>
    </div>
  );
})

全局样式变量注入

样式变量通过 lessOptions.modifyVars 注入，如果需要js处理的动态样式变量也可以使用 @plugin

默认样式变量包括一些主题颜色与提示颜色，这个配置位于 src/default.config.js 中。

  theme: {
    'primary-color': '#2979FF',
    'bg-color': '#fff',
    'info-color': '#2979FF',
    'warning-color': '#FD7D23',
    'success-color': '#1AB335',
    'error-color': '#F34C4B',
    'border-color': 'fade(#CBD2DC, 50%)',
    'text-color': '#12274D',
    'heading-color': '#12274D',
    'disabled-text-color': 'fade(@text-color, 45%)',
    'disabled-bg-color': 'fade(#F2F3F5 , 60)',
  },

如需要在特定模块添加样式变量时，也可以在 host 模块启动前修改修改 config.js 文件，做 theme 的覆盖

const config = {
  master: '@microup/master',
  port: 9101,
  scopeName: 'app1',
  theme: { // 覆盖或添加当前模块的样式变量
  	'text-color2': '#12274D',
  },
  routes: {
    app1: './react/index'
  },
  htmlTemplate: require.resolve('@microup/master/lib/index.template.html')
};

样式变量在引用时，可以直接使用 @ 引入：

.red {
  color: @primary-color;
}

env数据注入

env数据处理的代码位置位于 src/bin/common/generateEnvironmentVariable.js 中，获取当前模块 .env 文件数据与 boot 包中 .default.env 文件据做融合，生成 env-config.js 文件，运行后注入到 window._env_ 中。

// generateEnvironmentVariable.js 中
const combineEnv = {
	NODE_ENV: JSON.stringify(env),
    ...defaultEnv.parsed,
	...customEnv.parsed,
};
fs.writeFileSync(
	envConfigPath,
	`window._env_ = ${JSON.stringify(combineEnv)};`,
);

// 生成的 env-config.js 文件
window._env_ = {"NODE_ENV":"\"development\"","API_HOST":"https://api.test.yqcloud.com","LOCAL":"true","TITLE_NAME":"micorUp","COOKIE_SERVER":"localhost:cookieServer","FILE_SERVER":"localhost:fileserver","STATIC_URL":"http://192.168.20.133:9095","app1":"http://localhost:9101"};

sourceMap

默认情况下运行 start 指令时开启 sourceMap，运行 dist 打包时关闭 sourceMap。如果需要手动设置开启，也可以传入 GENERATE_SOURCEMAP 变量开启

"scripts": {
	"dist:bin": "cross-env GENERATE_SOURCEMAP=true node bin/micro-up-boot dist --config ./project.config.js -s src"
}

alias

在 config.js 配置文件中可以设置别名。

webpackConfig(config) {
	config.resolve.alias = {
  		...config.resolve.alias || {},
  		[packageName]: path.resolve('.'),
  		'@': path.resolve('./src'),
	};
	return config;
},

别名设置后在 js 文件中使用

import styles2 from '@/exampleMaster/index.module.less'

别名设置后在 less 文件中使用，@ 前边需要加上 ~ 符号。

@import '~@/exampleMaster/admin.less';

模块联邦（Module Federation）

exposes 属性

可以允许 host 在运行时通过公开远程模块的方法来设置远程模块的 publicPath。（详情参考）

exposes 属性注入方式：

主要通过 getExternalizeExposes() 方法公开远程模块。

其次 config 注册的 routes 也将公开成为远程模块，这也是微前端实现 remote 模块间连接的重要步骤。

也可以在 config.js 中传入 exposes 属性，注入外放模块。

getExternalizeExposes 工作：

getExternalizeExposes 方式主要通过扫描文件中 externalize:** 注释（例如：/* externalize: App2EC */）注册外放组件。在每次打包 remote 模块时都会扫描模块内的 externalize 组件，注册后，在 host 模块中，可以使用 ExternalComponent 组件引入注册的组件。

// remote 模块中（app2）
export default function (props) {
  console.log(props)
  return (<div>app2-externalize-components</div>);
}
/* externalize: App2EC */

// host 模块中
<ExternalComponent
   system={{
      scope: 'app2', module: 'App2EC',
   }}
/>

@microup/boot

microup Boot

安装依赖

简介

配置

.env

config.js

指令

compile

start:bin

目录

bin目录

stert

dist

compile

prePublish

src目录

生成tmp

加载 Master 组件

webpack配置

babel js代码编译

less 模块化

全局样式变量注入

env数据注入

sourceMap

alias

模块联邦（Module Federation）

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@microup/boot

microup Boot

安装依赖

简介

配置

.env

config.js

指令

compile

start:bin

目录

bin目录

stert

dist

compile

prePublish

src目录

生成tmp

加载 Master 组件

webpack配置

babel js代码编译

less 模块化

全局样式变量注入

env数据注入

sourceMap

alias

模块联邦（Module Federation）

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads