【手把手教学】vite 构建组件库并发布到 npm

今天 fllygo 教你十分钟使用 vite 构建组件库 vue3-slider，并发布到 npm。

零、github创建项目

注：这一步非必须。

登录github.com，创建一个空的项目vue3-slider。结果如下： github.com/fllygo/vue3…

一、本地初始化vite项目

pnpm create vite vue3-slider -- --template vue-ts # 创建项目
code vue3-slider # 用vscode打开
pnpm i # 安装依赖

其他初始化vite工程的命令参考 vite 中文官网 - 开始

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

vite 目前支持以下模板：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

二、新增packages文件夹，并编写组件库

packages
    index.ts
    slider
         index.ts
         slider-types.ts
         slider.scss
         slider.tsx

部分代码如下所示：

• packages/index.ts

// filename: packages/index.ts
import Slider from './slider'
const components = [Slider]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue: any) {
  // 遍历注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  Slider,
}

• packages/slider/index.ts

// filename: packages/slider/index.ts
import Slider from './slider'
Slider.install = function (Vue: any) {
  Vue.component(Slider.name, Slider)
}
export default Slider

三、本地调试组件

四、vite 打包配置

• 因为组件库一般都是jsx语法编写，所以要加上@vitejs/plugin-vue-jsx
• 打包成lib

// filename: vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx({})],
  build: {
    rollupOptions: {
      // 请确保外部化那些你的库中不需要的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
    lib: {
      entry: './packages/index.ts',
      name: 'vue3-slider',
    },
  },
})

执行npm run build会生产dist文件夹，里面有以下几个文件：

五、打包后的本地模拟

• 1、main.ts 引入文件

// filename: main.ts
import { createApp } from 'vue'
import App from './App.vue'
- createApp(App).mount('#app')
+ import Slider from '../dist/vue3-slider.es.js'
+ import '../dist/style.css'
+ createApp(App).use(Slider).mount('#app')

• 2、把HelloWord.vue里面的引入的vue3-slider去掉
• 3、重新运行 npm run dev

slider组件成功显示在页面，very good!

五、编写 package.json 文件

npm 官网： docs.npmjs.com/cli/v8/conf…

package.json 文件里面有很多字段要填写，否则不能正确发布。最重要的是以下几个：

• name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。因为vue3-slider被人注册了，所以这里改为vue3-slider2.
• files: 配置需要发布的文件。
• main: 入口文件，默认为index.js，这里改为dist/vue3-slider.umd.js,
• module: 模块入口，这里改为dist/vue3-slider.es.js

完整的 package.json 如下：

{
  "name": "vue3-slider2",
  "version": "0.1.0",
  "author": "fllygo",
  "description": "A modern, customizable slider built in Vue3 with TypeScript.",
  "keywords": [
    "vue",
    "vue3",
    "vuejs",
    "slider",
    "component",
    "ui",
    "typescript",
    "vertical",
    "horizontal"
  ],
  "homepage": "https://github.com/fllygo/vue3-slider",
  "repository": {
    "type": "git",
    "url": "https://github.com/fllygo/vue3-slider"
  },
  "bugs": {
    "url": "https://github.com/fllygo/vue3-slider/issues",
    "email": "1020103647@qq.com"
  },
  "license": "MIT",
  "private": false,
  "main": "dist/vue3-slider.umd.js",
  "module": "dist/vue3-slider.es.js",
  "types": "vue3-slider.d.ts",
  "files": ["dist/*", "vue3-slider.d.ts"],
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@types/node": "^17.0.4",
    "@vitejs/plugin-vue": "^2.0.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "sass": "^1.45.1",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }
}

六、发布到 npm

• 1、先查看 npm 的 registry

npm config get registry

如果显示的不是官方源，就要改回来。（ 我的是新的淘宝源https://registry.npmmirror.com）

• 2、设置 npm 的 registry 为官方源

npm config set registry https://registry.npmjs.org

• 3、登录 npm

npm login

这里要输入账号密码等

• 4、发布到 npm

npm publish

注：上传的npm包，在72小时后不可删除，如果是测试用的包，记得72小时内删除。

• 5、查看是否成功 www.npmjs.com/settings/fl…

七、安装验证

npm install vue3-slider

在 main.js 引入并注册

import Vue3Slider from 'vue3-slider2' 
import 'vue3-slider2/dist/style.css'
vue.use(Vue3Slider)

页面成功显示，撒花！

八、推送到github

注：这一步非必须。

git remote add origin git@github.com:fllygo/vue3-slider.git
git push -u origin main

GitHub地址：github.com/fllygo/vue3…