你有构建完组件库后,因为不知道如何发布到 npm 的烦恼吗?本教程手把手教你用 Vite 构建组件库发布到 npm
使用 vue-cli 创建 vue3+vite 项目
1 | ## 安装或升级脚手架 |
这里以我的项目 vue3-xmw-table 为例
调整目录结构
首先需要创建一个 packages 目录,用来存放组件
将 src 目录改为 examples 用作示例
启动项目的时候,默认入口文件是 src/main.js,将 src 目录改为 examples 之后,就需要重新配置入口文件,在根目录下创建一个 vue.config.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14// vue.config.js
module.exports = {
// 将 examples 目录添加为新的页面
pages: {
index: {
// page 的入口
entry: 'examples/main.ts',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
}修改根目录入口文件 index.html 中的 main.ts 引入路劲
1
<script type="module" src="/examples/main.ts"></script>
完整的目录结构如下:
组件开发
之前我们创建的 packages 目录,用来存放组件
该目录下存放每个组件单独的开发目录,和一个 index.js 整合所有组件,并对外导出
每个组件都应该归类于单独的目录下,包含其组件源码目录 src,和 index.js 便于外部引用
这里以组件 xmwTable 为例,完整的 packages 目录结构如下:
- xmwTable/src/main.vue 就是组件的入口文件,这里有一点要非常注意:
需要注意的是,组件必须声明 name,这个 name 就是组件的标签
1 | <script lang="ts"> |
整合并导出组件
编辑 packages/xmwTable/index.ts,实现组件的导出
1
2
3
4
5
6
7
8
9// 导入组件,组件必须声明 name
import XmwTable from './src/main.vue'
// 为组件添加 install 方法,用于按需引入
XmwTable.install = function (Vue: any) {
Vue.component(XmwTable.name, XmwTable)
}
export default XmwTable编辑 packages/index.Ts 文件,实现组件的全局注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30// packages / index.js
// 导入单个组件
import XmwTable from './xmwTable/index'
// 以数组的结构保存组件,便于遍历
const components = [
XmwTable
]
// 定义 install 方法
const install = function (Vue: any) {
if (install.installed) return
install.installed = true
// 遍历并注册全局组件
components.map(component => {
Vue.component(component.name, component)
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具备一个 install 方法
install,
// 组件列表
...components
}
编写 package.json 文件
package.json 文件里面有很多字段要填写,否则不能正确发布。最重要的是以下几个:
- name: 包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。
- version: 版本号,不能和历史版本号相同。
- files: 配置需要发布的文件。
- main: 入口文件,默认为 index.js,这里改为 dist/vue3-xmw-table.umd.js。
- module: 模块入口,这里改为 dist/vue3-xmw-table.es.js。
完整的 package.json 如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40{
"name": "vue3-xmw-table",
"version": "1.1.2",
"main": "dist/vue3-xmw-table.umd.js",
"module": "dist/vue3-xmw-table.es.js",
"types": "vue3-xmw-table.d.ts",
"files": [
"dist/*",
"vue3-xmw-table.d.ts"
],
"private": false,
"author": {
"name": "Cyan",
"email": "843348394@qq.com"
},
"license": "ISC",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@types/node": "^17.0.6",
"element-plus": "^1.3.0-beta.1",
"vue": "^3.2.26",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/compiler-sfc": "^3.1.4",
"eslint": "^8.6.0",
"eslint-plugin-vue": "^8.2.0",
"sass": "^1.45.2",
"sass-loader": "^12.4.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
}
}
vite 打包配置
因为组件库一般都是 jsx 语法编写,所以要加上 @vitejs/plugin-vue-jsx,打包成 lib,编辑 vite.config.ts:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25// 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-table',
},
},
})执行 yarn run build 会生成 dist 文件夹,里面有以下几个文件:
本地模拟
修改文件 main.ts
1
2
3
4
5
6
7
8
9import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
- import XmwTable from '../packages/index'; // 全局挂在table组件
+ import XmwTable from '../dist/vue3-xmw-table.es.js'
createApp(App).use(router).use(ElementPlus).use(XmwTable).mount('#app')若 vue3-xmw-table 组件能成功显示在页面,则证明组件的打包是没问题的。
发布到 npm
先查看 npm 的 registry
1
npm config get registry
设置 npm 的 registry 为官方源
1
npm config set registry https://registry.npmjs.org
执行命令 npm login 登录到 npm
1
npm login
- 执行命令 npm publish 发布到 npm
1
npm publish
如出现以下信息,则证明包发布成功:
注:上传的 npm 包,在 72小时 后不可删除,如果是测试用的包,记得 72小时 内删除。
安装验证
执行 npm i vue3-xmw-table 命令
1
npm i vue3-xmw-table
在 main.ts 引入并注册
1
2
3
4
5
6
7
8import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Xmwtable from 'vue3-xmw-table'
createApp(App).use(router).use(ElementPlus).use(Xmwtable).mount('#app')页面中引用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<!-- 数据表格 -->
<vue3-xmw-table
stripe
border
show-summary
:summary-method="getSummaries"
:tableData="state.tableData"
:loading="state.loading"
:columns="state.firstLoad ? firstColumns : state.tableColumns"
:tableConfig="tableConfig"
:showPagination="false"
style="margin-top: 20px"
:span-method="objectSpanMethod"
>
<template v-slot:handler="{ scope }">
<el-button
size="small"
type="primary"
@click="
scope.$index == state.tableData.length - 1
? hanglerEditSpending(scope)
: handlerEdit(scope)
"
>编辑</el-button
>
<el-button
type="danger"
size="small"
@click="handlerDelect(scope)"
:disabled="scope.$index == state.tableData.length - 1"
>删除</el-button
>
</template>
</vue3-xmw-table>组件正常显示,恭喜💐你,你的包已经发布成功拉,赶紧去使用吧🎉🎉