这篇文章主要是记录我在重构的时候遇见的困难和坑点。
这次重构主要包含4个方面。
关于webpack配置方面我就不做细讲了,都是有一些很基础的东西,不懂得同学可以百度一下,网上有很多关于webpack的配置可以给你参考的。我要讲的主要是以下几点。
eslint-webpack-plugin
和stylelint-webpack-plugin
在打包的时候对.js
,.vue
,.scss
,css
文件进行代码规范校验。这里要注意的是对于eslint
的检查,我们不再用eslint-loader
了,因为它已经被废弃了,所以要改用eslint-webpack-plugin
,大家千万不要搞错。@vue/cli-plugin-babel
这个插件的presets的,也确实可以用,不用配置过多的babel的presets
和plugins
。但是后面再集成jest
的时候,部分js需要通过babel-jest
去转换,但是babel-jest
并不认识@vue/cli-plugin-babel
,所以最后只能放弃使用@vue/cli-plugin-babel
。@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
的错误elementui
的md-loader
。我实在这个基础上扩展了自己的东西markdown-it-anchor
,markdown-it-task-lists
和markdown-it-table-of-contents
三个插件。锚点是通过二级标题生成的,但是标题是存在中文,中文锚点在ie下是不能跳转的,所以需要将中文转化为英文才能使用。至于怎么转,大家可去百度查找一下,这里我推荐大家可以使用pinyin
这个库。require.context
可实现自动获取目录下的所有markdown文件并注册路由。以前的做法是所有组件文档都是写在一个json文件中,然后读取json文件的,通过异步加载组件的方式,所以会打包出50多个js文件,每个js文件都只有几kb。所以现在通过require.context
这种方式获取组件之后就可以全部打包到同一个文件了。jest
,但是同时需要安装vue-jest
去处理.vue
文件,babel-jest
去处理.js
文件。moduleNameMapper
中相应的配置一下css
和scss
处理。jest
默认是不识别样式文件的,所以我们可以使用identity-obj-proxy
这个第三方库去处理样式文件。但是这里有点小坑就是不能识别通过路径别名引入的样式文件,会报错。如果想要处理通过路径别名引入的样式文件,就只能通过transform自定义一个transform去处理样式文件。这里我花费了不少时间去查找才发现的.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
}
}
.css
,.scss
和.vue
文件。stylelint默认是不识别scss
的,所以要安装stylelint-scss
插件去处理。配置完成之后,同理需要在.vscode
下的settings.json
文件中写一下配置{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
}
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