一款RN图片转换工具的制作方法

allin2025-03-02  55


本发明属于转换工具,具体为一款rn图片转换工具。


背景技术:

1、随着技术的不断发展与进步,用户对产品的要求越来越高,尤其是前端产品,度过了追求功能的阶段,用户开始追求使用体验,一款优秀的产品往往会给用户极致的体验,比如页面加载速度、产品是否卡顿等。

2、现有产品中在将项目中图片组件替换为封装的图片组件时,通常需要操作人员手动进行替换,而项目中使用图片组件的文件数量庞大,项目中图片组件使用情况较多,如果要针对图片优化需要将所有使用图片组件的地方进行处理,不仅工作繁复,而且处理容易出错,所以将图片组件进行封装,在封装的组件内部统一处理图片的裁切,转webp等操作,将项目中使用的rn的image和主软件封装的ahrnimageview转换为自己封装的图片组件又是一个繁复且易出错的过程,因此需要对其进行改进。


技术实现思路

1、本发明的目的在于提供一款rn图片转换工具,以解决上述背景技术中提出的问题。

2、为了实现上述目的,本发明提供如下技术方案:一款rn图片转换工具,具体步骤如下:

3、s101:

4、根据配置文件,读取配置的范围内的所有文件;

5、s102:

6、遍历获取到的页面文件,将页面文件内容通过babel工具转为ast语法树;

7、s103:

8、遍历ast语法树,获取到需要转换的标签,遍历标签下的属性,将属性映射为新的图片组件的属性,创建新的图片组件ast树并将上述映射的属性添加到新的图片组件ast树中去,并使用新的图片组件的ast替换原来图片组件的ast;

9、s104:

10、将完成替换的ast语法树通过babel工具转为js、ts代码,将代码通过工具进行格式化,格式化完毕后写回到对应的文件中;

11、s105:

12、转换结束。

13、优选地,s101中所述读取配置的范围内的所有文件之前,需要通过全局安装命令npminstal l-g@bdpweb/auto-upgrade-image来安装cli工具。

14、优选地,s101中所述配置文件是指在项目根目录下,用户创建的一个名为img.upgrade.config.js的配置文件,并且配置文件中相应的字段。

15、优选地,s101中所述用户在读取配置的范围内的所有文件时,需要在项目根目录下执行upgrade-images命令,这个命令会启动cli工具,从而触发s101-s104的工作流程。

16、优选地,s105中所述转换结束时,进度条会进行到100%。

17、优选地,s103中所述转换过程中可能会有文件转换出现异常,异常不会中断转换,出现异常会跳过异常文件进行下一个文件转换。

18、优选地,s104中所述完成替换的ast,会被工具转换回js或ts代码,具体转换为哪一类的代码取决于原始文件的类型。

19、优选地,s104中所述工具为prettier工具,prettier可以根据项目的配置,如缩进风格、换行规则等来统一代码风格,这对于保持项目的代码整洁和一致性非常重要。

20、优选地,s103所述标签是指源代码中用于标识图片组件的特定标记或元素。

21、本发明的有益效果如下:

22、通过利用babel工具将js、ts文件转化为抽象语法树ast形式,极大地提高了代码分析和处理的灵活性,通过遍历ast,程序能够准确地找到符合特定模式的代码片段,如rn的image组件和主软件封装的ahrnimageview语法树,这种转换和遍历方式比直接解析文本代码更为高效和准确,在找到需要转换的image和ahrnimageview组件后,工具会根据预设的映射规则将这些组件的ast语法树转换为新封装的图片组件的ast语法树,通过ast级别的转换,工具能够精确地控制转换的过程,确保新组件与原始组件在功能和行为上保持一致,这大大提高了代码转换的效率和准确性,降低了开发人员的工作负担,解决了将rn的image和主软件封装的ahrnimageview转换为自己封装的图片组件繁复易出错的问题。



技术特征:

1.一款rn图片转换工具,其特征在于,具体步骤如下:

2.根据权利要求1所述的一款rn图片转换工具,其特征在于:s101中所述读取配置的范围内的所有文件之前,需要通过全局安装命令npminstall-g@bdpweb/auto-upgrade-image来安装cli工具。

3.根据权利要求1所述的一款rn图片转换工具,其特征在于:s101中所述配置文件是指在项目根目录下,用户创建的一个名为img.upgrade.config.js的配置文件,并且配置文件中相应的字段。

4.根据权利要求1所述的一款rn图片转换工具,其特征在于:s101中所述用户在读取配置的范围内的所有文件时,需要在项目根目录下执行upgrade-images命令,这个命令会启动cli工具,从而触发s101-s104的工作流程。

5.根据权利要求1所述的一款rn图片转换工具,其特征在于:s105中所述转换结束时,进度条会进行到100%。

6.根据权利要求1所述的一款rn图片转换工具,其特征在于:s103中所述转换过程中可能会有文件转换出现异常,异常不会中断转换,出现异常会跳过异常文件进行下一个文件转换。

7.根据权利要求1所述的一款rn图片转换工具,其特征在于:s104中所述完成替换的ast,会被工具转换回js或ts代码,具体转换为哪一类的代码取决于原始文件的类型。

8.根据权利要求1所述的一款rn图片转换工具,其特征在于:s104中所述工具为prettier工具,prettier可以根据项目的配置,如缩进风格、换行规则等来统一代码风格,这对于保持项目的代码整洁和一致性非常重要。

9.根据权利要求1所述的一款rn图片转换工具,其特征在于:s103所述标签是指源代码中用于标识图片组件的特定标记或元素。


技术总结
本发明属于转换工具技术领域,且公开了一款RN图片转换工具,具体步骤如下:S101:根据配置文件,读取配置的范围内的所有文件。通过利用babel工具将JS、TS文件转化为抽象语法树AST形式,极大地提高了代码分析和处理的灵活性,通过遍历AST,程序能够准确地找到符合特定模式的代码片段,如RN的Image组件和主软件封装的AHRNImageView语法树,这种转换和遍历方式比直接解析文本代码更为高效和准确,在找到需要转换的Image和AHRNImageView组件后,工具会根据预设的映射规则将这些组件的AST语法树转换为新封装的图片组件的AST语法树,通过AST级别的转换,工具能够精确地控制转换的过程,确保新组件与原始组件在功能和行为上保持一致,这大大提高了代码转换的效率和准确性。

技术研发人员:刘二川
受保护的技术使用者:北京车智赢科技有限公司
技术研发日:
技术公布日:2024/10/31
转载请注明原文地址: https://www.8miu.com/read-18951.html

最新回复(0)