记录基于 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. python_requests ~爬虫~小视频~~~

    当一只小小的Py_Spider也有一段时间了, 期间,更多的时间是在爬取图片啊, 文字, 文档这类的东西, 今天突然一时兴起, 来爬一手视频! 所以就找到了远近闻名的六间房(六扇门)哈哈,~~~ 1. ...

  2. Java switch语句使用注意事项

    1.多个case后面的值不可以重复 2.switch后面小括号的数据类型(case 后面的数值类型)只能是以下类型 基本数据类型: byte / short / char / int 引用数据类型:S ...

  3. ajax跨域-CORS

    CORS:跨域资源共享,是一种跨域访问的W3C标准,它允许浏览器可以跨源服务器进行请求,可以让ajax实现跨域访问.出现跨域问题的原因是浏览器同源策略导致的,协议+域名+端口三者一致被认为是同源.网站 ...

  4. 02_SAE中创建数据表

    Step1:进入新浪云应用数据库点击应用名称,进入到该应用管理界面,在数据库服务中点击“共享型MySQL”: 开启MySQL服务,使用PHPMyAdmin管理数据库,进入MySQL数据库管理界面: S ...

  5. C结构体指针的初步使用

    #include <stdio.h> #include <string.h> struct Books { char title[50]; //char author[100] ...

  6. vundle 管理插件

    前言:如果不使用vundle的话,进行插件的安装,配置和管理相对会麻烦,曾经没使用vundle的时候我经常遇到无法安装一些vim插件.但使用vundle后你只要在文件中添加一行你的插件名再安装就OK了 ...

  7. P1088 火星人——全排列函数

    P1088 火星人 algorithm里面有一个next_permutation(a,a+n); #include<cstdio> #include<cstring> #inc ...

  8. 怎么用switchhost

    第一步:打开exe, 第二部:在 My hosts 里面直接添加路径 106.75.131.183 npm.kuaizitech.cn 第三部 :打开my hosts 保护好眼睛,早睡早起,多运动,k ...

  9. ICEM-八分之一球体

    原视频下载链接:https://yunpan.cn/c6seunjgbwRhJ  访问密码 c780

  10. LDA算法 (主题模型算法) 学习笔记

    转载请注明出处: http://www.cnblogs.com/gufeiyang 随着互联网的发展,文本分析越来越受到重视.由于文本格式的复杂性,人们往往很难直接利用文本进行分析.因此一些将文本数值 ...