记录基于 antd 封装业务组件并发布到npm 上的过程：(TS + React + Sass)
初始化项目：
1.yarn create react-app winyhui --typescript
引入antd
2.yarn add antd
高级配置
我们需要对 create-react-app 的默认配置进行自定义
3.yarn add react-app-rewired customize-cra
引入 react-app-rewired 并修改 package.json 里的启动配置
按需加载
按需加载组件代码和样式
4.yarn add babel-plugin-import
const { override, fixBabelImports } = require('customize-cra');module.exports = override(fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: 'css',}),
);
最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载。
至此，基本配置已完成，下一步就是基于 antd 封装业务组件
antd UI 源码结构分析：
ant-design通过npm install安装后，antd目录下面有一个dist目录，lib目录, es目录和一个package.json文件。package.json中的main对应文件lib/index.js， module对应文件 es/index.js。
dist, lib目录分别使用npm run dist, npm run compile生成。
npm run compile 将源码转换为ES5到lib文件夹中。JS源码是TypeScript实现的, css使用less实现。
注意点：⚠️
1.发布npm 包需要先注册 npmjs 仓库的账号，首次发布前需要先登录。
2.发布过npm包，再次发布时，只需要运行 npm publish， 发布前一定要迭代版本号（0.0.1 => 0.0.2），否则终端会抛出 403 状态码。
3.发布前一定要编译，将jsx 语法转成 js 语法。
4.标准仓库需要包含基本的项目结构:
"main": "lib/index.js", 字段表示包的入口文件
"files": [
"dist",
"lib"
] 字段表示将会发布到 npm 仓库的文件夹
组件说明文档选用 storybook
注意事项：
storebook 是一个独立的环境，所以需要再 .storybook/config.js 里 引入你的 css
如果你是 less，还需要有个 .storybook/webpack.config.js，加入处理 less 的相关配置。
1. 在 storybook 中引入 antd ,样式不生效，需要单独配置 在 .storybook文件夹下 配置 webpack.config.js
const path = require("path");module.exports = {module: {rules: [{loader: 'babel-loader',exclude: /node_modules/,test: /\.js$/,options: {presets: ["@babel/react"],plugins: [['import', {libraryName: "antd", style: true}]]},},{test: /\.less$/,loaders: ["style-loader","css-loader",{loader: "less-loader",options: {modifyVars: {"@primary-color": "#1890ff"},javascriptEnabled: true}}],include: path.resolve(__dirname, "../")}]}
};
参考链接：http://joescott.coding.me/blog/2017/04/17/antd-source-code/
https://codeday.me/bug/20190627/1303830.html