前言：日常的項(xiàng)目開(kāi)發(fā)中蘸劈，通常會(huì)用到各種工具函數(shù)，比如時(shí)間戳轉(zhuǎn)換尊沸，去重威沫，節(jié)流，防抖等洼专，這些方法我們通常會(huì)放在項(xiàng)目的utils中棒掠。但是如果我們切換到另外的項(xiàng)目，又會(huì)創(chuàng)建一個(gè)utils來(lái)滿(mǎn)足目前項(xiàng)目所需要的公共的函數(shù)屁商。如此重復(fù)烟很，代碼復(fù)用性不僅低，管理起來(lái)也不方便蜡镶，因此我們創(chuàng)建一個(gè)自定義函數(shù)工具庫(kù)發(fā)布到NPM上雾袱，如果不僅方便管理，不同的項(xiàng)目只要安裝就能夠直接使用帽哑。
走起~~~
創(chuàng)建工具包項(xiàng)目
-
安裝Node
- 檢查是否已經(jīng)安裝node（node中自帶npm）
node -v-
npm -v
image.png
-
創(chuàng)建項(xiàng)目
- 創(chuàng)建一個(gè)空的項(xiàng)目文件：tools-fn-library
- 在文件夾下執(zhí)行命令
npm init -y- 會(huì)在文件下面自動(dòng)創(chuàng)建一個(gè)package.json文件
-
下載依賴(lài)包
npm i webpack webpack-cli-
會(huì)在文件下面自動(dòng)創(chuàng)建一個(gè)node_modules文件夾
image.png
-
配置webpack
-
webpack.config.js必須是在根目錄下谜酒，并且文件名不能改變
-
// 引入 nodeJS 內(nèi)置模塊 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',
// 向外暴露的對(duì)象名稱(chēng)
library: 'mUtiles',
// 打包生成庫(kù)可以通過(guò)esm/commonjs/reqirejs的語(yǔ)法引入
libraryTarget: 'umd'
}
}
- 在入口JS中暴露功能
src/index.js
export function test() { document.write('測(cè)試自定義包') console.log('text()'); } - 配置打包命令
package.json
"script": { "build:watch": "webpack --watch" } - 對(duì)項(xiàng)目進(jìn)行打包
- 會(huì)自動(dòng)生成一個(gè)dist文件下，下面的
tools-utils.js就是我們需要引用的jsnpm run build:watch
到此示例已經(jīng)打包完成妻枕，如果使用呢
- 創(chuàng)建一個(gè)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
- 說(shuō)明成功僻族，接下來(lái)就是把我們之前寫(xiě)的公共的方法引入到
index.js中粘驰，并打包使用
- 引入公共文件
src/chunk.js
/**
* @description: 數(shù)組分組
* @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 [];
}
// 聲明兩個(gè)變量
let result = [];
let tmp = [];
arr.forEach(item => {
// 判斷 tmp 元素長(zhǎng)度是否為 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('測(cè)試自定義包')
console.log('text()');
}
// 方法一：引入其他文件，任何再暴露
// 1. 目標(biāo)文件中暴露數(shù)據(jù) export 數(shù)據(jù)
import { chunk } from './chunk';
// 2. 暴露數(shù)據(jù)
export { chunk }
// 方法二
export { apply } from './apply'
image.png
發(fā)布到npm中央倉(cāng)庫(kù)
- 完善 package.json
- 注意：
- name：必須是唯一的名稱(chēng)（在npm在線(xiàn)中央倉(cāng)庫(kù)中沒(méi)有同名的）
- main：必須指定為打包生成的js文件
- keywords：指定一些方便別的程序員搜索到當(dāng)前庫(kù)的關(guān)鍵字
- 注意：
{
"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 # 自定義工具函數(shù)庫(kù)",
"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配置的中央倉(cāng)庫(kù)不能是淘寶鏡像
- 發(fā)布前必須先執(zhí)行：
npm config set registry https://registry.npmjs.org/ - 不用發(fā)布時(shí)：
npm config set registry http://registry.npm.taobao.org/ - 查看配置：
npm config list
-
注冊(cè)npm中央倉(cāng)庫(kù)賬號(hào)
- 注冊(cè)地址：https://www.npmjs.com/
- 關(guān)鍵信息：用戶(hù)名/密碼/郵箱（需要驗(yàn)證）
-
添加用戶(hù)
- 執(zhí)行：
npm addUser或者npm login - 登錄npm倉(cāng)庫(kù)
- 一次指定用戶(hù)名/密碼/郵箱
- 執(zhí)行：
-
發(fā)布倉(cāng)庫(kù)
- 發(fā)布：
npm publish
- 發(fā)布：
-
升級(jí)更新
- 修改項(xiàng)目庫(kù)的版本號(hào)：package.json 中的version 從1.0.0改為1.0.1述么，注意一定要變大
- 修改代碼后重新打包：
npm run build - 執(zhí)行發(fā)布：
npm publish
-
強(qiáng)制刪除已發(fā)布的庫(kù)
- 執(zhí)行：
npm unpublish --force - 注意：必須在72小時(shí)內(nèi)蝌数，否則不能再刪除
- 執(zhí)行：
-
引入使用
- 安裝
npm i mine-tools-utils - 引用：
<script src="./node_modules/mine-tools-utils/dist/tools-utils.js"></script> - 升級(jí)包：
upgrade mine-tools-utils
- 安裝
