如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档
记录基于 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, "../")
}
]
}
};
参考 github 开源地址：zswui
参考 github 说明文档：wiki
参考链接：http://joescott.coding.me/blog/2017/04/17/antd-source-code/