从0开发一个 组件/插件 并部署

从零开始发布一个 Vue3 + Vite 的 npm 包

1. npm账号配置

1.1 注册新账号

注册地址： www.npmjs.com/signup

1.2 登录账号

在命令行输入： npm login，此时会提醒你打开浏览器进行登录，然后邮件接收验证码，输入登录

1.3 后续发布会用到的命令行

npm version patch package.json 里的版本号变更，如 1.0.0 变成 1.0.1
npm publish 发布推送

2. 开发 Vue3 + Vite 的组件

2.1 创建一个 Vue 应用

用脚手架创建一个 Vue3 项目，官方创建有两种方式：

• vue-cli 创建(基于 webpack)
• create-vue 创建(基于 vite)

这里选择第二种方式创建，目前最新的 Vue 官方的项目脚手架工具；跟着官方文档走即可：创建一个 Vue 应用
注意 ： 方式二需要、已安装 16.0 或更高版本的 Node.js

这里采用 nvm 安装切换成高版本的node：
nvm install v18.16.0
nvm use v18.16.0

2.2 开发组件

这里开发的是 vue3-plugin-test 组件，举例如下：

2.2.1 开发本地包

在 根目录 src 下新建组件目录： packages，这是最终需要打包发布到 npm 的目录

├─ packages                     
│  ├─ ChartRender   组件目录          
│  │  ├─ index.js   组件入口     
│  │  ├─ index.vue  组件逻辑 
│  ├─ index.js      组件主入口

packages/ChartRender/index.vue 文件 （注意：要使用 export 导出）

<template>
  <div class="chart-render" ref="refChartRender">
    当前是{{ chartType }}，主题色是{{ params.color }}
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  chartType: {
    type: String,
    required: true,
    default: "柱状图",
  },
  params: {
    type: Object,
    default() {
      return {
        color: "red",
      };
    },
  },
});

onMounted(() => {});
</script>
<script>
export default {
  name: "ChartRender",
};
</script>

packages/ChartRender/index.js 文件

import ChartRender from './index.vue'
ChartRender.install = app => {
  app.component(ChartRender.name, 'ChartRender')
}

export default ChartRender

packages/index.js 文件

import ChartRender from "./ChartRender/index"

const components = [
  ChartRender
]

// 全局安装
const install = app => {
  components.map(component => {
    app.component(component.name, component)
  })
}

export default {
  install,
  ChartRender
}

注意：如果插件中要引入一些外部功能组件，例如样式库 element、echarts、axios 等，在主入口 packages/index.js 文件中引入

import {
    Select as TSelect,
    Option as TOption,
} from 'tdesign-vue-next';

// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';

import ChartRender from "./ChartRender/index"

const components = [
    ChartRender
]

// 全局安装
const install = app => {
    // 判断是否安装
    if (install.installed) return;
    app.use(TSelect);
    app.use(TOption);

    components.map(component => {
        app.component(component.name, component)
    })
}

export default {
    install,
    ChartRender
}

2.2.2 本地调试

将插件 vue3-plugin-test 打包：

npm run lib

npm link

在测试项目 use-test-plugin （Vue3 + Vite）的根目录 src/main.js 文件中引入：

import { createApp } from 'vue'
import App from './App.vue'

import VueChartRender from 'vue-chart-render'
import 'vue-chart-render/dist/style.css';

const app = createApp(App)

app.use(VueChartRender)
app.mount('#app')

在页面中使用（.vue 文件中）

<template>
    <div>
         <ChartRender :chartType="'折线图'" :params="styleparams" />
    </div>
</template>

<script setup>
import { reactive } from "vue";

const styleparams = reactive({
  color: "green",
});
</script>

即可正常显示

3. 打包配置

3.1 vite.config.js配置

build: {
    lib: {
      entry: path.resolve(__dirname, 'src/packages/index.js'),  // 打包入口文件
      name: 'vue3-plugin-test',    // 打包的名字
      fileName: (format) => `vue3-plugin-test.${format}.js`  // 打包生成的文件名
    },
    rollupOptions: {
      // 不需要打包进库的依赖，忽略vue
      external: ['vue'],
      output: {
        // UMD构建模式下为这些外部的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }

3.2 package.json 修改

根目录的 package.json 新增以下配置

注意：如果生成的包有样式文件则要配置 style

 "files": [
    "dist"
  ],
  "main": "./dist/vue3-plugin-test.umd.js",
  "module": "./dist/vue3-plugin-test.es.js",
  "style": "./dist/style.css", //样式
  "exports": {
    ".": {
      "import": "./dist/vue3-plugin-test.es.js",
      "require": "./dist/vue3-plugin-test.umd.js"
    },
    //样式
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },

配置好之后，开发调试无误、开始打包，执行：npm run build，此时打包生成的 dist 目录，就是我们要发布到 npm 的包。

4. 发布 npm

4.1 发布前新增配置说明文件

进入 dist 目录，生成并配置 package.json 文件，操作如下：

命令行执行： npm init --yes 生成 package.json 文件，修改里面的项目信息即可

同时，在 dist 目录新建 README.md 文件并编辑内容，到时发布后在 npm 的说明展示

官方操作： Creating a package.json file

4.2 发布到 npm

进入 dist 目录，命令行执行登录：
npm login， 此时会提醒你打开浏览器进行登录，然后邮件收到验证码输入登录。
注意： 要先查看当前是否用了淘宝源，如果是淘宝源，则换成 npm

npm get registry   //出现：https://registry.npmmirror.com/
npm config set registry https://registry.npmjs.org/
npm login
......

登录成功，可以执行发布命令：npm publish

如果是更新后重新发布，需要先执行

npm version patch， package.json 里的版本号变更，如 1.0.0 变成 1.0.1

npm publish 发布推送

发布成功，可以去 npm 的 packages 看看，npm install -S vue3-plugin-test下载回来试试使用

4.3 使用 插件

安装： npm i vue3-plugin-test

引入：main.js 文件

import { createApp } from 'vue'
import Vue3PluginTest from "vue3-plugin-test"
import "vue3-plugin-test/style.css"

const app = createApp(App)

app.use(VueChartRender)

5. 参考资料

• 基于element-ui构建自定义组件库，发布到npm及安装使用，以及生成组件库说明文档：https://zhuanlan.zhihu.com/p/337520239
• 从零开始发布一个 Vue3 的 npm 包：https://juejin.cn/post/7222654249133260856
• 发布到 npm ：https://juejin.cn/post/6844903919106129933
• npm 包本地调试（详细流程：包本地路径、npm link 、yalc）：https://blog.csdn.net/zz00008888/article/details/130271766
• verdaccio 搭建私有 npm仓库