阿里开源：插件化前端框架，支持各种功能扩展和业务需求

Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 10000+ 应用，包括 Java、Node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用、Electron 应用、Serverless 应用等。

介绍

Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

主要特性

设计思路

「技术收敛」：

技术收敛对团队而言尤其重要，他包含两层含义：

希望开发者依赖 Umi 之后就无需关心 babel、webpack、postcss、react、react-router 等依赖，而依赖@umijs/max之后无需再关心开发中台项目的依赖和技术栈。

「插件和插件集」：

Umi 通过提供插件和插件集的机制来满足不同场景和业务的需求。插件是为了扩展一个功能，而插件集是为了扩展一类业务。比如要支持 vue，我们可以有@umijs/preset-vue，包含 vue 相关的构建和运行时；比如要支持 h5 的应用类型，可以有@umijs/preset-h5，把 h5 相关的功能集合到一起。

图表曲线图

首先，引入统计图表包：

pnpm install @ant-design/plots

编写代码获取数据：

import { useState, useEffect } from 'react';

const DemoLine = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
};

这样，我们获取到了数据，并将数据 JSON 对象的内容保存到 data 中去。每个数据对象形如：

{
  "Date": "2010-01",
  "scales": 1998,
}

将数据展示到曲线图上：

import React from 'react';
import { Line } from '@ant-design/plots';

const DemoLine: React.FC = () => {
  // fetch data

  const config = {
    data,
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    xAxis: {
      // type: 'timeCat',
      tickCount: 5,
    },
    smooth: true,
  };

  return ;
};

其中，data 中数据的 Date 属性将作为曲线图的 X 横坐标，scales 属性将作为曲线图的 Y 纵坐标绘图。

快速上手环境准备

安装 node，并确保 node 版本是 14 或以上。

创建项目

$ mkdir myapp && cd myapp

使用 NPM 创建项目

$ npx create-umi@latest
Need to install the following packages:
  create-umi@latest
Ok to proceed? (y) y
✔ Pick Umi App Template › Simple App
✔ Pick Npm Client › npm
✔ Pick Npm Registry › taobao
Write: .gitignore
Write: .npmrc
Write: .umirc.ts
Write: package.json
Copy:  src/assets/yay.jpg
Copy:  src/layouts/index.less
Write: src/layouts/index.tsx
Copy:  src/pages/docs.tsx
Copy:  src/pages/index.tsx
Write: tsconfig.json
Copy:  typings.d.ts

> postinstall
> umi setup

参数选项

使用 create-umi 创建项目时，可用的参数如下：

启动项目

执行 pnpm dev 命令

$ pnpm dev
        ╔═════════════════════════════════════════════════════╗
        ║ App listening at:                                   ║
        ║  >   Local: https://127.0.0.1:8001                  ║
ready - ║  > Network: https://192.168.1.1:8001                ║
        ║                                                     ║
        ║ Now you can open browser with the above addresses ║
        ╚═════════════════════════════════════════════════════╝
event - compiled successfully in 1121 ms (388 modules)
event - MFSU compiled successfully in 1308 ms (875 modules)

浏览器里打开:8000/出现:

开源地址

------

我们创建了一个高质量的技术交流群，与优秀的人在一起，自己也会优秀起来，赶紧，享受一起成长的快乐。另外，如果你最近想跳槽的话，年前我花了2周时间收集了一波大厂面经，节后准备跳槽的可以！