Ketcher源码学习-储备知识-dependencies(4)-更多依赖(上)
一、常用依赖简介
1. Babel:JS转译器。转换ES6语法,转换JSX语法。
2. Rollup:JS模块打包器。
3. Jest:JS测试工具。
4. ESLint:JS语法规则审查工具。
5. Stylelint:CSS语法规则审查工具。
6. Prettier:代码格式化工具。
7. Lodash:JS实用工具库。
二、父项目中安装的依赖
1. color-alpha
(1) RGBA色彩模型:红 (Red)、绿 (Green)、蓝 (Blue)和不透明度参数 (alpha通道)。
(2) alpha取值范围:0 (完全透明) - 1 (不透明)。
2. husky与lint-staged:经配置后,在Git操作中自动审查代码。
(1) husky:配置git hooks的工具。例如:配置pre-commit hook,执行lint-staged。
(2) lint-staged:过滤git暂存区文件 (执行git add命令后的文件) 的工具。
(3) 根据lint-staged的配置项,对git暂存区文件执行代码格式化、审查修复、重新添加到git暂存区等操作。
(4) ESLint的规则审查是针对项目中匹配到的所有文件,对大型项目而言性能不佳。
3. npm-run-all:并行或顺序运行多个npm脚本的CLI工具。
三、ketcher-core package中安装的依赖
1. Ajv:JSON Schema验证工具。
(1) JSON Schema:用于【描述JSON数据结构】的声明文件,该文件本身亦使用JSON编写。示例可参考ketcher-core\src\domain\serializers\ket\schema.json文件。
(2) ajv.compile:用于生成验证函数。该验证函数接收待验证数据,返回一个布尔值;同时,该验证函数还拥有errors和schema两个属性。
(3) ajv.addFormat:添加自定义Format用于验证。参数一:待添加Format的名称 (应当与schema中的format字段相对应);参数二:待添加的Format,例如:正则表达式、函数等。
2. assert:Node.js assert模块的浏览器版本。
3. svgpath:用于SVG path的transformation。
(1) 示例可参考ketcher-core\src\application\render\draw.js文件。
四、ketcher-polymer-editor-react package中安装的依赖
1. Redux Toolkit:Redux工具集。
(1) configureStore:创建一个store,并集成了redux-thunk等功能。
(2) createSlice:创建一个slice,包含了创建action、reducer等功能。
五、example中安装的依赖
1. Normalize.css
(1) 早期各浏览器支持的CSS规范不同,导致各浏览器渲染页面时效果不一致,出现兼容性问题。
(2) CSS resets:暴力重置所有浏览器的默认样式。
(3) Normalize.css:在保护各浏览器默认样式的基础上,提供了HTML元素的一般化样式,以确保跨浏览器样式的一致性。
2. Why Did You Render:React开发性能监测插件。
六、demo中安装的依赖
1. web-vitals:由Google提供,可在生产环境下使用,统计各项Web指标以检查页面性能。
评论
发表评论