精华内容
下载资源
问答
  • "start_test": "cross-env UMI_ENV=test umi dev" // 使用 config.test.js 配置文件, 启动项目 "start:prod": "cross-env UMI_ENV=prod umi dev" // 使用 config.prod.js 配置文件, 启动项目 "build_test": ...
  • UMi-源码

    2021-03-17 15:49:47
    UMi
  • umi-源码

    2021-03-17 00:14:37
    umi
  • umiumi-study-源码

    2021-02-17 21:45:09
    umiumi-study
  • umi、dva、React
  • umi.md

    2021-07-05 23:15:19
    umi.md
  • umi-plugin-阿波罗 用于Apollo graphql客户端的Umi插件。 安装 $ yarn add umi-plugin-apollo # OR npm install --save umi-plugin-apollo 设置 设置umi-plugin-react ,添加umi-plugin-apollo插件: // .umirc.js...
  • umi 创建脚手架

    2021-01-08 05:29:23
    umi 创建脚手架 首先需要node等其他东西 然后安装umi npm install umi -g 安装成功后 $ umi ui 打开umi 就会进入浏览器umi首页了 Error: spawn git ENOENT 然后创建项目 发现 Error: spawn git ENOENT at ...
  • umi-dva-demo:umi dva演示
  • umi-react:umi + egg全栈开发
  • Umi@2 plugin for . Umi@3 相应的 qiankun 插件请移步 Installation $ npm i @umijs/plugin-qiankun@umi2 -S or $ yarn add @umijs/plugin-qiankun@umi2 Examples 导航是主应用,App1 和 App2 是子应用, $ yarn $ ...
  • umi-plugin-电子构建器 本插件参考 安装 仅支持umi3 $ npm i umi-plugin-electron-builder --save-dev 或者 $ yarn add umi-plugin-electron-builder --dev 安装之后会自动生成相关文件 默认安装最新版本的电子 ...
  • Umi3(Umi

    2020-12-19 17:47:42
    Umi 是什么? Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码...

    Umi 是什么?

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

    Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。

    它主要具备以下功能:

    🎉 可扩展,Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。
    📦 开箱即用,Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。
    🐠 企业级,经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证,值得信赖。
    🚀 大量自研,包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等,满足日常项目的周边需求。
    🌴 完备路由,同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。
    🚄 面向未来,在满足需求的同时,我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。
    </
    展开全文
  • umi 分包

    2021-04-17 11:06:28
    umi 分包 简介 Umi 是蚂蚁金服推出的一个围绕React技术栈的底层前端框架, 配合antd的UI组件库能极大的提高项目开发效率。 官网地址 umi 拆包 简的来说在 umi 框架中,我们会用到其他的组件库(类如:antd,...

    umi 分包

    简介

    Umi 是蚂蚁金服推出的一个围绕React技术栈的底层前端框架, 配合antd的UI组件库能极大的提高项目开发效率。

    官网地址


    umi 拆包

    简的来说在 umi 框架中,我们会用到其他的组件库(类如:antd,moment,echarts等),当我们打包构建时,可以看到 umi.js 3M多 的包超大,它把其它组件的都集成到了 umi.js 中了,这样就会造成项目运行耗时长的影响。

    使用 analyze 指令运行(使用 cross-env 运行,说明在下个标题: cross-env),展示出如下例子图:

    未拆分的包

    cross-env

    运行跨平台设置和使用环境变量的脚本

    可以使用单个命令,而不必担心为平台正确设置或使用环境变量。 只要在POSIX系统上运行就可以设置好,而 cross-env 将会正确地设置它。

    // 下载
    npm install --save-dev cross-env
    
    // package.json
    "scripts": {
        "start": "cross-env ANALYZE=site umi dev",
        "build": "cross-env ANALYZE=1 umi build"
        "analyze": "cross-env ANALYZE=1 umi build"
    },
    

    webpack 配置

    Umi项目拆包优化过程官网


    chainWebpack配置

    在 umi.js 或者 umi.ts 或者 .umirc.js 或者 config.js 中配置,使用 webpack 的优化模块optimization.splitChunks实现。

    chainWebpack: chainWebpackConfig(config, { webpack }) {    
        // webpack 拆包 
        config.optimization.splitChunks({
          chunks: 'all', // 提取 chunks 的时候从哪里提取,如果为 all 那么不管是不是 async 的都可能被抽出 chunk,为 initial 则会从非 async 里面提取。
          automaticNameDelimiter: '.', // 文件名分隔符
          name: true,  // chunk 的名称,如果设置为固定的字符串那么所有的 chunk 都会被合并成一个,这就是为什么 umi 默认只有一个 vendors.async.js。
          minSize: 30000, // byte, == 30 kb,越大那么单个文件越大,chunk 数就会变少(针对于提取公共 chunk 的时候,不管再大也不会把动态加载的模块合并到初始化模块中)当这个值很大的时候就不会做公共部分的抽取了
          maxSize: 0, // 文件的最大尺寸,优先级:maxInitialRequest/maxAsyncRequests < maxSize < minSize,需要注意的是这个如果配置了,umi.js 就可能被拆开,最后构建出来的 chunkMap 中可能就找不到 umi.js 了。
          minChunks: 1, // 被提取的一个模块至少需要在几个 chunk 中被引用,这个值越大,抽取出来的文件就越小
          maxAsyncRequests: 10, // 在做一次按需加载的时候最多有多少个异步请求,为 1 的时候就不会抽取公共 chunk 了
          maxInitialRequests: 5, // 针对一个 entry 做初始化模块分隔的时候的最大文件数,优先级高于 cacheGroup,所以为 1 的时候就不会抽取 initial common 了。
          cacheGroups: {
            antdesigns: { // antdsign
              name: 'antdesigns',
              chunks: 'all',
              test: /(@antd|antd|@ant-design)/,
              priority: 10,
            },
          },
        });
    } 
    

    注:上边例子只是在 cacheGroups 拆了 antd 的包,如您还有要拆的包,可继续在 cacheGrops 中加入。

    如:

    chainWebpack: chainWebpackConfig(config, { webpack }) {    
        ...
          cacheGroups: {
            antdesigns: { // antdsign
              name: 'antdesigns',
              chunks: 'all',
              test: /(@antd|antd|@ant-design)/,
              priority: 10,
            },
            vendors: {
              name: 'vendors',
              chunks: 'all',
              test: /(lodash|lodash-decorators|echarts|moment|dva|immutable)/,
              priority: 10,
            },
          },
        });
    } 
    

    chunks配置

    包拆完后,发现白屏,拆出来的js文件都没有去请求,需要检查配置,看有没有配置拆出来的包。

    在 umi.js 或者 umi.ts 或者 .umirc.js 或者 config.js 中配置:

    ...其他配置
      
     chunks: ['antdesigns', 'vendors.umi', 'umi'] // 需要包含 cacheGroups 的包
    

    注意:chunks 配置需要加上 umi,否则打包完后依旧是白屏,在控制台可看到 umi.js 和 umi.css 并没有引入。

    拆包后(可以看到 umi.js 拆出的两个包: vendors 包和 antdesigns 包):

    分包的分析图.


    踩坑

    1.AssertionError [ERR_ASSERTION]: chunk of XXX not found.

    在splitChunks中明明已经配置了 XXX 拆出来的包,但是最后就是报错。

    拆了包报错
    可能原因一:cacheGroups 中test属性正则值错误,没有匹配的,啥都拆不出来。

    可能原因二:cacheGroups 中priority属性优先级值过低,拆不出来。


    2.chunks 没配置或没加上 umi,导致白屏。

    运行 dist/index.html:

    白屏

    展开全文
  • umiumi初探

    千次阅读 2020-02-02 17:02:33
    前言 某次听公开课看别人用这玩意,感觉很nb,稍微学一下。 umijs 是一个类似next.js的react框架,约定pages 目录下的文件即路由,而文件则导出 react 组件。...使用umi g page index可以生成i...

    前言

    • 某次听公开课看别人用这玩意,感觉很nb,稍微学一下。

    umijs

    • 是一个类似next.js的react框架,约定pages 目录下的文件即路由,而文件则导出 react 组件。
    • 官网仓库
    • 官网文档
    • 中文可发音为乌米,不过图标为啥是个白米饭。。

    安装运行

    • 先不用cli构建,安装全局命令umi
    cnpm install -g umi
    
    • 使用umi g page index可以生成index页面。一共2个文件,一个是js一个是css。
    • umi g 是 umi generate 的别名,可用于快速生成 component、page、layout 等,并且可在插件里被扩展,比如 umi-plugin-dva 里扩展了 dva:model,然后就可以通过 umi g dva:model foo 快速 dva 的 model。
    • 每个js文件都是个路由,会导出成react组件。
    • 下面就运行试试,修改package.json里的script命令为:
      "scripts": {
        "dev": "umi dev",
        "build": "umi build",
        "test": "umi test"
      },
    
    • 然后用npm run dev试试。根路径就会去访问index.js这个文件,再建个文件比如user,路径上加user即可访问到。
    • 启动后会发现目录里多了个叫.umi的文件夹,里面就是umi扫描pages生成的文件,最主要的就是路由之类,可以看见在router文件里面,路由里需要哪个文件看的很清楚。它还把路由信息挂到window上了,直接使用window.g_routes可以看路由。里面有个patchRoutes是运行时修改路由,就是动态修改路由。

    跳转路由

    • 里面跳转路由方式差不多。
    • 第一种方式就是使用Link。
    
    import styles from './index.css';
    import Link from 'umi/link'
    export default function () {  
      return (
        <div className={styles.normal}>
          <h1>Page index</h1>
          <Link to="/user">/user</Link>
        </div>
      );
    }
    
    • 跟通常使用react-router-dom的link一样。
    • 还有种方法使用router进行跳转:
    import styles from './user.css';
    import router from 'umi/router'
    export default function () {
      console.log(router);
      return (
        <div className={styles.normal}>
          <h1>Page user</h1>
          <button onClick={() => router.push('/xcxc')}>push</button>
        </div>
      );
    }
    
    • 打印router可以看见有go goback goForward replace push这些方法,这个就是history的方法。

    全局路由

    • 约定 src/layouts/index.js 为全局路由,返回一个 React 组件,通过 props.children 渲染子组件。
    • 这个全局路由,就是渲染别的路由前必须渲染的。
    • pages需要放到src下,这样才能生效。

    src/layouts/index.js

    import Link from 'umi/link'
    export default function (props) {
        return (
            <div >
                <h1>layout</h1>
                <Link to="/">/</Link>
                <Link to="/user">/user</Link>
                <div>{props.children}</div>
            </div>
        );
    }
    
    

    嵌套路由

    • 嵌套路由有点像小型的全局路由。就是在这个路由下必须渲染这个组件。
    • 约定是需要的目录下写个_layout.js文件。这个路由下的所有路由都会通过它来渲染。

    src/pages/product/_layout.js

    import Link from 'umi/link'
    export default function (props) {
        return (
            <div >
                <h1>productA</h1>
                <Link to="/product/productA">/productA</Link>
                <Link to="/product/productB">/productB</Link>
                <div>{props.children}</div>
            </div>
        );
    }
    
    • src/pages/product/productA和B就不放了,一个样。出来的效果就是productA和B都会在这个props.chilren里渲染。

    动态路由

    • umi 里约定,带 $ 前缀的目录或文件为动态路由。

    src/pages/product/$id.js

    export default function (props) {
        return (
            <div >
                ID:{props.match.params.id}
            </div>
        );
    }
    
    • 我们改一下_layout把跳转写出来:
    import Link from 'umi/link'
    export default function (props) {
        return (
            <div >
                <h1>productA</h1>
                <Link to="/product/productA">/productA</Link>
                <Link to="/product/productB">/productB</Link>
                <Link to="/product/1">/1</Link>
                <Link to="/product/2">/2</Link>
                <div>{props.children}</div>
            </div>
        );
    }
    
    • 这样点1或者点2都会指向$id那个组件,那个组件通过props.match.params.id拿到参数。需要别的可以把props打印出来看。

    权限路由

    • umi 的权限路由是通过配置路由的 Routes 属性来实现。约定式的通过 yaml 注释添加。
    /**
     * title: privatepage
     * Routes:
     *   - ./PrivateRouter.js
     */
    export default function (props) {
        return (
            <div >
                <h1>Private page</h1>
            </div>
        );
    }
    
    • ./PrivateRouter.js是相对于根目录的位置。就是跟package.json一个位置。
    • yaml注释必须顶格写,不能空一行或者import完再写这个。
    • yaml语法格式化工具转换后发现其实是这个:
    { title: 'privatepage', Routes: [ './PrivateRouter.js' ] }
    
    • 这个语法还是挺常用的,前面在docker配置里用过。

    PrivateRouter.js

    import { Route, Redirect } from 'react-router-dom'
    export default ({ render}) => {
        return (
            <Route render={
                (props) => localStorage.getItem('login') ? render(props) : <Redirect to='/' />
            }>
            </Route>
        )
    }
    
    • 这个就是在访问Private page时会先走一遍PrivateRouter,里面有个条件渲染,如果localstorage里有login的键,那么就渲染请求的路径,否则就重定向回主页。
    • 权限路由就这么多内容了。
    展开全文
  • umi-plugin-alioss umi,umi-plugin,alioss 基于 umi2.x 插件体系编写 说明 基于umi-plugin系统封装的一个插件,用于构建成功之后上传静态资源到阿里云 使用 yarn add umi-plugin-alioss -D yarn add ali-oss -D 在....
  • umi.js安装 npm install -g umi 查看umi.js版本 umi -v 创建umi项目 先找个地方建个空目录。 $ mkdir myapp && cd myapp 通过官方工具创建项目 $ yarn create @umijs/umi-app # 或 npx @umijs/...
    • umi.js安装
    npm install -g umi 
    
    • 查看umi.js版本
    umi -v
    

    在这里插入图片描述

    • 创建umi项目
    
    先找个地方建个空目录。
    $ mkdir myapp && cd myapp
    通过官方工具创建项目
    $ yarn create @umijs/umi-app
    # 或 npx @umijs/create-umi-app
    
    • 创建ant-design-pro项目
    yarn create umi
    

    在这里插入图片描述

    • 运行
    yarn
    
    yarn dev
    
    展开全文
  • umi 主题切换项目模版 yarn yarn dev
  • Umi:根据Umi-request开发文档封装请求参数携带头部hearder{}话不多说 直接上代码完。 由于项目功能需求采用Antd Pro官方脚手架,为了保持框架完整性不再添加其他数据请求类npm包,所以对项目中@utils/request.js...
  • umi项目 入门 安装依赖项 $ yarn 启动开发服务器, $ yarn start umi-users-dashboard
  • umi插件扩展 用于开发Chrome插件的umi插件。 安装 npm i -D umi-plugin-extensions 或 yarn add -D umi-plugin-extensions 使用 :bell:请确保您对Chrome插件开发已经有基本的了解,入门教程: 。 在umi配置文件...
  • umi_tableData.zip

    2021-08-24 10:46:44
    umi 小白
  • umi build为例,查看umi命令行工具的逻辑 首先查看package.json文件的bin字段,找到umi可执行文件的位置: "bin": { "umi": "./bin/umi.js" }, 查看umi/bin/umi.js文件,实际逻辑是在umi/src/cli.js文件中,...
  • umi-request-practice umi-request 实践 需求 做成支持 Umi 的 JS 插件 所有请求都走 POST 方法 统一添加 Token,用户信息,设备信息等 统一 HTTP 请求体结构,大致为: { // 系统报文头 sysHead: { // 服务 ...
  • 哈哈哈,没错如果我们要使用umi提供的块模板,只能通过umi UI 来进行安装,下面开始介绍umi ui如何安装 yarn add @umijs/preset-ui -D 耐心等待一段时间... 安装完成之后,你肯定会一头雾水文档写的是执行 ...
  • 写狗程序 umi

    2019-01-26 13:30:33
    写狗程序 umi
  • umi入门

    2020-03-24 11:31:54
    umi入门 1. 什么是umi Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,...
  • umi-example-electron 项目基于 umi@2.10.1、electron@6.0.12 的整合 由于 sorrycc 的 示例是基于老版本 umi@1,自己没找到最新版本示例,所以自己动手撸了一个 参考 使用 // 安装依赖 npm i // 开发模式 npm run ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,635
精华内容 3,854
关键字:

umi