当前位置: 首页 > 工具软件 > lin-view-ui > 使用案例 >

lin-view-ui组件库重构

叶越
2023-12-01

前言

这篇文章主要是记录我在重构的时候遇见的困难和坑点。

重构内容

这次重构主要包含4个方面。

  • 打包方面的重构。
  1. 原本的组件库是使用@vue/cli3生成的项目改造出来的,这种方法可以减少书写打包配置的麻烦,但是带来的缺点就是不利后面的扩展,比如我想在打包过程中生成版本文件,在@vue/cli3脚手架中实现起来就有点困难了。
  2. @vue/cli3脚手架只能有一个配置文件,对于一个组件库来说,一个配置文件肯定是不够的,以前的做法就是通过命令行配置不同的环境变量,然后在vue.config.js中接受该环境变量,然后在选择不同的配置文件,这个方法显然有点笨。
  3. 所以这次打包的重构我是用webpack重新搭建了一个组件库环境,配置那些都是一步一步的去写的,这样可以提高打包的灵活度,自己想怎么配置就怎么配置。
  • 文档的重构。
  1. 原本的组件库文档书写有一个很致命的缺点,就是同样的代码需要写2次,一次是组件实例代码,一次是需要展示出来给用户看的代码。组件实例代码和需要展示出来给用户看的代码是完全一样的,虽然同样的代码可以复制粘贴,但是这种写法写起来文件就显得很臃肿,不利于阅读。所以我参考了elementui的文档源码,借鉴了elementui的mdloader,将组件实例代码和需要展示出来给用户看的代码合并起来,只需要书写一次即可,这样就可以减少文件的臃肿程度,同时减少了书写的麻烦。
  2. 当一个组件的文档有很多个示例代码,比如Button按钮组件,有5种示例代码。这时候查找起来就很困难了。所以我在原本的基础上添加一个目录,在结合锚点,用户在点击目录的时候就可以快速定位到示例代码的位置。
  3. 原来的每个组件文档都是通过异步加载进来的。所以打包出来的js文件有50多个,但是每个js文件只有几kb,甚至有的还小于1kb。每次请求这些小文件都是很耗费网络的,特别是网络差的时候,有时候要等个几秒才能查看到组件的文档,体验很不好。所以这次重构需要把这些小文件全都合并成一个文件。
  • 测试用例环境重构。因为以前用的是@vue/cli3脚手架生成的测试环境,现在重新搭建了一个组件库环境,所以测试环境的也需要重构一下。
  • 代码规范和提交规范。
  1. 原本项目是没有eslint,stylelint这些代码校验工具的,所以代码写起来比较随意。git提交代码那些也没什么要求。所以现在那些代码和提交信息看起来有点困难。这次重构加入了eslint,stylelint和commitizen等工具规范代码书写和提交信息。
  2. 至于为什么需要加入这些工具来规范代码和提交信息?首先是eslint和stylelint,这些工具不仅仅是用来规范你的代码格式,还可以避免不少的bug。比如,当你在一个对象中重复定义了多个相同的key值,这个在ie下就会报错的,因为ie下是不允许一个对象中有重复的key值的,而且这个问题是不容易找出来的,这是我在做项目的时候亲身体验的。如果加入了eslint,eslint就会检测到一个对象中重复定义了多个相同的key值,然后直接在编辑器或者控制台输出错误的位置,具体在哪个文件的哪一行,从而快速找出这个问题的所在。所以加入这些工具是非常有必要的。

打包重构

关于webpack配置方面我就不做细讲了,都是有一些很基础的东西,不懂得同学可以百度一下,网上有很多关于webpack的配置可以给你参考的。我要讲的主要是以下几点。

  1. 打包时校验代码规范。重构之后要求代码必须符合规范才能进打包或者提交代码。所以需要在打包的时候校验代码。所以现在要借助eslint-webpack-pluginstylelint-webpack-plugin在打包的时候对.js.vue.scsscss文件进行代码规范校验。这里要注意的是对于eslint的检查,我们不再用eslint-loader了,因为它已经被废弃了,所以要改用eslint-webpack-plugin,大家千万不要搞错。
  2. babel配置。一开始我是直接用@vue/cli-plugin-babel这个插件的presets的,也确实可以用,不用配置过多的babel的presetsplugins。但是后面再集成jest的时候,部分js需要通过babel-jest去转换,但是babel-jest并不认识@vue/cli-plugin-babel,所以最后只能放弃使用@vue/cli-plugin-babel
  3. 配置jsx。部分组件是通过jsx去实现的,所以我们要配置一下babel去支持jsx。如果使用的是babel7以上的则需要安装@vue/babel-plugin-transform-vue-jsx,babel7以下的则需要安装babel-plugin-transform-vue-jsx,最厚在babel的配置中添加@vue/babel-plugin-transform-vue-jsx插件即可。在写jsx的时候,render函数必须要有h参数,否则会报h is not defined的错误

文档重构

  1. 关于怎么渲染和显示组件实例和需要展示的代码,大家可自行参考elementuimd-loader。我实在这个基础上扩展了自己的东西
  2. 添加锚点。添加锚点使用到markdown-it-anchormarkdown-it-task-listsmarkdown-it-table-of-contents三个插件。锚点是通过二级标题生成的,但是标题是存在中文,中文锚点在ie下是不能跳转的,所以需要将中文转化为英文才能使用。至于怎么转,大家可去百度查找一下,这里我推荐大家可以使用pinyin这个库。
  3. 自动注册路由。每个组件都对应有一个文档路由的,我们利用webpack提供的require.context可实现自动获取目录下的所有markdown文件并注册路由。以前的做法是所有组件文档都是写在一个json文件中,然后读取json文件的,通过异步加载组件的方式,所以会打包出50多个js文件,每个js文件都只有几kb。所以现在通过require.context这种方式获取组件之后就可以全部打包到同一个文件了。

测试用例环境重构

  1. 关于测试,这里依旧用的是jest,但是同时需要安装vue-jest去处理.vue文件,babel-jest去处理.js文件。
  2. 因为我们在webpack中使用了路径别名,所以我们要在moduleNameMapper中相应的配置一下
  3. cssscss处理。jest默认是不识别样式文件的,所以我们可以使用identity-obj-proxy这个第三方库去处理样式文件。但是这里有点小坑就是不能识别通过路径别名引入的样式文件,会报错。如果想要处理通过路径别名引入的样式文件,就只能通过transform自定义一个transform去处理样式文件。这里我花费了不少时间去查找才发现的

代码规范和提交规范

  1. eslint校验.js文件和.vue文件。因为我们在webpack中使用了路径别名,所以要安装eslint-import-resolver-webpack去识别这些路径别名。下一步就是在保存的时候根据eslint的配置去修复不符合规范的代码。这里以vscode为例。vscode需要安装的插件有ESLintPrettierVetur,在项目根目录中创建.vscode文件夹,然后在文件夹里面创建settings.json文件,并写入如下配置
{
    "eslint.validate": [
      {
        "language": "vue",
        "autoFix": true
      },
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "javascript",
        "autoFix": true
      },
      {
        "language": "javascriptreact",
        "autoFix": true
      }
    ],
    "eslint.autoFixOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
  }
  1. stylelint校验.css.scss.vue文件。stylelint默认是不识别scss的,所以要安装stylelint-scss插件去处理。配置完成之后,同理需要在.vscode下的settings.json文件中写一下配置
{
	"editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}
  1. 提交规范。
  • husky,提交前进行某些操作,如校验代码规范以及提交信息
  • @commitlint/config-conventional@commitlint/cli,约束规范提交的信息格式
  • commitizencz-conventional-changelog,自动生成符合规范的提交信息,但是要使用git cz这个命令行去提交代码。

总结

在重构的过程中,我学到了不少的东西,同时也遇见了不少难点,在解决难点的同时我收获到了很多意外的东西。最后希望我这个ui组件库可以越做越好

git地址:https://github.com/c10342/lin-view-ui
重构git地址:https://github.com/c10342/lin-view-ui/tree/develop-restructure
文档地址:https://ui.linjiafu.top

 类似资料: