【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"命令时再揭晓。

相关推荐
清灵xmf19 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据26 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617734 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript