微前端 icestark《理论篇》

$ npm init ice icestark-framework @icedesign/stark-layout-scaffold

$ cd icestark-framework

$ npm install

$ npm start

如果不是通过模板创建，添加插件 build-plugin-icestark

npm i --save-dev build-plugin-icestark

应用入口 src/app.ts 中配置框架应用的一些运行时信息：

import { runApp } from ‘ice’

+import { ConfigProvider } from ‘@alifd/next’;

+import NotFound from ‘@/components/NotFound’;

+import BasicLayout from ‘@/layouts/BasicLayout’;

const appConfig = {

app: {

rootId: ‘ice-container’,

• addProvider: ({ children }) => (

•  <ConfigProvider prefix="next-icestark-">{children}</ConfigProvider>
  

• ),

},

router: {

• type: ‘browser’,

},

icestark: {

• type: ‘framework’,

• Layout: BasicLayout,

• getApps: async () => {

•  const apps = [{
  

•    path: '/seller',
  

•    title: '商家平台',
  

•    url: [
  

•      '//ice.alicdn.com/icestark/child-seller-react/index.js',
  

•      '//ice.alicdn.com/icestark/child-seller-react/index.css',
  

•    ],
  

•  }];
  

•  return apps;
  

• },

• appRouter: {

•  NotFoundComponent: NotFound,
  

• },

},

};

runApp(appConfig);

appConfig.icestark 完整的配置项说明：

• type: string, framework|child

• Layout: Component, 系统对应的布局组件

• getApps: function，获取所有微应用数据，单个微应用的完整配置字段请参考 icestark 文档

• appRouter:

• NotFoundComponent: 404 组件

• LoadingComponent: 应用切换时的 Loading 组件

LoadingComponent例子：

import { Loading } from ‘@alifd/next’;

export default () => (

);

微应用#

---

通过模板快速创建一个微应用：

创建微应用

$ npm init ice icestark-child @icedesign/stark-child-scaffold

$ cd icestark-child

$ npm install

$ npm start

如果不是通过模板创建，添加插件 build-plugin-icestark

npm i --save-dev build-plugin-icestark

在 build.json 里引入插件：

{

“plugins”: {

[“build-plugin-icestark”, {

“umd”: true

}]

}

}

应用入口改造#

在应用入口 src/app.ts 中配置微应用相关的信息：

import { runApp } from ‘ice’

const appConfig = {

app: {

rootId: ‘ice-container’,

},

router: {

• type: ‘browser’,

},

icestark: {

• type: ‘child’,

},

};

runApp(appConfig)

只需要这么简单，你的 SPA 应用就可以变成微应用了。

官方模板配置的icestark：

===============================================================================

appConfig里：

icestark: {

type: ‘framework’,

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】