rollup基于antd的react业务组件库

背景

由于公司做的中后台业务控件的样式和antd存在差异，如果自己开发一套，没有那么多时间，一直以来都是复写antd的样式，但是这会有一个问题: 微前端架构的系统，组件的样式要重复的写，因此准备直接继承antd的样式，直接封装一下。

开发过程

1. 基于antd的主题定制开发，配置一下参数 antd主题定制。 问题： 稍微深入一点，发现参数太多了，短时间内很难做出来，毕竟样式要一个一个调试。 方案: 基于antd源码的方式编译一套，这样和antd保持独立，通过

import { ConfigProvider } from 'antd'; 
import './antd.abc.css'; // 这个是通过源码antd源码编译而来
// ... 
export default () => ( 
    <ConfigProvider prefixCls="antd.abc"> 
        <App /> 
    </ConfigProvider> 
);

2. 使用rollup进行组件库打包，组件文档工具我选择的是dumi。

问题

1.umd编译注入react react-dom 配之一下output

output: {
    globals: {
        react: 'React',
        'react-dom': 'ReactDom'
    }
},

2. this undefined的相关问题 配置一下

export default {
//....
context: 'window',
}

3.rollup打包没有将.less文件打包，安装rollup-plugin-less

export default {
//....
  plugins: [
// 相关api可以去官网
    less({
        insert: true
    }),
   ]
}

4. tsc编译产生.d.ts文件，tsconfig.json的配置，更多配置请参见ts官网

 "compilerOptions": {
   "outDir": "lib",
   "declaration": true,
   "declarationDir": "lib",
 }

package.json的配置，否则，开发者使用的时候会提示Cannot find module '@baidu/idaasd' or its corresponding type declarations

  "typings": "lib/index.d.ts",

发布

通过 npm pack打包要发布的内容，npm publish发布到服务器即可