记录一次发布js工具函数包到npm

95 阅读2分钟

1.创建一个空的npm包,初始化包

创建一个文件夹selflodash,在这个文件夹下执行npm init -y

npm init -y

生成的package.json如下:

{
  "name": "selflodash",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",   // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
  }
}

2.入口文件

创建src/index.js入口文件,在package.json中的main中填入"main": "src/index.js"

3.创建功能函数文件夹

src下创建array文件夹,用来存放处理数组的一些工具函数,例如创建一个求和方法getTotal.js

//  src/array.getTotal.js
/**
 * @description: 计算数组元素的总和
 * @param { Array } arr 需要计算总和的数组
 * @return { Number } 所有元素的总和
 */
const getTotal = (arr) => arr.reduce((pre, cur) => pre + cur, 0);

/**
 const ages = [1,3,5,7,8]
 const result = getTotal(ages)
 console.log(result) //=> 24
 */

export default getTotal;

接着创建一个数组去重的方法arrWithoutDupli

// src/array/arrWithoutDupli.js
/**
 * @description 删除数组中的重复项
 * @param { Array } arr 目标去重的数组
 * @return { Array } 数组去重后的结果
 */

const arrWithoutDupli = (arr) => [...new Set(arr)];

export default arrWithoutDupli;

在array下创建index.js文件导出所有的数组处理方法

// src/array/index.js
// 计算数组元素的总和
import getTotal from "./getTotal";

//数组去重
import arrWithoutDupli from "./arrWithoutDupli";

export { getTotal, arrWithoutDupli };

4.导出所有工具函数

在入口文件index.js中导出所有的方法

// 数组
export * from "./array/index";

目录文件如下:

image.png

5.发布

在终端输入npm login,进行登录,没有npm账号的先去npm官网注册账号,输入npm login之后可能会有报错,Unexpected token < in JSON at position 0 while parsing near '<!DOCTYPE HTML PUBLI...',这时候检查你的node.js版本,我这里用的v14版本会报错,升级到v16之后就可以了。 这时候继续知名npm login 会报下面这个错<https://registry.npmmirror.com/-/user/org.couchdb.user:chen_pengchao> - [FORBIDDEN] Public registration is not allowed

这时候还需要指回默认的官方注册服务器:执行以下命令: npm config set registry https://registry.npmjs.org/ 然后再尝试注册没有任何问题了。 输入账号密码之后,还让你输入邮箱,会给你邮箱发一个验证码,输入验证码之后,执行npm publish就能发布到npm了。

注意:包的名字要符合规范,比如不能含有大写字母,这个可自行查看规则

6.使用

import { arrWithoutDupli } from 'selflodash'

onMounted(() => {
  const arr = [1, 2, 3, 1, 1]
  console.log('arrWithoutDupli  arr', arrWithoutDupli(arr)) //  [1,2,3]
})