I haven’t recorded and studied for more than a month since I published the article last time. After I entered the company, I thought… All is well, also need not write, but in the company experienced a month of whipping, I found that I still continue to learn better, at that time can read, but not handwritten words really easy to forget, next time encounter similar problems or not, then I will be useless. So I’m going to go over some of the things I learned at the company.

1. What are Umi and Dumi

Umi is an extensible enterprise-level front-end application framework. It is based on routing and supports configuration routing and contract routing to ensure complete routing functions and extend functions. It is then paired with a well-lifecycle plug-in system that covers every lifecycle from source code to build artifacts, supporting various functional extensions and business requirements. It’s a framework similar to react scaffolding, but slightly better than the original scaffolding. Dumi is a documentation tool for component development scenarios, providing a one-stop component development experience with Father, who builds, and Dumi, who develops and documents components. As I understand it, it’s a library of components that you encapsulate yourself to make something reusable.

2. Source of the problem

I just hired as an intern, is just to the company and also most of the interns, familiar with the business first, then from the UI changes, the UI is good, just for a week is easy, but I’m not satisfied with the second week I change the UI, so to a difficult task for me (and, of course, a piece of cake for other bosses), is a simple form, React +hooks = react-hooks = react-hooks = react-hooks It took me two days to come up with it, but it was really easy to think about UI, and I found that I really couldn’t do anything, but I didn’t want to just change UI, so I asked my eldest brother, who said that you would consider the on-demand introduction of our project, so I had this record.

3. Solve

My first thing affirmation is baidu first, but a lot of configuration do not understand, so look for the official website above, get. After looking for a long time, I found a configuration that looks like this:

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

Very simple, many of them are by default. ExtraBabelPlugins mean to configure additional Babel plug-ins. When the importLibToEs are true, the default path is to get the package from the es directory. When it is imported from other places (my project is umi project), it is fully highlighted and es is available. Then it can get the package from there and the file will be much smaller. Of course, the UMI project also needs to be configured slightly (in my project, the configuration is under umirc.ts) :

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

When it’s done, I think it’s amazing how much smaller the package is. So I’m just going to record that in case I run into something like this loading on demand doesn’t work.