记录基于 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/

     https://codeday.me/bug/20190627/1303830.html

如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档的更多相关文章

  1. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  2. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  3. 使用web-component搭建企业级组件库

    组件库的现状 前端目前比较主流的框架有react,vuejs,angular等. 我们通常去搭建组件库的时候都是基于某一种框架去搭建,比如ant-design是基于react搭建的UI组件库,而ele ...

  4. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  5. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  6. 「前端」尚妆 UI 组件库工程实践(weex vue)

    本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言 尚妆大前端团队使用 weex 进行三端统一开发有一段时间了,截止本文发表「达人店」APP大部分页面都已经用 weex 进行了重构 ...

  7. 【转】前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  8. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  9. Wuss Weapp 微信小程序 UI 组件库

    微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...

随机推荐

  1. RCNN,Fast RCNN,Faster RCNN 的前生今世:(4) Fast RCNN 算法详解

    继2014年的RCNN之后,Ross Girshick在15年推出Fast RCNN,构思精巧,流程更为紧凑,大幅提升了目标检测的速度.在Github上提供了源码. 同样使用最大规模的网络,Fast ...

  2. BurpSuite安装、使用

    本周学习内容: 1.学习<网络是怎么连接的>和JavaScript: 2.学习MySQL和Linux: 3.熟悉burpsuite: 4.使用wireshark观察数据包: 5.XAMPP ...

  3. Windows异常

    一.什么是异常 异常指的是在程序运行过程中发生的异常事件,通常是由外部问题(如硬件错误.输入错误)所导致的.简单来说异常就是对于非预期状况的处理,当我们在运行某个程序时出现了异常状况,就会进入异常处理 ...

  4. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  5. C++语言第一课的学习

    // HelloApp.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include ...

  6. 【洛谷】P2568 GCD

    前言 耻辱,我这个OI界的耻辱! 题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对.输入格式  一个整数N输出格式答案输入输出样例  输入  4  ...

  7. ubuntu进程监视器htop 清除黄色内存(缓存)

    大意是:对于CPU显示条: 蓝色为:低优先级的线程 绿色为:正常优先级线程 红色为:内核线程 对于内存显示条: 蓝色为:缓冲区(buffers) 绿色为:已使用的内存 (橘)黄色为:高速缓存(cach ...

  8. GIS地理工具案例教程——批量去除多边形的之间的间隙

    GIS地理工具案例教程--批量去除多边形的之间的间隙 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 问题:几乎所有的手工生产的数据,都存在多边 ...

  9. transition 滑动动画

    html: <!-- 组件会在 `currentTabComponent` 改变时改变 --> <transition name="slide" mode=&qu ...

  10. PHP 输出日志到文件 DEMO

    首先需要确保输出文件有权限写入,一般设置权限为 chown -R nginx.nginx 输出的文件路径 如果以上方法还是无效,可以直接将文件设置有777,但是这种方式只能用于测试环境 chmod - ...