【elementui源码解析】如何实现自动渲染md文档-第一篇

文章目录

目录

背景

获取源码

代码分析


所有章节:

背景

之前基于vant3的源码开发过二次开发过组件,其中vant实现了将md文档渲染到界面上,有天突发奇想想知道这是如何实现的将md文档渲染到界面上的,因为平时开发中使用elementui占多数,所以就以elementui为研究对象。

获取源码

  • 源码:elementui2源码地址:点我前往
  • 安装依赖:这里可能会遇到一些问题 一些说明参考源码中的 .github/CONTRIBUTING.zh-CN.md文件夹的"开发环境搭建" 根据这里的提示来安装依赖。
  • 运行:npm run dev
  • 如果有遇到安装依赖时报错,一般问题都是node-sass和本地的node版本不符合。首先去node的git库查看对应版本node-sass的git库,一般拉下来的elementui的4.11.0,我的做法是先降低本地的node版本,执行一遍yarn,但是项目使用的eslint版本需要14版本的node,所以再切换到14版本的node再执行yarn。注意:如果执行yran的过程中遇到报错,每次都要执行 yarn cache clean 再重新执行yarn,不然有可能会下载下来的依赖还是错的。(这里有问题欢迎评论区提问)

图1

项目启动成功打开http://localhost:8085/

图2

代码分析

首先查看根目录的package.json

查看dev命令:可以看到第一段是"npm run boostrap" 这段从图中可以看出就是执行"yarn || npm i"。接着往下看,出现了命令"npm run build;file";其中的第一段代码也就是绿色框中的"node build/bin/iconInit.js" 这就是本文分析的重点。

图3

找到该文件,我们来逐行分析。

  • 第3、4、5行代码引入了nodejs模块中的postcss、fs、path模块。
  • 第6行用fs模块找到icon.scss文件。如图5,这里面定义了elementui中所有的icon图标。
  • 第7行用postcss.parse函数将css字符串解析为postcss可以处理的对象,就相当于将字符串变成了对象,从其中的nodes我们可以获取到所有的定义的icon的名字,如图6。
  • 11-19行代码就是循环nodes,12行的正则就是匹配el-icon的所有图标比如:.el-icon-delete-solid:before,.el-icon-delete:before等,然后捕获"el-icon"之后":before"之前的内容,比如捕获"delete-solod"、"delete",然后push到classList中。
  • 最后22行代码就是将classList写入icon.json文件中。

图4

图5

图6

至于最终生成的这个icon.json文件有什么作用,我们需要等到介绍"node build/bin/build-entry.js"命令时再揭晓。

相关推荐
秦老师Q几秒前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 分钟前
Chrome离线安装包下载
前端·chrome
endingCode5 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
m512712 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript