npm上传自己的包详细过程（从创建到删除）

最新推荐文章于 2024-05-21 15:41:30 发布

提哑巴的喇叭

最新推荐文章于 2024-05-21 15:41:30 发布

阅读量716

点赞数 4

分类专栏：前端文章标签： npm 前端 javascript

本文链接：https://blog.csdn.net/qq_41989905/article/details/127689021

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

npm上传自己的包详细过程

开发

要上传一个自己的包，首先你得开发一个包；

在你想要创建的地方作为根目录，打开cmd

先登录npm

这里切记你本地源地址是npm的地址不可以是cnpm地址也不可以是淘宝镜像地址，更不可以是公司内网地址；

可以使用 npm config get registry 来查看；假如不是的话可以执行 npm config set registry https://registry.npmjs.org

然后执行 npm login 按照提示输入用户名密码邮箱验证；

然后正式开始创建包的项目

执行命令 npm init 照着图片操作

npm init

在这里插入图片描述

然后会给你的文件夹中生成一个package.json 文件；

在和package.json 同级下新建一个index.js 作为入口文件；

新建一个readme.md 作为你对你这个包的一个简介，里面内容自己写；

新建一个 .npmignore 文件作用、用法同git的 .gitignore 相同，都是忽略某些指定的文件；

再新建一个src，里面就可以放你自己想要封装的东西了，我做举例演示新建了个 dataFormat.js ；

整体的文件结构如图所示：

在这里插入图片描述

index.js 中的内容

import {hideStr} from './src/dataFormat'


export default {
    hideStr
}

dataFormat.js 中的内容

/**
 * @description: 隐藏部分文字 显示为*号 如果只有两位,则后一个字替换成"*"
 * @param {*} str 传入的原始数据
 * @param {*} frontLen 前面需要保留几位
 * @param {*} endLen 后面需要保留几位
 * @return {*}
 */
 export function hideStr(str, frontLen, endLen) {
    let newStr
    const len = str.length - frontLen - endLen
    if (str.length === 2) {
      newStr = `${str.substring(0, 1)}*`
    } else if (str.length > 2) {
      let char = ''
      for (let i = 0; i < len; i++) {
        char += '*'
      }
      newStr = str.substring(0, frontLen) + char + str.substring(str.length - endLen)
    } else {
      newStr = str
    }
    return newStr
  }

package.json 中的内容，这个也就是你包的配置项，就是刚刚自动生成的那个，你可以根据需求去改

{
  "name": "format-value",
  "version": "1.0.0",
  "description": "一个格式化数据的包",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "format-value"
  ],
  "author": "maokq",
  "license": "ISC"
}

这个时候你的npm包就编写好啦，那么，下一步上传

上传

同样，在刚刚那个cmd窗口中，执行命令 npm publish
```
npm publish
```

在这里插入图片描述

可以看到啊，我们这里报错了，这里是指我包的 name 字段和已有的包重名了，那我们改一个名字再试一次；
在这里插入图片描述

果然重名了，改了就行了，这个时候你就完成了你自己的npm包的上传，那么怎么使用呢

调用

调用嘛，和一般的npm包都一样的，先install 然后再去 import 再去用就好了；

我们先去官网搜一下自己的这个包

可以看到，已经有了哈，接下来，我们打开一个项目 npm i format-value-mkq 安装依赖，装完后import使用；
```
<template>
    <div>
        测试demo
    </div>
</template>

<script>
import ValueFormat  from 'format-value-mkq'
export default {
    data() {
        return {

        };
    },
    created() {
        console.log(ValueFormat.hideStr('123456789',3,3),'我tm来辣')
    },
    mounted() {

    },
    methods: {

    }
};
</script>
```
好，我们做一个包，必定会去做更新迭代，那么npm包怎么去更新呢？
更新

更新很简单，当你完成了你的内容修改后，确认要更新啦，那么，依次执行俩个命令

npm version patch 这个命令会自增我们包中 package.json 中的一个版本号，切记不要去更改 package.json 中的name，因为npm更新是根据name去更新对应的包的；

然后和发布一样执行 npm publish 就行了，就更新好；
优化配置

可以根据自己的实际需求配置 package.json 中的配置，具体的详细的配置上网搜一下就都有了；（其实是因为自己懒，也没有做优化配置）
删除

哎嘿~全都弄完了，我喜新厌旧了，我有新包了，新包有你这个包所包含的所有功能，我不要你了，我要删了你，怎么办呢？

创造是复杂的，毁灭总是简单的，一行命令搞定， npm unpublish 包名 --force 我这里删一个无用的包做测试
```
npm unpublish 包名 --force
```