前言：日常的项目开发中，通常会用到各种工具函数，比如时间戳转换，去重，节流，防抖等，这些方法我们通常会放在项目的utils中。但是如果我们切换到另外的项目，又会创建一个utils来满足目前项目所需要的公共的函数。如此重复，代码复用性不仅低，管理起来也不方便，因此我们创建一个自定义函数工具库发布到NPM上，如果不仅方便管理，不同的项目只要安装就能够直接使用。
走起~~~
创建工具包项目
-
安装Node
- 检查是否已经安装node（node中自带npm）
node -v-
npm -v
image.png
-
创建项目
- 创建一个空的项目文件：tools-fn-library
- 在文件夹下执行命令
npm init -y- 会在文件下面自动创建一个package.json文件
-
下载依赖包
npm i webpack webpack-cli-
会在文件下面自动创建一个node_modules文件夹
image.png
-
配置webpack
-
webpack.config.js必须是在根目录下，并且文件名不能改变
-
// 引入 nodeJS 内置模块 path
const path = require('path');
module.exports = {
// 模式
mode: 'development', // 也可以使用 production
// 入口
entry: './src/index.js',
// 出口
output: {
// 打包文件夹
path: path.resolve(__dirname, 'dist'),
// 打包文件 打包后该文件在dist文件夹下面
filename: 'tools-utils.js',
// 向外暴露的对象名称
library: 'mUtiles',
// 打包生成库可以通过esm/commonjs/reqirejs的语法引入
libraryTarget: 'umd'
}
}
- 在入口JS中暴露功能
src/index.js
export function test() { document.write('测试自定义包') console.log('text()'); } - 配置打包命令
package.json
"script": { "build:watch": "webpack --watch" } - 对项目进行打包
- 会自动生成一个dist文件下，下面的
tools-utils.js就是我们需要引用的jsnpm run build:watch
到此示例已经打包完成，如果使用呢
- 创建一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../dist/tools-utils.js"></script>
</head>
<body>
<script>
console.log('mUtils', mUtils);
mUtils.test()
</script>
</body>
</html>
image.png
- 说明成功，接下来就是把我们之前写的公共的方法引入到
index.js中，并打包使用
- 引入公共文件
src/chunk.js
/**
* @description: 数组分组
* @param {Array} arr [1,2,3,4,5]
* @return {Number} size 2
* @result {Arrsy} [[1,2],[3,4],5]
*/
export function chunk(arr, size = 1) {
if (arr.length === 0) {
return [];
}
// 声明两个变量
let result = [];
let tmp = [];
arr.forEach(item => {
// 判断 tmp 元素长度是否为 0
if (tmp.length === 0) {
// 将 tmp 压入到 result 中
result.push(tmp);
}
tmp.push(item)
if (tmp.length === size) {
tmp = [];
}
})
return result;
}
index.js
export function test() {
document.write('测试自定义包')
console.log('text()');
}
// 方法一：引入其他文件，任何再暴露
// 1. 目标文件中暴露数据 export 数据
import { chunk } from './chunk';
// 2. 暴露数据
export { chunk }
// 方法二
export { apply } from './apply'
image.png
发布到npm中央仓库
- 完善 package.json
- 注意：
- name：必须是唯一的名称（在npm在线中央仓库中没有同名的）
- main：必须指定为打包生成的js文件
- keywords：指定一些方便别的程序员搜索到当前库的关键字
- 注意：
{
"name": "mine-tools-utils",
"version": "1.0.0",
"description": "<!--\r * @Author: lu\r * @Date: 2021-02-23 10:41:08\r * @LastEditTime: 2021-06-18 17:20:44\r * @FilePath: \\tools-fn-library\\README.md\r * @Description: \r -->\r # tools-fn-library\r # 自定义工具函数库",
"main": "./dist/tools-ultils.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:watch": "webpack --watch"
},
"repository": {
"type": "git",
"url": "git+https://github.com/lupei07/tools-fn-library.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/lupei07/tools-fn-library/issues"
},
"homepage": "https://github.com/lupei07/tools-fn-library#readme",
"dependencies": {
"webpack": "^5.39.1",
"webpack-cli": "^4.7.2"
}
}
-
npm 配置
- npm配置的中央仓库不能是淘宝镜像
- 发布前必须先执行：
npm config set registry https://registry.npmjs.org/ - 不用发布时：
npm config set registry http://registry.npm.taobao.org/ - 查看配置：
npm config list
-
注册npm中央仓库账号
- 注册地址：https://www.npmjs.com/
- 关键信息：用户名/密码/邮箱（需要验证）
-
添加用户
- 执行：
npm addUser或者npm login - 登录npm仓库
- 一次指定用户名/密码/邮箱
- 执行：
-
发布仓库
- 发布：
npm publish
- 发布：
-
升级更新
- 修改项目库的版本号：package.json 中的version 从1.0.0改为1.0.1，注意一定要变大
- 修改代码后重新打包：
npm run build - 执行发布：
npm publish
-
强制删除已发布的库
- 执行：
npm unpublish --force - 注意：必须在72小时内，否则不能再删除
- 执行：
-
引入使用
- 安装
npm i mine-tools-utils - 引用：
<script src="./node_modules/mine-tools-utils/dist/tools-utils.js"></script> - 升级包：
upgrade mine-tools-utils
- 安装
