elementUI改造第一天——我是如何改造Element的

·  阅读 1929

最近小编正与kkb的大佬,一起改造饿了么的element ui库,让他适配在vue3的环境。毕竟vue3也即将出来正式版,小编也是最近一直在学习关于vue3的composition api也想利用这个机会试炼一下。顺便试试VTU这个vue官方的测试框架。

从这篇文章你可以和小编一起学习到composition api的新的开发模式,以及在开发过程中遇到的问题,已经小编对组件封装的问题,以及如果更好的封装组件库,以及如何看懂组件库源码。

克隆仓库

分析目录

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2020/8/22     17:07                build			存放构建的脚本,包括webpack配置文件和一些node程序
d-----         2020/8/15     22:46                examples		elementUI官网示例
d-----         2020/8/15     22:46                packages		存放所有组件
d-----         2020/8/20     15:08                src			存放一些公共的函数,以及工具函数
d-----         2020/8/15     22:46                test			存放测试文件
d-----         2020/8/15     22:46                types			存放d.ts文件
...
复制代码

分析脚本命令

"scripts":{
    "bootstrap": "npm i",
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    "build:umd": "node build/bin/build-locale.js",
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
    "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
    "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
    "dev": "npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
    "i18n": "node build/bin/i18n.js",
    "lint": "eslint example/**/* src/**/* test/**/* packages/**/* build/**/* --quiet --fix",
    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
    "test:unit": "jest"
}
复制代码

上面太乱了,解释写道下面,这里只写我用到的命令

  • bootstrap 安装依赖
  • build:file 自动构建全局导入的JS文件src/index.js,这里有个小坑可以看改文档
  • build:theme 构建主题,这个应该是在编辑scss后需要执行的命令,暂时改造还没使用过,css路径packages/theme-chalk
  • build:umd 构建纯浏览器端的组件
  • clean 情况打包后的文件
  • dev 开启开发模式,在启动后可以在浏览器打开本地的elementUI的实例官网
  • dev:play 开启某个组件的开发模式,这也是我常用的命令,在这里可以单独开发某个组件,目录在examples/play/index.vue
  • dist 执行所有build的命令
  • test:unit 进行单元测试

要求

  • 使用composition api开发
  • 编写单元测试文件/packages/*/__tests__/*.spec.js

准备

  • node最新版
  • npm/yarn
  • 会vue3的composition api

开始

首先使用yarn或者npm i`安装依赖。

然后执行yarn dev:play来运行examples/play/index.vue这个demo

在这个demo中写一个使用实例,可以直接粘贴官方的实例如Radio的第一个实例

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>
复制代码

然后创建packages/radio/Radio.vue文件,修改packages/radio/index.js里组件的路径,开发分析旧文件代码,旧文件在packages/radio/src/radio.vue

当我打开这个文件的时候有一点点懵,其实大多时候主要是改js部分的代码,但还是遇到了以下的问题:

  • tabIndex是什么?

  • 标签中rolearia-*是什么?

  • vue3的双向数据绑定与vue2不一样了?

  • Emitter这个库是干啥的?

    .......

等等的很多问题,所以第一步就是先补充自己的知识盲区

tabIndex是什么,tabindex是控制tab键定位的一个属性,如果为-1表示不可通过tab键定位,如果为>=0的话是允许使用tab键定位,这里需要注意的一点就是,在值相同的情况下,他会先定位值为0的元素,然后在定位值为1的元素。

role大概意思是给这一类标签起一个名字,而aria-*是无障碍相关的属性。

以上两个问题就是在写该组件的开始前遇到的知识盲区。接下来 第二步 就是踩坑环节,因为要用vue3,虽然官方保留了了大多数vue2的特性,但是有些细节还是不一样。

首先是vue3的数据双向绑定有了些许变化,vue2是通过value这个props来接收双向绑定的变量的值,而如果改变这个绑定的变量是通过input事件将改变和值传给父元素,然后将值赋值给绑定的变量;而vue3默认是通过modelValue这个props来绑定接收变量,然后通过update:modelValue这个事件来改变绑定的变量的值,这个和vue2的.sync的实现原理类型,说了这么多的废话,还不如上代码来的实在:

vue2
<template>
	<input :value="value" @input="$emit('input', $event)" />
</template>
<script>
export default{
	props:{
        value:String,
    },
}
</script>

vue3
<template>
	<input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>
<script>
export default{
	props:{
        modelValue:String,
    },
}
</script>
复制代码

上面就是vue2和vue3的双向绑定区别,但是当你这样写后在运行后会发现在console里报了一个warn,简单的翻译后发现vue3居然出现了一个新的选项 emits 在简单的查阅文档后得知,这是一个用于声明事件的一个新选项,他的作用和props有点相似,props是声明要传入的属性的,而emits是声明要发出的事件的,props和emits他们其实还有另一个用途就是当作活文档,更多的emis和props的内容可以看vue3的网站v3.vuejs.org

<template>
	<input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>
<script>
export default{
	props:{
        modelValue:String,
    },
    emits:['update:modelValue'],
}
</script>
复制代码

我们添加了emits后刷新页面,查看console成功的消除了一个warn。

vue3还有一个很大改动,就是vue3是没有onon、off、$once 这三个函数的。

改造

我使用的方法是从简单困难,逐步进行开发,首先就是在不修改template的情况下实现最基本的单选框功能。然后逐步的看一下原来的代码来增加功能,最后就是将功能包装为一个一个的useXXX的函数来向外暴露事件和状态。如何在写的过程中查看效果,你可以执行yarn dev:play来运行examples/play/index.vue这个文件,在这个文件里使用你写的这个组件,来查看效果。

测试

因为这个项目,我第一次用到了测试这个知识,虽然以前了解过,但仅仅就是了解了一下

在这个项目中真正的第一次使用,也学习了VTU这个vue的测试框架

其实测试也是很简单的,你可以查看之前写好的demo然后看着他们的风格写

但是在写测试脚本的时候是要站在一个用户的角度进行测试,测试还是以使用为中心就行测试

然后运行测试文件,都PASS后就可以改文档了

改文档

主要是修改进度表和网站上的demo代码,这里有一个坑,不对这里有好几个坑

首先就是如果在使用dev:play命令进行测试的时候,如果不能直接使用组件的话那就说明

src/index.js文件里没有组件你的组件,而这个文件是通过build:file来生成的

而生成这个文件的js脚本是build/bin/build-entry.js ,大约在72行左右的代码

你需要把你写的那个组件的名字加到那个数组里,然后执行yarn build:file或者npm run build:file

然后就可以直接使用了,虽然也可以直接导入测试,但是这里最终不是要解决这里的问题,而是在demo中是使用全局导入的

如果你不这样操作最后就无法在demo上呈现

说到demo,这里也有一个坑,你会发现在执行dev这个命令打开网站后没有呈现,而你已经将上述的问题解决

但是还是没有呈现,这里有个非常魔幻的坑就是,你需要把md文件里的样例的template标签删除后才能显示,这个就非常魔幻

当你删除template这个标签后就可以显示了,然后就是修改细节文档,最后就可以提交了

提交

我大约花了两天的时间写完了radio这个组件

但是在提交的时候又踩了一个坑,因为在提交之前会自动触发测试命令,如果测试不通过后就无法提交

因为这个项目不是从零开始的项目,以前遗留的测试文件他还会运行,但是因为有些组件还没改

所以就测试不通过,所以就无法提交,这时候就需要看他的报错了,他这里提示是加上--no-verity这个参数后就可以不验证提交了

还需要注意的是提交文本的规范是 组件名: 完成的事情 都是使用英文

最后提交成功,然后就是PR

之前我一直认为PR是在对方仓库进行,后来发现不是

PR需要在你Fork的仓库里进行,然后成功PR,等待大佬review

等了两天后成功的通过了PR,我也是非常激动的,因为这是我第一次PR

总结

首先是大型项目肯定要遵守一些规范的,毕竟这个代码是要很多人看嘛

而且测试文件也是非常重要的,你写好测试文件后相当于是你的安全墙,在出现大的问题后第一时间就报错了

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改