npm上传自己封装的插件（vue+vite）

一、npm账号及发包删包等命令

若没有账号，可在npm官网：https://www.npmjs.com/login 进行注册。

在当前项目根目录下打开终端命令窗口，常见命令如下：

1、登录命令：npm login （不用每次都重新登录，失效了再登）

2、首次登录：npm adduser

注：根据提示依次输入：用户名、密码（输入内容不展示）、邮箱、邮箱验证码。

3、发包命令：npm publish

注：同一个包不能重复发布同一个版本，每次发布需要修改版本号。

4、删包命令：npm unpublish 包名 --force （例：npm unpublish plugins --force）

注：只能删除72小时以内发布的包，且删除的包24小时内不允许重复发布，执行失败可能是网络不好，重新执行下又可以了。

5、删除指定版本：npm unpublish 包名@版本号 --force （例：npm unpublish plugins@1.0.0 --force）

注：会自动回退到上个版本，删除后不可再上传相同的该版本号。

执行npm publish可能遇到的报错：

1、403 Forbidden - PUT https://registry.npmjs.org/plugins - You do not have permission to publish "plugins". Are you logged in as the correct user?

解：因为plugins包名已经存在，不是作者没有权限修改已经存在的包，需要换个包名。

2、400 Bad Request - PUT https://registry.npmjs.org/myPlugins - "defPlugins" is invalid for new packages.

解：包名不支持驼峰命名，把myPlugins换成my-plugins就行了。

二、vue项目打包及插件发布相关配置

1、单个插件发布

例如在/src/packages/test123/index.vue中开发需要上传的插件

vite.config.js文件打包配置

javascript 复制代码

import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
  build: {
    outDir: 'dist',
    lib: {
      entry: resolve(__dirname, "./src/packages/test123/index.vue"), // 文件路径
      name: 'test123',
      fileName: 'test123.min' // 打包后生成的文件名
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

注：打包后dist文件夹会自动生成test123.min.js、style.css这两个下方需要用到的文件。

package.json文件配置

javascript 复制代码

{
  "name": "test123", // 发布插件的名称
  "private": false, // 是否私有，设置为false
  "version": "1.0.0", // 发布的版本号
  "type": "module",
  "main": "dist/test123.min.js", // 插件入口文件
  "style": "dist/style.css",
  "files": [
    "dist"
  ],
  "scripts": {...},
  "dependencies": {...},
  "devDependencies": {...}
}

注意：npm发布包或版本根据package.json中配置信息来决定，vite.config.js文件中的build配置只是为了打包生成dist。所以如果只是修改包名或者版本号不需要重新打包，直接修改json文件对应的信息即可。

项目应用：

安装依赖：npm i test123 --save

页面使用：

javascript 复制代码

<script>
	import test from 'test123'; 
	import 'test/style.css'; // 可根据下面注意省略此行
</script>
<template>
	<test></test>
</template>

注意：可以在插件发布之前在dist/test123.min.js文件中加import './style.css';这行引入代码，这样就不用在每次使用的时候都单独引入插件css文件了。

2、多个插件批量发布

例如在/src/packages文件下创建多个.vue文件，并在/src/packages/index.js文件中批量注册：

javascript 复制代码

import test123 from './test123/index.vue';
import test456 from './test456/index.vue';
const myCompList = [test123, test456];
// 批量注册组件
const install = function (Vue) {
    myCompList.forEach(comp => {
        Vue.component(comp.name, comp);
    })
}
export default install;

vite.config.js文件打包配置

javascript 复制代码

import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
  build: {
    outDir: 'dist',
    lib: {
      entry: resolve(__dirname, "./src/packages/index.js"),
      name: 'my-plugins',
      fileName: format => `my-plugins-${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

package.json文件配置

javascript 复制代码

{
  "name": "my-plugins",
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "main": "dist/my-plugins-es.js",
  "style": "dist/style.css",
  "files": ["dist"],
  "scripts": {...},
  "dependencies": {...},
  "devDependencies": {...}
}

项目应用：

安装依赖：npm i my-plugins --save

main.js文件

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import myPlugins from 'my-plugins';
import 'my-plugins/dist/style.css';
createApp(App).use(myPlugins);

页面使用：(不需要再单独引入插件test123、test456）

javascript 复制代码

<template>
	<test123></test123>
	<test456></test456>
</template>

三、关于README.md文档编写

README.md是一个使用Markdown格式编写的文本文件，通常用于描述软件项目、库或文档的基本信息。‌

下图借用百度搜索结果：