如何发布自定义的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 ...
随机推荐
- RCNN,Fast RCNN,Faster RCNN 的前生今世:(4) Fast RCNN 算法详解
继2014年的RCNN之后,Ross Girshick在15年推出Fast RCNN,构思精巧,流程更为紧凑,大幅提升了目标检测的速度.在Github上提供了源码. 同样使用最大规模的网络,Fast ...
- BurpSuite安装、使用
本周学习内容: 1.学习<网络是怎么连接的>和JavaScript: 2.学习MySQL和Linux: 3.熟悉burpsuite: 4.使用wireshark观察数据包: 5.XAMPP ...
- Windows异常
一.什么是异常 异常指的是在程序运行过程中发生的异常事件,通常是由外部问题(如硬件错误.输入错误)所导致的.简单来说异常就是对于非预期状况的处理,当我们在运行某个程序时出现了异常状况,就会进入异常处理 ...
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- C++语言第一课的学习
// HelloApp.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include ...
- 【洛谷】P2568 GCD
前言 耻辱,我这个OI界的耻辱! 题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对.输入格式 一个整数N输出格式答案输入输出样例 输入 4 ...
- ubuntu进程监视器htop 清除黄色内存(缓存)
大意是:对于CPU显示条: 蓝色为:低优先级的线程 绿色为:正常优先级线程 红色为:内核线程 对于内存显示条: 蓝色为:缓冲区(buffers) 绿色为:已使用的内存 (橘)黄色为:高速缓存(cach ...
- GIS地理工具案例教程——批量去除多边形的之间的间隙
GIS地理工具案例教程--批量去除多边形的之间的间隙 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 问题:几乎所有的手工生产的数据,都存在多边 ...
- transition 滑动动画
html: <!-- 组件会在 `currentTabComponent` 改变时改变 --> <transition name="slide" mode=&qu ...
- PHP 输出日志到文件 DEMO
首先需要确保输出文件有权限写入,一般设置权限为 chown -R nginx.nginx 输出的文件路径 如果以上方法还是无效,可以直接将文件设置有777,但是这种方式只能用于测试环境 chmod - ...