阿里开源的一个插件化前端框架，腾讯、美团、字节都在用( 二 ) _前端框架

这是两年前 Umi 3 加的功能，最近发现 Remix、prisma、vitekit 等框架和工具都有类似实现。
// 大量插件为 umi 提供额外导出内容 import { connect, useModel, useIntl, useRequest, MicroApp, ... } from 'umi';
这带来的好处是。通过 Umi 将大量依赖管理起来，用户无需手动安装；同时开发者在代码中也会少很多 import 语句。

文章插图

快速上手
环境准备：首先得有 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 创建项目时，可用的参数如下：

--no-git 创建项目，但不初始化 Git
--no-install 创建项目，但不自动安装依赖

【阿里开源的一个插件化前端框架，腾讯、美团、字节都在用】
启动项目：
执行 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)

在浏览器里打开 http://localhost:8000/，能看到以下界面，