微前端 ---- wujie-vue3 原理

前言

设置子应用

预加载

启动子应用

封装

1.创建文件

2.安装依赖

3.编写组件

4.配置打包规则

5.执行打包命令

swc技术

SWC

Babel

Babel VS SWC

更改使用 swc 解析

使用swc 完成 esm 模式（export--import）

发布到npm

更改package.json

创建npm账户

登录npm

切换npm源

发布到npm

前言

这个包其实是作者根据wujie 自行封装的我们也可以自己去封装一下

设置子应用

非必须，由于preloadApp和startApp参数重复，为了避免重复输入，可以通过setupApp来设置默认参数。

name: "唯一id",
url: "子应用地址",
el: "容器",

setupApp({ name: "唯一id", url: "子应用地址", exec: true, el: "容器", sync: true })

预加载

javascript

preloadApp({ name: "唯一id"});

启动子应用

javascript

startApp({ name: "唯一id" });

知道以上几个API的用法就可以简单封装一个无界的组件我们使用vue3 + webpack + swc 封装

封装

1.创建文件

index.ts 入口文件
type.ts类型文件
index.d.ts 类型声明文件

pnpm init  生成package.json
tsc --init 生成tsconfig.json
创建webpack.config.js

2.安装依赖

pnpm i wujie   
pnpm i vue -D   
pnpm i webpack-cli -D
pnpm i typescript -D 
pnpm i ts-loader  -D 
pnpm i webpack -D

3.编写组件

声明文件

// import { bus, preloadApp, destroyApp, setupApp } from "wujie";
import type { App } from 'vue';declare const WujieVue: {// bus: typeof bus;// setupApp: typeof setupApp;// preloadApp: typeof preloadApp;// destroyApp: typeof destroyApp;install: (app: App) => void
};export default WujieVue;

类型文件

import type { plugin } from 'wujie'
type lifecycle = (appWindow: Window) => any;
interface Props {/** 唯一性用户必须保证 */name: string;/** 需要渲染的url */url: string;/** 需要渲染的html, 如果用户已有则无需从url请求 */html?: string;/** 渲染的容器 */loading?: HTMLElement;/** 路由同步开关， false刷新无效，但是前进后退依然有效 */sync?: boolean;/** 子应用短路径替换，路由同步时生效 */prefix?: { [key: string]: string };/** 子应用保活模式，state不会丢失 */alive?: boolean;/** 注入给子应用的数据 */props?: { [key: string]: any };/** js采用fiber模式执行 */fiber?: boolean;/** 子应用采用降级iframe方案 */degrade?: boolean;/** 自定义运行iframe的属性 */attrs?: { [key: string]: any };/** 自定义降级渲染iframe的属性 */degradeAttrs?: { [key: string]: any };/** 代码替换钩子 */replace?: (codeText: string) => string;/** 自定义fetch，资源和接口 */fetch?: (input: RequestInfo, init?: RequestInit) => Promise<Response>;/** 子应插件 */plugins: Array<plugin>;/** 子应用生命周期 */beforeLoad?: lifecycle;/** 没有做生命周期改造的子应用不会调用 */beforeMount?: lifecycle;afterMount?: lifecycle;beforeUnmount?: lifecycle;afterUnmount?: lifecycle;/** 非保活应用不会调用 */activated?: lifecycle;deactivated?: lifecycle;
};export { Props }

组件封装

这段代码是一个Vue组件的封装，它使用了Vue 3的Composition API来定义组件。让我来解释一下它的功能和结构

首先，我们需要了解一下这个组件的功能。这个组件是一个封装了微前端框架wujie的Vue组件，它可以在Vue应用中加载其他独立的微前端应用。它接受一些props作为配置参数，包括组件的宽度、高度、名称、URL等。它还提供了一些生命周期钩子函数，用于在组件加载、卸载和切换时执行一些操作。

接下来，让我们来看一下这个组件的代码结构。

首先，我们引入了Vue的一些函数和类型，包括defineComponent、h、getCurrentInstance等。这些函数和类型将在后面的代码中使用。

然后，我们定义了一个名为wujie的组件，使用defineComponent函数来创建组件。在props选项中，我们定义了组件的props，包括宽度、高度、名称、URL等。其中，一些props的类型是复杂的，我们使用PropType来进行强制类型转换，以确保传入的props符合预期的类型。

在setup函数中，我们定义了组件的逻辑。首先，我们定义了一个init函数，用于初始化微前端应用。在这个函数中，我们使用startApp函数来启动微前端应用，传入一些配置参数，包括应用的名称、URL、加载元素等。

接下来，我们定义了一个handleEmit函数，用于处理事件的触发和参数的传递。在这个函数中，我们使用emit函数来触发事件，并将参数传递给事件的监听函数。

然后，我们使用onMounted钩子函数，在组件挂载后执行一些操作。在这个钩子函数中，我们使用bus.$onAll函数来监听所有事件的触发，并将事件和参数传递给handleEmit函数。然后，我们调用init函数来初始化微前端应用。

接下来，我们使用watch函数来监听props.name和props.url的变化。当这两个props发生变化时，我们重新调用init函数来重新初始化微前端应用。

最后，我们使用onBeforeMount钩子函数，在组件卸载前执行一些操作。在这个钩子函数中，我们使用bus.$offAll函数来取消所有事件的监听。

最后，我们返回一个渲染函数，使用h函数来创建一个div元素，并将宽度和高度设置为props中的值。我们还将这个div元素的引用设置为wujie，以便以后可以访问它。

最后，我们通过wujie.install方法将这个组件注册为Vue插件，以便在Vue应用中使用。

import { defineComponent, h, getCurrentInstance, onMounted, watch, onBeforeMount } from 'vue'
//子组件的props类型是复杂的类型的时候，可以用propType进行强制类型转换（eg 复杂函数，对象数组，对象的类型检查）import type { PropType } from 'vue'
import { startApp, bus } from 'wujie'
import { Props } from './type'
// 声明组件
const wujie = defineComponent({props: {width: { type: String, default: "" },height: { type: String, default: "" },name: { type: String, default: "", required: true },loading: { type: HTMLElement, default: undefined },url: { type: String, default: "", required: true },sync: { type: Boolean, default: undefined },prefix: { type: Object, default: undefined },alive: { type: Boolean, default: undefined },props: { type: Object, default: undefined },attrs: { type: Object, default: undefined },replace: { type: Function as PropType<Props['replace']>, default: undefined },fetch: { type: Function as PropType<Props['fetch']>, default: undefined },fiber: { type: Boolean, default: undefined },degrade: { type: Boolean, default: undefined },plugins: { type: Array as PropType<Props['plugins']>, default: null },beforeLoad: { type: Function as PropType<Props['beforeLoad']>, default: null },beforeMount: { type: Function as PropType<Props['beforeMount']>, default: null },afterMount: { type: Function as PropType<Props['afterMount']>, default: null },beforeUnmount: { type: Function as PropType<Props['beforeUnmount']>, default: null },afterUnmount: { type: Function as PropType<Props['afterUnmount']>, default: null },activated: { type: Function as PropType<Props['activated']>, default: null },deactivated: { type: Function as PropType<Props['deactivated']>, default: null },},setup(props, { emit }) {const init = () => {// 获取当前组件实例const instance = getCurrentInstance()// 微前端初始化方法startApp({name: props.name,url: props.url,el: instance?.refs.wujie as HTMLElement,loading: props.loading,alive: props.alive,fetch: props.fetch,props: props.props,attrs: props.attrs,replace: props.replace,sync: props.sync,prefix: props.prefix,fiber: props.fiber,degrade: props.degrade,plugins: props.plugins,beforeLoad: props.beforeLoad,beforeMount: props.beforeMount,afterMount: props.afterMount,beforeUnmount: props.beforeUnmount,afterUnmount: props.afterUnmount,activated: props.activated,deactivated: props.deactivated,})}// 监听事件触发传递参数const handleEmit = (event: string, ...args: any) => {emit(event, ...args)}// 要获取el 所以采用onMountedonMounted(() => {// 任何$emit都会导致监听函数触发，第一个参数为事件名，后续的参数为$emit的参数bus.$onAll(handleEmit)init()})// name 跟url可能是动态变化的，所以要watch后重新初始化watch([props.name, props.url], () => {init()})// 销毁时要取消监听onBeforeMount(() => {bus.$offAll(handleEmit)})// 返回渲染函数return () => h('div', {style: {width: props.width,height: props.height,},// 当作el传递给startAppref: 'wujie', //方便以后读取})}})
// 提供app.use使用的方法 会自动调用install
wujie.install = function (app: any) {app.component('WujieVue', wujie)
}
export default wujie

4.配置打包规则

引入所需的模块：

Configuration：Webpack 的配置类型。
path：Node.js 的内置模块，用于处理文件路径。

创建一个配置对象 config，用于配置 Webpack。

设置入口文件：

entry 属性指定了入口文件的路径，这里是 ./src/index.ts。

设置出口文件：

output 属性指定了打包后的文件的输出配置。
filename 属性指定了输出文件的名称，这里是 wujie.js。
path 属性指定了输出文件目的录，这里使用了 path.resolve 方法来获取绝对路径，__dirname 表示当前文件所在的目录，./lib 表示输出到当前目录下的 lib 文件夹。

配置打包忽略的文件：

externals 属性指定了需要忽略打包的模块。
这里忽略了 vue 和 wujie 模块，意味着在打包时不会将这两个模块打包进最终的输出文件中，而是通过外部引入的方式使用它们。

设置打包模式：

mode 属性指定了打包的模式，这里是 "none"，表示不使用任何内置优化。

配置模块规则：

module 属性用于配置模块的加载规则。
rules 属性是一个数组，包含了各种规则对象。
这里只有一个规则对象，用于解析 TypeScript 文件。
test 属性指定了需要匹配的文件类型，这里是以 .ts 结尾的文件。
loader 属性指定了用于处理匹配到的文件的加载器，这里是 ts-loader，用于将 TypeScript 转换为 JavaScript。

导出配置对象 config，使其可以被 Webpack 使用。

const { Configuration } = require("webpack");
const path = require("path");
/*** @type {Configuration} //配置智能提示*/
const config = {entry: "./src/index.ts", //入口文件//出口output: {//   文件名filename: "wujie.js",//   出口文件目录path: path.resolve(__dirname, "./lib"),},//配置打包忽略的文件externals: {vue: "vue",wujie: "wujie",},// 模式源码的方式mode: "none",module: {// 打包规则rules: [{test: /\.ts$/, //解析tsloader: "ts-loader",},],},
};module.exports = config;

5.执行打包命令

pnpm run lib

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","lib": "webpack",},

swc技术

SWC

SWC（Super-fast WebAssembly Compiler）是一个基于Rust语言开发的高性能JavaScript和TypeScript编译器。它旨在提供快速且可靠的代码转换和优化，以改善JavaScript和TypeScript应用程序的性能。

SWC的主要特点和优势包括：

高性能：SWC通过使用Rust语言和优化的算法，实现了比传统的JavaScript编译器更快的编译速度。它能够处理大型代码库，并在短时间内生成高效的输出代码。
完整的语法支持：SWC支持最新的JavaScript和TypeScript语法，包括ES2015+、JSX、Decorators等。它可以将这些新语法转换为向后兼容的代码，以便在不同的JavaScript环境中运行。
模块化支持：SWC支持处理模块化的代码，包括CommonJS、ES modules和AMD等。它可以处理模块之间的依赖关系，并生成适合目标环境的模块化代码。
优化和压缩：SWC可以进行代码优化和压缩，以减小输出文件的大小并提高运行时性能。它可以消除未使用的代码、进行常量折叠和内联等优化操作。
插件系统：SWC提供了灵活的插件系统，允许开发人员根据自己的需求扩展和定制编译过程。开发人员可以编写自定义的插件来处理特定的转换或优化操作。

总的来说，SWC是一个强大且高性能的JavaScript和TypeScript编译器，适用于需要快速编译和优化代码的项目。它可以帮助开发人员提高应用程序的性能，并提供丰富的语法支持和灵活的插件系统。

Babel

Babel是一个广泛使用的JavaScript编译器工具，用于将新版本的JavaScript代码转换为向后兼容的旧版本，以便在不支持新语法和特性的环境中运行。

JavaScript是一门不断发展的语言，每年都会推出新的语法和特性，但是不同的浏览器和JavaScript运行时环境对这些新特性的支持程度各不相同。这就导致开发人员在编写代码时需要考虑到目标环境的兼容性问题。

Babel的作用就是解决这个问题。它可以将使用了最新语法和特性的JavaScript代码转换为向后兼容的代码，以便在旧版本的浏览器环和境中运行。它可以将ES6、ES7、ES8等新版本的JavaScript代码转换为ES5或更早版本的代码，同时还可以处理一些其他的转换，如JSX转换、TypeScript转换等。

Babel的工作原理是通过解析源代码，构建抽象语法树（AST），然后根据配置文件中的规则进行转换。开发人员可以根据自己的需求配置Babel，选择需要的转换插件和预设，以及指定目标环境的兼容性要求。

总的来说，Babel是一个非常强大的工具，可以帮助开发人员在不同的JavaScript环境中编写兼容性更好的代码，提高开发效率和代码质量

Babel VS SWC

Babel和SWC都是用于转换JavaScript代码的工具，但它们有一些区别和特点。

性能：SWC在性能方面通常比Babel更快。SWC是用Rust编写的，它使用了更高效的算法和数据结构，因此在转换大型代码库时可能会比Babel更快。
兼容性：Babel是非常成熟和广泛使用的工具，它支持广泛的JavaScript语法和特性转换，并且有大量的插件和预设可供选择。SWC相对较新，尽管它也支持许多常见的语法和特性转换，但可能没有像Babel那样广泛的生态系统。
生态系统：Babel拥有庞大的生态系统，有许多插件和预设可供选择，可以满足各种不同的需求。SWC的生态系统相对较小，但随着其不断发展，预计会有更多的插件和工具出现。
配置和使用：Babel的配置相对较复杂，需要使用.babelrc或babel.config.js等文件来指定转换规则和插件。SWC的配置相对简单，可以通过命令行参数或配置文件来指定转换规则。

综上所述，Babel是一个成熟且广泛使用的工具，适用于大多数JavaScript项目，具有丰富的插件和预设。SWC则是一个性能更高的新兴工具，适用于对性能要求较高的项目，但其生态系统

更改使用 swc 解析

pnpm add -D swc-loader @swc/core @swc/cli

library：这个配置项用于指定库的名称。它可以是一个字符串，也可以是一个对象。如果是一个字符串，那么这个字符串将作为全局变量暴露给浏览器环境，可以通过这个全局变量来访问库的功能。如果是一个对象，那么可以通过对象的属性来访问库的功能。
libraryTarget：这个配置项用于指定库的打包方式。它可以是以下几种值之一：
- "var"：将库作为一个变量声明，可以通过变量来访问库的功能。
- "this"：将库作为 this 对象的一个属性，可以通过 this 对象来访问库的功能。
- "window"：将库作为 window 对象的一个属性，可以通过 window 对象来访问库的功能。
- "global"：将库作为 global 对象的一个属性，可以通过 global 对象来访问库的功能。
- "commonjs"：将库作为一个 CommonJS 模块导出，可以通过 require 函数来引入库的功能。
- "commonjs2"：将库作为一个 CommonJS2 模块导出，可以通过 require 函数来引入库的功能。
- "amd"：将库作为一个 AMD 模块导出，可以通过 AMD 的模块加载器来引入库的功能。
- "umd"：将库作为一个 UMD 模块导出，可以在各种环境下使用不同的模块器加载来引入库的功能。
umdNamedDefine：这个配置项用于指定是否为 UMD 模块导出的库提供一个命名的模块定义。如果设置为 true，那么在 AMD 或者 CommonJS 环境下引入库时，会使用一个命名的模块定义；如果设置为 false，那么会使用匿名的模块定义。

修改webpack.config.js

不支持 export import 使用 swc 完成

const { Configuration } = require("webpack");
const path = require("path");
/*** @type {Configuration} //配置智能提示*/
const config = {entry: "./src/index.ts", //入口文件//出口output: {//   文件名filename: "wujie.js",//   出口文件目录path: path.resolve(__dirname, "./lib"),},//配置打包忽略的文件externals: {vue: "vue",wujie: "wujie",library: "Wujie",libraryTarget: "umd",umdNamedDefine: true,},// 模式源码的方式mode: "none",module: {// 打包规则rules: [{test: /\.ts$/, //解析tsloader: "swc-loader",},],},
};module.exports = config;

使用swc 完成 esm 模式（export--import）

配置 esm 命令

{"name": "wujie-vue3","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","lib": "webpack","esm": " swc src/index.ts -d esm"},"keywords": [],"author": "","license": "ISC","dependencies": {"wujie": "^1.0.21"},"devDependencies": {"@swc/cli": "^0.1.63","@swc/core": "^1.3.100","swc-loader": "^0.2.3","ts-loader": "^9.5.1","typescript": "^5.3.2","vue": "^3.3.10","webpack": "^5.89.0","webpack-cli": "^5.1.4"}
}

生成 .swcrc文件

{"$schema": "https://json.schemastore.org/swcrc","jsc": {"parser": {"syntax": "typescript",},"target": "es5","loose": false,"externalHelpers": false,// Requires v1.2.50 or upper and requires target to be es2016 or upper."keepClassNames": false},"minify": false
}

执行命令

pnpm run esm

发布到npm

更改package.json

version：发布的版本

main：配置 main 入口文件地址

module ：配置import 入口地址

files：发布的文件

{"name": "wujie-vue3-setups","version": "0.0.1","description": "","main": "lib/wujie.js","module": "esm/wujie.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","lib": "webpack","esm": " swc src/index.ts -d esm"},"files": ["lib","esm","index.d.ts"],"keywords": [],"author": "","license": "ISC","dependencies": {"wujie": "^1.0.21"},"devDependencies": {"@swc/cli": "^0.1.63","@swc/core": "^1.3.100","swc-loader": "^0.2.3","ts-loader": "^9.5.1","typescript": "^5.3.2","vue": "^3.3.10","webpack": "^5.89.0","webpack-cli": "^5.1.4"}
}