本文是使用
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 <a>上一个</a>;
}
if (type === 'next') {
return <a>下一个</a>;
}
if (type === 'page') {
return <a>{`第${current}个`}</a>
}
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 (
<div
id="Pagination"
className="Pagination"
ref={
(Node) => {
this.Pagination = Node;
}
}
>
11111
</div>
);
}
}
export default App;
重新运行一下 npm start ，我们可以看到 my-pagination 已经开始工作了：
小结
这篇文章是这个系列的最后一篇文章，到这里我们也完成了从零开始使用 typescript 开发一个类 antd 的分页器元素，通过这次开发，让我对 插件的开发流程、webpack 的配置、typescript 的基础使用、插件的打包发布测试 等大体有了一个比较清楚的认知。
希望能对大家有所帮助。
