【手把手教学】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…
