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指标以检查页面性能。

评论