本文是使用 Typescript 开发类 antd 分页器，并发布 npm 的第三篇，因为最近在业务中使用了 antd 中的 Pagination 开发了相关业务，而自己又对组件的封装由很有兴趣，所以打算用 ts 来封装一个具有 antd 所有功能的 Pagination。相信你也能轻轻松松的发布一个 npm 组件了。
相关系列文章
从零开始实现类 antd 分页器(一)：搭建项目架构
从零开始实现类 antd 分页器(二)：分页核心代码
从零开始实现类 antd 分页器(三)：发布npm
写作过程中有些方法的具体实现没有讲到，大家可以自行查看源码。本案例项目仓库:
闲来无事，造个轮子 —— darrell-wheels
发布到 npm
组件打包
我们修改 package.json 中的 main 字段，它的作用是声明组件的入口文件。
开发者在 import我们的组件的时候会引入main 字段中 export 的内容。
到现在为止我们的 package.json 内容如下：
{
"name": "darrell-wheels",
"version": "1.0.6",
"description": "some wheels",
"main": "lib/index.js",
"scripts": {
"start": "webpack-dev-server --config config/webpack.dev.config.js",
"build": "webpack --config config/webpack.prod.config.js",
"pub": "npm run build && npm publish"
},
"repository": {
"type": "git",
"url": "git+https://github.com/darrell0904/darrell-wheels.git"
},
"keywords": [
"wheels",
"pagination"
],
"author": "darrell",
"license": "ISC",
"bugs": {
"url": "https://github.com/darrell0904/darrell-wheels/issues"
},
"homepage": "https://github.com/darrell0904/darrell-wheels#readme",
"devDependencies": {
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^0.21.0",
"ts-loader": "^6.2.1",
"tslint": "^5.20.1",
"tslint-config-prettier": "^1.15.0",
"tslint-config-standard": "^8.0.1",
"tslint-loader": "^3.5.4",
"typescript": "^3.7.3",
"uglifyjs-webpack-plugin": "^1.2.7",
"url-loader": "^3.0.0",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.2.2"
},
"dependencies": {}
}
复制代码
组件测试
在发布到 npm 之前，我们需要自己先测试一下组件的功能。
我们可以使用 npm link 把打包之后的组件引入到全局 node_modules 中，在根目录下运行命令：
npm run build
npm link
复制代码
接着我们进入到 example/src 文件，使用如下命令，将刚刚引入到全局的 darrell-wheels 映射到项目的 node_modules 中去：
cd example/src
npm link react-demo-component
复制代码接着修改 example/src/app.js 中的内容：
// import { Pagination } from '../../src/index';
import { Pagination } from 'darrell-wheels';
new Pagination('#pagination', {
total: 500,
onChange: (page, pageSize) => {
console.log('---page---', page);
console.log('---pageSize---', pageSize);
},
onShowSizeChange: (page, size) => {
console.log('---page--11-', page);
console.log('---size--11-', size);
},
});
复制代码我们可以看到页面中出现了分页组件，如下图：
到这里我们组件内部测试算是通过了，接下去我们就发布到 npm 上去。
发布组件
配置 .npmignore
此文件的作用就是：指定发布 npm 的时候需要忽略的文件和文件夹。如果省略掉这一项，所有文件包括源代码会被一起上传到 npm，如下所示。
# 指定发布 npm 的时候需要忽略的文件和文件夹
# npm 默认不会把 node_modules 发上去
config # webpack配置
example # 开发时预览代码
src # 组件源代码目录
.babelrc # babel 配置
复制代码
注册 npm 账号并发布
注册 npm 账号，有一点我们需要注意，一半我们在使用 npm 的时候 会用 taobao 的镜像，因为这样速度会比较快，但是当我们传到 npm 时，一定要切换到官方源。
我们可以通过 npm config list 查看当前使用的源地址，通过以下命令切换 npm 源：
npm config set registry http://registry.npmjs.org
复制代码我们也可以使用 nrm 来更方便的进行源管理，具体我这里就不详细说了，大家可以看：使用NRM进行NPM的源管理
最后我们使用 npm run pub 命令发布组件到 npm。
当看到下图，说明发布成功了：
我们在官网上搜索 darrell-wheels，可以看到如图：
在项目中使用
我们在 react 项目中使用一下，在这里我们就使用 create-react-app 快速搭建一个 react 项目：
// 全局安装 create-react-app
npm install create-react-app -g
// 使用 create-react-app 创建 my-app
create-react-app my-app
// 创建成功后，我们进入 my-app，并启动项目
cd my-app
npm start
复制代码
出现下图，说明项目启动成功：
接着我们安装 darrell-wheels：
npm install darrell-wheels -D
复制代码
最后我们修改一下 App.js 文件：
import React from 'react';
import './App.css';
import { Pagination } from 'darrell-wheels';
function itemRender(current, type, originalElement){
if (type === 'prev') {
return 上一个;
}
if (type === 'next') {
return 下一个;
}
if (type === 'page') {
return {`第${current}个`}
}
return originalElement;
}
class App extends React.Component{
componentDidMount() {
if (this.Pagination) {
new Pagination('#Pagination', {
total: 500,
showTotal: (total: any, range: any) => {
return `${range[0]}-${range[1]} of ${total} items`;
},
simple: false,
onChange: (page: any, pageSize: any) => {
console.log('---onChange---', page);
console.log('---onChange---', pageSize);
},
onShowSizeChange: (page: any, size: any) => {
console.log('---onShowSizeChange---', page);
console.log('---onShowSizeChange---', size);
},
itemRender: (current: any, type: any, originalElement: any): any => {
function createAEle (content: string){
let aEle = document.createElement("a");
aEle.innerHTML = content;
return aEle;
}
if (type === 'prev') {
return createAEle('上一个');
}
if (type === 'next') {
return createAEle('下一个');
}
if (type === 'page') {
return createAEle(`第${current}只`);
}
return originalElement;
}
});
}
}
render() {
return (
id="Pagination"
className="Pagination"
ref={
(Node) => {
this.Pagination = Node;
}
}
>
11111
);
}
}
export default App;
复制代码
重新运行一下 npm start ，我们可以看到 my-pagination 已经开始工作了：
小结
这篇文章是这个系列的最后一篇文章，到这里我们也完成了从零开始使用 typescript 开发一个类 antd 的分页器元素，通过这次开发，让我对 插件的开发流程、webpack 的配置、typescript 的基础使用、插件的打包发布测试 等大体有了一个比较清楚的认知。
希望能对大家有所帮助。
参考内容
4342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
