微前端框架 `micro-app` 教程

微前端框架 micro-app 教程

micro-appA simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架项目地址:https://gitcode.com/gh_mirrors/mi/micro-app

1. 项目目录结构及介绍

以下是 micro-app 的核心目录结构：

.
├── docs                # 文档相关文件
├── src                 # 源代码目录
│   ├── scripts         # 脚本文件
│   └── ...
├── typings             # 类型定义文件
├── browserslistrc      # 浏览器兼容列表配置
├── editorconfig        # 编辑器配置
├── eslintignore        # ESLint 忽略规则
├── eslintrc.js         # ESLint 配置
├── gitignore           # Git 忽略文件
├── travis.yml          # Travis CI 配置
├── contact.md          # 联系方式
├── develop.md          # 开发指南
├── develop.zh-cn.md    # 开发指南（中文版）
├── license             # 许可证文件
├── README.md           # 项目说明文档
├── README.zh-cn.md     # 项目说明文档（中文版）
├── commitlint.config.js # Commit 规范配置
├── jest.config.js      # Jest 测试配置
├── package.json        # 项目依赖和脚本
└── rollup.config.js    # Rollup 打包配置

• docs: 包含项目文档及相关说明。
• src: 主要源代码目录，包含项目的核心逻辑。
• scripts: 存放辅助开发或构建的脚本文件。
• typings: TypeScript 类型定义文件，用于增强类型检查。
• browserslistrc: 定义了项目支持的浏览器版本范围。
• .editorconfig: 统一代码风格的配置文件。
• .eslintignore: ESLint 忽略的文件或目录列表。
• .eslintrc.js: 使用 ESLint 进行代码质量检查的配置。
• .gitignore: 对 Git 忽略不纳入版本控制的文件或目录。
• .travis.yml: Travis CI 自动化测试配置。
• contact.md, develop.md, develop.zh-cn.md: 开发者相关文档。
• license: 项目许可协议（MIT）。
• README.md, README.zh-cn.md: 项目简介及安装使用说明。
• commitlint.config.js: Git 提交信息规范配置。
• jest.config.js: 使用 Jest 进行单元测试的配置。
• package.json: 项目依赖和运行时命令的定义。
• rollup.config.js: Rollup 打包工具的配置。

2. 项目的启动文件介绍

在 micro-app 中，启动文件通常是指 package.json 文件中的 main 或 start 命令所对应的入口文件。例如，start 命令可能会指向一个名为 src/index.js 的文件，这个文件是应用启动的地方。在这里，你可以初始化微前端的应用，注册微应用并设置相应的配置。

{
  "name": "base-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node src/index.js"
  },
  // ...
}

src/index.js 示例:

import { createApp } from 'micro-app';

const app = createApp();
app.register('myMicroApp', '/path/to/myMicroApp/dist');
app.start();

在上面的例子中，createApp 创建了一个微前端容器，register 注册了一个名为 myMicroApp 的微应用，其入口位于 /path/to/myMicroApp/dist。最后，start 方法启动整个微前端应用。

3. 项目的配置文件介绍

1) rollup.config.js

Rollup 是用来打包微前端应用的工具。配置文件可能包括导入模块、选择性地编译 JavaScript 和导出格式等选项。以下是一个基础的 rollup.config.js 示例：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';

export default {
  input: './src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      clean: true,
      useTsconfigDeclarationDir: true
    })
  ]
};

在这个配置中，input 指定输入的源文件，output 设置输出的文件和格式。plugins 列出了 Rollup 使用的插件，如自动解析 Node 模块、处理 CommonJS 模块和 Typescript 编译。

2) package.json

package.json 文件包含了项目的基本信息、依赖包和自定义脚本。例如，微前端相关的配置可能涉及到不同微应用之间的数据通信或者预加载策略。这通常体现在脚本部分，如：

"micro-app": {
  "globalName": "MicroApps",
  "routes": {
    "/myMicroApp/*": "myMicroApp"
  },
  "preloads": ["myMicroApp"]
}

这里，globalName 是所有微应用共享的全局对象名称，routes 映射了 URL 路径到微应用，而 preloads 列出了需要预先加载的微应用。

通过理解这些核心组件，你将能够更好地理解和部署 micro-app 微前端框架。记得查看官方文档以获取更详细的信息和示例。

micro-appA simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架项目地址:https://gitcode.com/gh_mirrors/mi/micro-app