电商做独立网站凡科建站的优势
你有构建完组件库后，因为不知道如何发布到 npm 的烦恼吗？本教程手把手教你用 Vite 构建组件库发布到 npm
搭建项目
- 这里我们使用 Vite 初始化项目，执行命令：
pnpm create vite my-vue-app --template vue
- 这里以我的项目 vue3-xmw-table 为例
调整目录结构
- 首先需要创建一个
packages目录，用来存放组件 - 将
src目录改为examples用作示例 - 启动项目的时候，默认入口文件是
src/main.js，将src目录改为examples之后，就需要重新配置入口文件，在根目录下创建一个vue.config.js文件
// vue.config.jsmodule.exports = {// 将 examples 目录添加为新的页面pages: {index: {// page 的入口entry: 'examples/main.ts',// 模板来源template: 'public/index.html',// 输出文件名filename: 'index.html'}}}
- 修改根目录入口文件
index.html中的main.ts引入路劲
<script type="module" src="/examples/main.ts"></script>
- 完整的目录结构如下：
组件开发
-
之前我们创建的
packages目录，用来存放组件 -
该目录下存放每个组件单独的开发目录，和一个
index.js整合所有组件，并对外导出 -
每个组件都应该归类于单独的目录下，包含其组件源码目录
src，和index.js便于外部引用 -
这里以组件
xmwTable为例，完整的packages目录结构如下：
-
xmwTable/src/main.vue就是组件的入口文件，这里有一点要非常注意：
需要注意的是，组件必须声明
name，这个name就是组件的标签
<script lang="ts">export default {name: "vue3-xmw-table", //这个⾮常重要，就是未来你放到其他项⽬中，组件标签的名字，⽐如：<vue3-xmw-table></vue3-xmw-table>};
</script>
整合并导出组件
- 编辑
packages/xmwTable/index.ts，实现组件的导出
// 导入组件，组件必须声明 name
import XmwTable from './src/main.vue'// 为组件添加 install 方法，用于按需引入
XmwTable.install = function (Vue: any) {Vue.component(XmwTable.name, XmwTable)
}export default XmwTable
- 编辑
packages/index.ts文件，实现组件的全局注册
// packages / index.js// 导入单个组件
import XmwTable from './xmwTable/index'// 以数组的结构保存组件，便于遍历
const components = [XmwTable
]// 定义 install 方法
const install = function (Vue: any) {if (install.installed) returninstall.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如下：
{"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": "baiwumm","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：
// 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
import { 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 '../dist/vue3-xmw-table.es.js'createApp(App).use(router).use(ElementPlus).use(XmwTable).mount('#app')
- 若
vue3-xmw-table组件能成功显示在页面，则证明组件的打包是没问题的。
发布到 npm
- 先查看
npm的registry
npm config get registry
- 设置
npm的registry为官方源
npm config set registry https://registry.npmjs.org
- 执行命令
npm login登录到npm
npm login
- 执行命令
npm publish发布到npm
npm publish
如出现以下信息，则证明包发布成功:
注：上传的
npm包，在 72小时 后不可删除，如果是测试用的包，记得 72小时 内删除。
安装验证
- 执行命令
npm i vue3-xmw-table
- 在
main.ts引入并注册
import { 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')
- 页面中引用
<!-- 数据表格 --><vue3-xmw-tablestripebordershow-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-buttonsize="small"type="primary"@click="scope.$index == state.tableData.length - 1? hanglerEditSpending(scope): handlerEdit(scope)">编辑</el-button><el-buttontype="danger"size="small"@click="handlerDelect(scope)":disabled="scope.$index == state.tableData.length - 1">删除</el-button></template></vue3-xmw-table>
组件正常显示，恭喜💐你，你的包已经发布成功拉，赶紧去使用吧🎉🎉