本篇文章介绍如何逐步搭建一个Vue 3组件库,组件库采用MonoRepo的模式进行包管理,方便组件库的多包管理和包发布。
搭建MonoRepo项目结构
首先,创建vue3 design目录,在该目录下初始化MonoRepo项目,命令如下:
mkdir vue3 design
cd vue3 design
npm init -y #初始化项目，创建package.json
yarn add --dev lerna #本地安装lerna包管理工具
yarn lerna init #初始化项目,并创建lerna.json
在vue3 design目录下,创建packages文件夹,所有管理的包都放在该目录中,效果如表9-2所示。
■ 表9-2 vue3 design组件库目录
vue3 design目录中的目录结构,如图9-18所示。
■ 图9-18 vue3 design单仓项目目录结构
修改根目录下的package.json文件,添加workspace(包目录),这里把所有的包放在packages目录下,配置如下:
"name": "@vue3-desidgn/libs",
"private": true,
"workspaces": [
"packages/*"
],
接下来,修改lerna.json文件,添加配置如下:
"npmClient": "yarn",
"useWorkspaces": true,
"stream": true,#添加此参数会输出执行时的信息
搭建基础组件库(packages/vueui3)
下面详细介绍如何搭建一个基础组件库项目,具体步骤如下。
1. 初始化项目
在packages目录下创建vueui3目录,使用Yarn工具生成package.json文件,命令如下:
yarn init -y
打开生成的package.json文件,在配置文件中添加main和module两个配置,将name的名字修改为正式的包名,方便后面包的发布和安装。main和module用来配置编译输出的目录和编译后的包文件的名称,代码如下:
"name": "@vue3-design/ui",
"main": "dist/vueui.umd.js",
"module": "dist/vueui.esm.js",
在package.json文件中配置输出的打包文件名称,如表9-3所示。
■ 表9-3 vueui3基础组件库打包输出
创建项目目录结构,如图9-19所示。
■ 图9-19 vueui3 包目录结构
2. 配置Rollup打包
配置Rollup工具打包,需要安装Vue 3、@babel/core、Rollup和Rollup相关插件等,具体安装如下:
yarn add vue --dev #默认使用Vue 3
yarn add @babel/core @babel/preset-env --dev
yarn add rollup rollup-plugin-babel rollup-plugin-serve rollup-plugin-vue @rollup/plugin-node-resolve rollup-plugin-postcss --dev
安装上面的模块后,需要配置rollup.config.js文件,该文件主要告诉Rollup编译器如何编译和输出打包文件,rollup.config.js配置如代码示例9-1所示。
代码示例9-1 rollup.config.js
import babel from 'rollup-plugin-babel';
import PostCSS from 'rollup-plugin-postcss'
import vuePlugin from 'rollup-plugin-vue'
import NodeResolve from '@rollup/plugin-node-resolve'
import pkg from './package.json'
export default {
input: './src/index.js',
output: [
{
name: 'vueui', //组件库全局对象
file: pkg.main,
format: 'umd', //umd 模式
globals: {
vue: 'Vue' //vue 全局对象名称，若有 lodash 则应为 _
},
exports: 'named'
},
{
name: 'vueui', //组件库全局对象
file: pkg.module,
format: 'esm', //umd 模式
globals: {
vue: 'Vue' //vue 全局对象名称，若有 lodash 则应为 _
},
exports: 'named'
}
],
plugins: [
NodeResolve(),
vuePlugin({
//PostCSS-modules options for <style module> compilation
cssModulesOptions: {
generateScopedName: '[local]___[hash:base64:5]',
},
}),
babel({ //解析es6 -》 es5
exclude: "node_modules/**" //排除文件的操作 glob
}),
PostCSS()
],
external: ['vue'],
}
上面在output配置中,设置了两种不同格式的打包文件的输出,具体如表9-4所示。
■ 表9-4 输出UMD格式配置
精彩回顾
参考书籍
扫码优惠购书
《大前端三剑客——Vue+React+Flutter》
ISBN：978-7-302-61474-6
徐礼文 著
定价：209.00元
内容简介
本书通过介绍三大前端框架及生态体系，带领读者全面掌握从移动互联应用开发到万物互联应用开发技术和实战技巧，本书也可以作为前端开发者搭建企业级前端产品体系的参考书。书中提供了大量的代码示例，读者可以通过这些例子理解知识点，也可以直接在开发实战中稍加修改应用这些代码。另外，提供书中所有案例所涉及的源代码，以便于读者高效的学习。
扫码京东优惠购书
