前言：日常的項目開發中，通常會用到各種工具函數，比如時間戳轉換，去重，節流，防抖等，這些方法我們通常會放在項目的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
- 安裝
