vue3.0 + webpack + vite 开发组件库

在之前的文章里面，介绍了vite以及vue3.0相关的内容，但是纸上谈来终觉浅，所以还是需要实践的操作一下，才能理解到内部的真实内容

本篇文章讲解了最近通过vue3.0和vite两大比较热门的技术来开发组件库demo

github地址

相信使用vue的同学，对于vue-cli这么一整套的内容是相当的熟悉了，现在就不使用vue-cli了，直接通过自己手工搭建一个完整的组件库的项目

确定唯一的技术选型

这点我们这边很明确， 是基于vue3.0的项目

除了vue以外，针对于ts跟js的选型也是比较重要的，在现在这阶段，或者说再过几年，如果你还是不能够使用ts来进行开发的话，那么就很容易成为过去式=,=

而且，就针对组件库而言，我们的组件被外部调用的时候，并无法确定外部业务存在的环境是ts还是js，所以无论如何，你的types文件是必不可少的

那么，就很容易的得出结论，组件库的编写，至少在script的层面上，我们就选择了typescript

而vue的模板文件除了js以外还有template与style，这两个的考虑的话就有点无所谓的感觉了，用什么样式其实都行，我这边选择了scss

开发与生产环境

确认完我们的技术选型之后，就可以开始搭建我们整个项目的基架了

首先考虑我们生产环境跟开发环境的区别

为了让开发环境能够体会到秒开的感觉，不需要编译之后还要编译半天等结果才能够显示在界面上，所以在开发环境的选择上我使用vite + webpack

安装webpack，vite

vite是在开发环境使用的一个工具，而不是针对整个组件库进行生产跟开发环境使用的，这样就很明确的分出了webpack跟vite的具体使用场景

1. 对于组件库的打包，使用的是webpack
2. 对于组件库的demo，使用vite来进行开发

以下只会讲相关的配置，详细的配置说明这边就不叙述了， 如果想看的话可以通过github的链接去查看相关的配置

先来看下具体实现之后的效果图

先来看下这种图的上一部分，他是使用了watch的方式，而不是通过webpack-dev-server，原因在于，如果使用了webpack-dev-server，那么在这个开发环境中会默认生成一个服务，而这个服务并不是我们所需要的，我们需要的仅仅是他打包完成之后生成的那个bundle文件，所以只需要通过打生产包的形式来让我们的组件库能够在开发环境中使用即可

而下一部分指的内容就是vite在example文件夹中启动的，在不同项目之间相互使用是通过了npm link的方式

在这边存在一个问题：

vite自身的体系是不会去解析amd或者cmd的模块化方案的js文件，这就导致了我们通过webpack打包后的文件是无法直接使用在vite里面的，为了简单的解决这个问题，使用了copy-webpack-plugin，直接将当前需要用的两个文件目录src components直接复制进打包后的页面，然后修改package.json中的main字段，将其直接指向当前的lib目录，即打包后的目录，而不是直接指向当前的具体文件，当然也可以修改一下，直接引用对应路径下的文件，这边主要还是保证打包过程中不会出现问题，将环境保持一致

安装ts

ts是用在组件库的编写里面的，所以直接在webpack中写上对应的ts-loader就好了，这块内容没有什么太多花里胡哨的东西，简单而又纯粹

唯一需要注意的就是，对于组件库而言，还是需要给外部调用的时候能知道当前的类型，所以在写tsconfig的时候，declaration与outDir的属性是需要的

{
    "compilerOptions": {
        "checkJs": false,
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ],
        "target": "ES2019",
        "module": "esnext",
        "noEmit": false,
        "sourceMap": true,
        "pretty": true,
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "declaration": true,
        "outDir": "./lib",
        "baseUrl": ".",
        "paths": {
            "vue": ["./node_modules/vue"],
            "@components/*": ["components/*"]
        }
    },
   "exclude": [
       "node_modules",
       "build",
       "example"
   ]
}

安装eslint

eslint来分析ts文件也是一种常态的使用方式了， 配合airbnb来对代码进行检查

首先，需要将eslint的解析器转换为能够解析ts文件的，这就依赖于@typescript-eslint/parser，然后将eslint配置中的parserOptions.parser修改为当前需要用的解析器

module.exports = {
	root: true,
	parserOptions: {
		parser: '@typescript-eslint/parser',
		ecmaVersion: 2020,
	},
	env: {
		node: true,
	},
	plugins: [
		'@typescript-eslint',
	],
	extends: [
		'airbnb-base',
		'plugin:@typescript-eslint/recommended',
		'plugin:vue/vue3-recommended',
	]
};

使用@typescript-eslint之后还只是将ts的文件内容能够包含进来，但是我们是写的vue的组件库，所以还需要在extends中添加plugin:vue/vue3-recommended，由于我更偏向于自己配置，所以使用的是airbnb-base而不是完整的airbnb针对vue而写的配置文件

发布与使用

鉴于一个只要有手动参与的事情总会出错，所以发布也需要进行自动化的管理

先考虑一个问题，一个组件库的发布，需要几个流程

按照最完美的角度去考虑的话，应该会涉及到5个流程

1. 切换到master
2. 自动化测试
3. eslint校验
4. 打包
5. 发布

所以只需要写一个控制流程的sh脚本，通过直接脚本来使当前的所有发布流程走同一个模式

当然如果中间存在有特殊的流程在的话，就可以自己进行流程的扩展

如果能够在git hooks中直接集成了这么一步其实是更加方便了， 当合并到master之后就默认会进行上传，当然这个时候就是对当前版本已经处理干净了

结尾

这个组件库比较简单没有什么特殊的东西，但是他能够给一个简单的处理

在测试过程中，可能会遇到一个问题，vite启动的服务之后，进行访问为404，具体原因可以持续关注这个issue