DUMI 开发组件库踩坑记录和笔记

1、不知道是mfsu 有缓存还是umi项目本身就存在缓存问题，如果发现修改后页面未生效可以删除.umi 再重启试试

2、在组件内建example文件夹存放示例代码，在md文件内使用code引入，运行和打包都会报错，提示找不到模块“pro-tea-components”或其相应的类型声明。

Cannot find module 'pro-tea-components' or its corresponding type declarations.

（不知道咋么解决，可以加@ts-ignore，但是解决方式不优雅）

2.1 运行报错的解决方案是在umirc.ts中配置alias，指向项目的src

chainWebpack(memo) {

    memo.resolve.alias.set(PackageJson.name, '/src');

  },

2.2 打包报错的解决方案是

GitHub - umijs/father: Library toolkit based on rollup and babel.

文档说demos 目录不会被编译到 es 和 lib 下

所以把example换成了demos

3、fatherjs打包疑似不走umirc的配置，在umirc配置define的变量，打包是会报找不到变量的错

4、还有一个问题是，在umirc配置的lessLoader

lessLoader: {

    globalVars:{

       prefix: 'pro-tea'

     },

     modifyVars: {

       hack: 'true; @import "~@/styles/index.less";',

     },

   },

styles/index.less 里面是一些less变量和less mixins的东东

Fatherjs打包也会提示找不到prefix等less变量的问题

4.1 最后的解决方案是样式文件自己引入[捂脸.jpg]

@import '../../styles/index.less';

4.2 找到一个配置是在fatherrc.ts中配置，可以配置less的全局变量，但是一些全局的mixins的less文件不知道怎么配置，同样配置umirc的modifyVars，不生效

lessInBabelMode: {

    globalVars: {

      prefix: 'pro-tea',

    },

    javascriptEnabled: true,

  },

5、把react配置在peerDependencies，避免存在两个不同的版本，提示invalid hook call，这里需要在devDependecis中安装react

"peerDependencies": {

    "react": "^16.12.0"

  },

6、打包后的docs-dist样式不生效，解决方法是在package.json配置sideEffects:true

7、配置babel模式打包，在代码内使用@/引入的，会报找不到模块的错

解决方法是

npm i eslint-import-resolver-babel-plugin-root-import babel-plugin-import babel-plugin-root-import —save-dev

在fatherrc.ts配置

extraBabelPlugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathSuffix: 'src/‘,
        rootPathPrefix: ‘@/‘,
      },
    ],
  ],

在eslint配置

settings: {

    'import/resolver': {

      'babel-plugin-root-import': {

        rootPathSuffix: 'src/‘,

        rootPathPrefix: ‘@/‘,

      },

    },

  },

参考掘金

8、在babel打包模式下 使用css modules引入的less文件，build会提示找不到模块声明，但是tscofing是有引入typings.d.ts的，在这个文件中进行了声明，但是不生效，因为gulp打包忽略了.d.ts文件

解决方法是在入口文件添加

/// <reference path="../typings.d.ts" />

build时声明文件typings.d.ts需要在哪里配置 · Issue #48 · umijs/father · GitHub