如何发布自定义的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, "../")
            }
        ]
    }
};