lin-view-ui组件库重构

前言

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

重构内容

这次重构主要包含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-plugin和stylelint-webpack-plugin在打包的时候对.js，.vue，.scss，css文件进行代码规范校验。这里要注意的是对于eslint的检查，我们不再用eslint-loader了，因为它已经被废弃了，所以要改用eslint-webpack-plugin，大家千万不要搞错。
2. babel配置。一开始我是直接用@vue/cli-plugin-babel这个插件的presets的，也确实可以用，不用配置过多的babel的presets和plugins。但是后面再集成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. 关于怎么渲染和显示组件实例和需要展示的代码，大家可自行参考elementui的md-loader。我实在这个基础上扩展了自己的东西
2. 添加锚点。添加锚点使用到markdown-it-anchor，markdown-it-task-lists和markdown-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. css和scss处理。jest默认是不识别样式文件的，所以我们可以使用identity-obj-proxy这个第三方库去处理样式文件。但是这里有点小坑就是不能识别通过路径别名引入的样式文件，会报错。如果想要处理通过路径别名引入的样式文件，就只能通过transform自定义一个transform去处理样式文件。这里我花费了不少时间去查找才发现的

代码规范和提交规范

1. eslint校验.js文件和.vue文件。因为我们在webpack中使用了路径别名，所以要安装eslint-import-resolver-webpack去识别这些路径别名。下一步就是在保存的时候根据eslint的配置去修复不符合规范的代码。这里以vscode为例。vscode需要安装的插件有ESLint，Prettier和Vetur，在项目根目录中创建.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
    }
  }

2. stylelint校验.css，.scss和.vue文件。stylelint默认是不识别scss的，所以要安装stylelint-scss插件去处理。配置完成之后，同理需要在.vscode下的settings.json文件中写一下配置

{
	"editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}

3. 提交规范。

• husky，提交前进行某些操作，如校验代码规范以及提交信息
• @commitlint/config-conventional，@commitlint/cli，约束规范提交的信息格式
• commitizen，cz-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