lerna+rollup搭建vue组件库并发布到npm

一、框架介绍 1. lerna
Lerna 是一个管理工具，用于管理包含多个软件包（）的项目。
目的是将大型代码仓库分割成多个独立版本化的软件包。
【lerna+rollup搭建vue组件库并发布到npm】官网点这里
2.
是一个模块打包工具，可以将多个小的代码片段编译为完整的库和应用。
官网点这里
二、项目准备 1. 新建项目
首先你需要创建一个vue项目，我这里以vue3为例，初始化项目目录大概是下面这样的：
2. 改造一些目录：
# 创建目录 packagesmkdir packages# 文件夹重命名 mv srcexamples
目录变成酱紫：
目录用于存放示例代码；
目录用于存放组件库代码；
注意修改src目录相关的代码即可，这里不做赘述
三、编写组件
在目录下创建自己的组件，结构可参考：
以my-table为例：
/my-table/src/main.vue，自定义的vue组件
表格组件000000000000111111111111222222222222333333333333>import { defineComponent } from "vue";export default defineComponent({name: "my-table",mounted() {console.log("my-table 初始化");},});
/my-table/index.js，主要就是为了引入src中的vue组件

文章插图

import MyTable from "./src/main.vue";MyTable.install = function (Vue) {Vue.component(MyTable.name, MyTable);};export default MyTable;

四、测试组件
为了后面的步骤顺利进行，先对我们创建好的组件进行一下简单的测试；
/main.ts

import { createApp } from 'vue'import App from './App.vue'import MyTable from "../packages/my-table"import MyInput from "../packages/my-input"import './assets/main.css'createApp(App).use(MyTable).use(MyInput).mount('#app')

/App.vue

运行项目，看到如下效果，可真是谢天谢地了
到这里，说明我们封装的组件库（勉强这么称呼吧）已经可以正常使用了，接下来就是打包、发布了。
五、打包
多个组件库分别创建 .json，用于管理各自的打包命令、依赖等。
cd packages/mytable && npm init -ycd packages/my-input && npm init -y
1. 安装相关依赖
yarn add rollup rollup-plugin-vue -D
多个组件库分别创建配置文件，并添加配置
/my-table/..js

import vue from "rollup-plugin-vue";export default {input: "./index.js",output: [{file: "dist/index.js",format: "es",},],plugins: [vue()],};

2. 修改根目录下.json
修改根目录下的.json中的打包命令，并指定工作空间为目录
{"scripts": {"build": "yarn workspaces run build",...},"workspaces": ["packages/*"],"private": true,...}
3. 修改各组件库.json
修改各组件库的.json中的打包命令，可根据自己需要，修改其他属性。本示例修改了type和main：
{"type": "module","main": "./dist/index.js","scripts": {"build": "rollup -c"},...}
4. 执行打包命令
在根目录执行打包命令
yarn build
不出意外的话，在各自的组件库目录中会多了一个dist目录，这就是我们根据配置文件打包的结果。