前端自定义函数工具库

2021-06-21 本文已影响0人小鹿儿绵绵

前言：日常的项目开发中，通常会用到各种工具函数，比如时间戳转换，去重，节流，防抖等，这些方法我们通常会放在项目的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 就是我们需要引用的js
```
npm 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

前端自定义函数工具库

创建工具包项目

发布到npm中央仓库

猜你喜欢

热点阅读