You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import "antd/es/card/style";
import _Card from "antd/es/card";
import "antd/es/typography/style";
import _Typography from "antd/es/typography";
CommonJS 打包代码:
require("antd/es/card/style");
var _card = _interopRequireDefault(require("antd/es/card"));
require("antd/es/typography/style");
var _typography = _interopRequireDefault(require("antd/es/typography"));
原文链接
引言
在前面的部分,我们使用 React 等相关技术构建了库并对其进行了测试。现在,我们准备对前面的代码进行打包,并将其发布至 NPM,方便其他人使用。
教程部分
本篇文章,是这个系列的第三篇::项目打包,并发布至 NPM
靠谱的(文档 + 打包)工具 :father
组件库开发到了这里,终于也到了最重要的部分,解决(文档 + 打包)的问题。
在尝试了一些打包库(比如create-react-library),和文档库(React Styleguidist)之后,都没有达到想要的效果。
直到B站的一个视频:利用 umi-library 做组件打包,答案就变得简单而明显了,就是利用云谦大大开源的组件打包利器:umijs/father,来完成最后一步。
因为目前整个打包工具会把
src
作为入口。为了避免前面路由,首页等代码被打包进去,这里对项目结构做出了较大的改动,新增加了entry
作为路由的入口,而src
则作为组件的入口。建议参考下 dantd 中的目录结构。package.json 以及字段详解
项目初始化之后,接下来,用编辑器打开这个项目,并修改
package.json
中下面属性:添加好之后,运行:
npm install
安装依赖。在等待的同时,让我们了解一下上述属性的具体含义:npm
包的入口文件,browser 环境和 node 环境均可使用npm
包的 ESM 规范的入口文件,browser 环境和 node 环境均可使用Antd
进行简单封装的,所以,在使用这个组件库的时候,也需要安装对应版本的Antd
等依赖。father 初体验:打包第一个组件
这里,我们来给:
EmptyLine
加上文档即可。为了方便阅读,这里还是放上了组件的所有相关代码。src/index.tsx
src/empty-line/index.tsx
src/empty-line/index.mdx
src/empty-line/EmptyLine.tsx
src/empty-line/style/index.less
.fatherrc.js
更多配置项,欢迎探索文档:umijs/father
tsconfig.json
添加这些文件之后,运行
npm start
,就可以看到下面的界面了。如果想引入
Antd
,直接引入就行,上面的配置中,已经增加了:extraBabelPlugins
。可以按需加载 antd。组件中引入代码:
ES6 打包代码:
CommonJS 打包代码:
打包代码,并发布至 NPM
首先,运行
father build
打包代码。可以看到,
father
会分别根据:umd、cjs、es 这三种格式进行打包,打包之后会看到多出了下面这些文件。此时,可以看到三种类型的包,已经被成功打出来了。那是不是这个时候就可以上传至
npm
了呢?还不行,对比
Antd
的npm
包之后,会发现es
和lib
两个目录下,还没有类型文件。需要将dist
目录下的文件拷贝过来,并把文件中的.less
改成.css
。这里准备写2个脚本 hack 一下。安装依赖:
增加2个脚本:
修改打包命令:
运行:
npm run build
这次打包之后的文件,就可以上传至
npm
了。首先登陆
npm
:使用 git 提交所有代码,然后修改版本号,并发布代码:
到了这里,我们的第一个属于自己的组件库就被上传至
npm
了,我们可以使用:npm install dantd
下载我们的安装包,并在项目中使用里面的组件了。打包文档,并发布至 GitHub Pages
首先,在
package.json
文件中,添加git
地址,便于之后文档的发布:运行下面命令打包文档:
运行下面命令发布文档:
然后访问对应的地址就可以看到我们发布到线上的组件文档了:dantd
结束语
属于我们自己的第一个组件库,就这样被发布到
npm
了。🎉🎉🎉 但是,这个组件库需要写哪些组件进去,是我们接下来需要考虑的。如果您喜欢这个系列,欢迎评论,分享文章链接。此外,也欢迎多多吐槽,🙏 这些反馈对我来说是非常宝贵的,以便我将来写出更优秀的文章。
The text was updated successfully, but these errors were encountered: