记录...dumi按需引入

自上次发布文章之后已经有一个多月没有记录学习了，进入公司后就想着..万事大吉了，也不用写了，但在公司经历了一个月鞭打之后，我发现，我还是继续学习比较好，当时看可以看懂，但不手写一遍的话真的容易忘记，下次遇到类似的问题还是不会，那我就废了。所以我还是把我在公司学到的一些东西给继续重温一遍吧。

1.umi和dumi是什么

umi是可扩展的企业级前端应用框架，Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。但他对我这种前端萌新来说，他就是一个类似react脚手架的一个框架，不过比原生的脚手架稍微好用一点。
dumi是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。以我的了解来说，就是一个自己封装的组件库，来弄一个重复使用的东西。

2.问题来源

我是刚入职的一个实习生，刚到公司也和大部分实习生一样，先熟悉公司业务再从ui改起，ui好改，刚来一周过的也比较轻松，但我第二周我就不满足于改ui，于是来了个对我来说比较难的任务(当然，对其他大佬来说小菜一碟),就一个简单的表格，然后数据回显，技术栈用的是react+hooks，纯纯的就不会了。硬是磨了两天才搞出来，想想搞ui真的轻松，发现自己真的是什么也不会，但又不想光改ui，就又去问目前带我的大哥，人家说那你考虑一下我们这个项目的按需引入，于是就有了这篇记录。

3.解决

我第一件事肯定就是先百度，但是很多配置都看不懂，于是就又到官网上面找，得。在找了好长时间后，找到了一个配置，是这样子配的()：

const path = require('path');
export default {
  extraBabelPlugins: [
    [
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      }
    ],
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: ['.js', '.jsx', '.tsx', '.d.ts'],
        alias: {
          '@': './src',
        },
      },
    ],
  ],
  cjs: 'rollup',
  esm: {
    type: 'babel',
    importLibToEs: true
  },
};

特别简单,其中很多都是默认带的。extraBabelPlugins的意思是配置额外的 babel 插件。重要的不是这个，重要的是esm，当importLibToEs是true后，默认路径就是从打包后es目录下获取，从其他地方引入后(我项目是umi项目)是全高亮的状态es也会有，就可以从这里面获取了，打包之后的文件就会变小很多。当然umi项目也要稍微配置一下(我的项目中是umirc.ts下配置)：

extraBabelPlugins:[ 
    'babel-plugin-import',
    {
      libraryName: 'project',
      camel2DashComponentName: false,
      "customName": (name: string) => `project/es/${name}`
    },
  ],

这样子就算完成了，我觉得就很神奇，打包出来的东西确实也变小了很多。所以就来记录一下，以防遇到类似的按需加载还是不会。