npm包的发布与安装（附带踩坑指南）

const
1,263 阅读4分钟

（一）创建npm账号

  1. 在npm官网（www.npmjs.com/ ）注册并创建npm账号

（二）创建npm包

首先说明一下，该文章是基于vite和ts发布的一个npm包，发包的核心是package.json

  1. 新建一个空文件夹，在该文件夹中创建一个项目：npm create vite ly-card
  2. 进入自己的项目：cd ly-card
  3. 在项目中的components文件夹中，新建自己将要封装并抛出的组件，我们可以起名叫Card.vue
<template>
    <div>
        <div :list="props.list" v-for="item in props.list" @click="itemClick(item.name)">{{item.name}}</div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps(['list']) // 接收传入的变量
const emit = defineEmits(["itemClick"]) // 声明触发的事件
const itemClick = ( e: string) => {
    emit('itemClick', e)
}
</script>
  1. 根目录新建index.ts文件
import { App } from "vue"
import Card from './src/components/Card.vue' // 引入我们写的组件
export default {
    install(app: App){
        app.component('card', Card) // 这里的name名很重要，他是未来标签名，供我们消费时使用，类似于我们使用Element-UI中的<el-button></el-button>
    }
}
  1. 配置vite.config.ts文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

export default defineConfig({
  plugins: [vue()],
  build:{
    outDir:'dist',
    lib: { // 设置打包出来的文件
      entry: resolve(__dirname, './index.ts'), // 组件编译时的入口文件
      name: 'card', // 项目名
      fileName: 'card' // build打包后生成的dist文件夹中的文件名
      formats:['es']
    },
    rollupOptions:{ // 打包时的配置
      external:["vue"], // 打包过程中不会对这些外部模块进行打包，而是从外部直接加载
      output:{ // 构建时的输出配置
        globals:{
          vue:"Vue"
        }
      }
    }
  }
})
  1. 配置package.json文件：（这里是发包的核心，主要关注private，version，main，files属性）
{
  "name": "ly-card", // 发布后的包名 （也就是我们日常npm上搜索的项目名）
  "private": false, // 是否私有 （设置false，如果设置成true是不允许npm发布的）
  "version": "0.0.6", // 版本号 （每次npm发布都要修改，否则会报错，发布失败）
  "description": "版本描述",
  "main": "dist/card.js", // 主入口文件
  "files": [ // 需要上传到npm的文件（一般是dist目录下的文件，也可根据需要配置）
    "dist/*"
  ],
  "keywords": ["",""], // 在npm上可搜索的关键字
  "author": "weitiantian",
  "type": "module",
  "repository": { // 仓库
    "type": "git",
    "url": ""
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}
  1. 打build包：执行命令：npm run build，这时候会在项目中生成一个dist文件夹

当然，我们也可以对将要发布的包进行配置：

  1. cd dist // 进入dist文件夹
  2. npm init -y // 生成package.json文件
  3. 在package.json文件中进行如下配置
{
  "name": "ly-card", // 包名
  "version": "0.0.6", // 包版本
  "description": "",
  "main": "card.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

（三）发布npm包

  1. 登录npm：执行命令npm login，这时候会提示你输入邮箱和密码，按照步骤操作即可
  2. 发布npm包： 执行命令npm publish，下图代表发布成功：

61FC4E4F-1170-47BF-AF75-103054479BD7.png

发包注意事项：

  1. 发布前保证npm上没有跟你相同的包名，否则无法发布。
  2. 同一个包名，每次发布的版本号不可重复。

（四）下载消费npm包

  1. 下载：npm install ly-card
  2. 全局注册：
import App from './App.vue'
import LyCard from 'ly-card'
const app = createApp(App)
app.use(LyCard)
  1. 使用组件：
<template>
  <Card/>
</template>
好了，到此为止，这就是发布并消费npm包的全部过程。
mindmap
      下面说一说我在发布包的过中遇到的几个坑：

情况一

D6EEFBE5-6B31-4C3F-8B7D-BC7AE77354D6.png

原因：当前项目的包名，与npm上已有包名重复
解决方式：将package.json中的name名重新修改，重新发布

为了避免在发包时才发现问题，所以我们在发包前可以先检查一下npm上是否有相同的包名，在浏览器中输入www.npmjs.com/ly-card 进行检查：

  • 若有内容，说明这个包名在npm上已存在，我们就得换个包名了

截屏2024-10-21 18.00.24.png

  • 若出现下图这种情况，说明npm上没有该包，那么我们就可以放心发布了 截屏2024-10-21 18.01.34.png

情况二 CD2758FD-6C2C-4AD2-BAAD-3F9EC60CD209.png

原因：当前要发布的npm包版本号，之前已经用过了，不可以重复发布
解决办法：修改package.json中的version值

mindmap
      另外，发布npm包常用的命令也总结一下：

  • 发布npm包：npm publish

  • 更新npm包：（更新成功会输出版本号，版本号自动加一，此更新只针对本地）

    • npm version ptch （补丁号，修复bug，小变动，如 v1.0.0->v1.0.1）
    • npm version minor （次版本号，增加新功能，如 v1.0.0->v1.1.0）
    • npm version major （主版本号，不兼容的修改，如 v1.0.0->v2.0.0）

  • 删除npm包：npm unpublish 包名 （撤销已发布的版本）

  • 删除指定npm包：npm unpublish 包名@1.0.2（删除成功会输出删除的本地版本号，对应服务器也会删除）

avatar
文章
阅读
粉丝