如何发布自定义的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/
https://codeday.me/bug/20190627/1303830.html
如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档的更多相关文章
- 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
- 使用web-component搭建企业级组件库
组件库的现状 前端目前比较主流的框架有react,vuejs,angular等. 我们通常去搭建组件库的时候都是基于某一种框架去搭建,比如ant-design是基于react搭建的UI组件库,而ele ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- 「前端」尚妆 UI 组件库工程实践(weex vue)
本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言 尚妆大前端团队使用 weex 进行三端统一开发有一段时间了,截止本文发表「达人店」APP大部分页面都已经用 weex 进行了重构 ...
- 【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
- 前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
- Wuss Weapp 微信小程序 UI 组件库
微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...
随机推荐
- python_requests ~爬虫~小视频~~~
当一只小小的Py_Spider也有一段时间了, 期间,更多的时间是在爬取图片啊, 文字, 文档这类的东西, 今天突然一时兴起, 来爬一手视频! 所以就找到了远近闻名的六间房(六扇门)哈哈,~~~ 1. ...
- Java switch语句使用注意事项
1.多个case后面的值不可以重复 2.switch后面小括号的数据类型(case 后面的数值类型)只能是以下类型 基本数据类型: byte / short / char / int 引用数据类型:S ...
- ajax跨域-CORS
CORS:跨域资源共享,是一种跨域访问的W3C标准,它允许浏览器可以跨源服务器进行请求,可以让ajax实现跨域访问.出现跨域问题的原因是浏览器同源策略导致的,协议+域名+端口三者一致被认为是同源.网站 ...
- 02_SAE中创建数据表
Step1:进入新浪云应用数据库点击应用名称,进入到该应用管理界面,在数据库服务中点击“共享型MySQL”: 开启MySQL服务,使用PHPMyAdmin管理数据库,进入MySQL数据库管理界面: S ...
- C结构体指针的初步使用
#include <stdio.h> #include <string.h> struct Books { char title[50]; //char author[100] ...
- vundle 管理插件
前言:如果不使用vundle的话,进行插件的安装,配置和管理相对会麻烦,曾经没使用vundle的时候我经常遇到无法安装一些vim插件.但使用vundle后你只要在文件中添加一行你的插件名再安装就OK了 ...
- P1088 火星人——全排列函数
P1088 火星人 algorithm里面有一个next_permutation(a,a+n); #include<cstdio> #include<cstring> #inc ...
- 怎么用switchhost
第一步:打开exe, 第二部:在 My hosts 里面直接添加路径 106.75.131.183 npm.kuaizitech.cn 第三部 :打开my hosts 保护好眼睛,早睡早起,多运动,k ...
- ICEM-八分之一球体
原视频下载链接:https://yunpan.cn/c6seunjgbwRhJ 访问密码 c780
- LDA算法 (主题模型算法) 学习笔记
转载请注明出处: http://www.cnblogs.com/gufeiyang 随着互联网的发展,文本分析越来越受到重视.由于文本格式的复杂性,人们往往很难直接利用文本进行分析.因此一些将文本数值 ...