前言
这个问题首先要从我们项目的require语句开始说起。
当打开我们项目的时候,我们可能会看到一大堆长相对引用,如下所示:
import component from '../../../../component/aaa.js'
你一定知道,webpack中有个叫做alias的配置属性,可以帮助我们搞全局引用配置。比如说,在webpack.config.js中配置相应的键值对,我们就可以通过require(‘util’) 这种方式,而非require(‘../../../util’)这种方式,去做引用。
项目中虽然没有用webpack,但是用到了babel,而babel有个叫做babel-plugin-module-resolver可以做类似的事情
介绍: https://www.jianshu.com/p/beafc1470fca
npm地址: https://www.npmjs.com/package/babel-plugin-module-resolver
好,最关键的问题来了,到底是选用全局绝对引用(alias) 还是 长相对引用??? 其利弊几何??
两种方式
- 使用全局路径,依靠babel插件实现全局引用(alias)
- 使用相对路径,并依靠VScode自带功能提升效率
使用全局路径,依靠babel插件实现全局引用(alias)
利
- 代码简洁,短小精悍
弊
- 无法利用VScode默认自带功能实现点击跳转,比如我们看代码时候经常需要点击一个require的链接,然后实现跳转,但是使用这种alias的时候不能实现自动跳转
- 无法利用VScode默认自带的路径导入功能,写成alias虽然简单了,但是形式上简单,实际工程中却未必简单,这是因为,如果是采用相对路径的话,根据系统的默认自带功能,可以自动引入相对路径的,根本无需编写。如果你采用绝对路径的方式书写方法时,VScode的这一功能就爱莫能助了
- 完全不需要考虑代码重构问题
- RN-web和RN的代码打包方式不一致,可能产生冲突,因为RN用的是babel结合bundleJS打包的,而web是根据webpack打包的,两者在设置全局alias的时候方式可能不一样,需要测试预估风险
使用相对路径,并依靠VScode自带功能提升效率
利
实际上,今天的VScode已经非常强大了,上面的对比其实就讲了VScode自带功能,给相对路径的效率带来的巨大提升:
- VScode默认自带相对路径跳转功能,实现相对路径点击跳转。这是个非常有用的功能,当你在A文件中,看到它引用了一个B文件下的类,你可以直接跳转到B文件,让代码阅读变得非常方便
- VScode默认自带相对路径导入功能,如果是采用相对路径的话,根据系统的默认自带功能,你敲出方法名的时候,会逐个字母筛选并显示提示,同时选择对应方法的时候,文件上方会自动引入那个模块的相对路径。
- 文件路径修改时候,VScode自带一键更新路径功能,所以重构什么的so easy!
- 思路保守,不会发生不可预测的问题
弊
额。。。。。。 好像除了写起来不太好看之外,没有什么明显的缺点,哈哈哈哈
折中方案, 以及进一步的利弊分析
OK,那我们能不能既让代码好看,同时还使用方便简单呢??
其实我想过这么一种方案:
1.通过加入alias的功能,让代码简洁漂亮,不像长相对路径那样那么冗长
2.通过IDE插件,如VScode插件,让代码编写的流畅性和相对路径一样
但是这种方式的缺点显而易见:
- 插件生态问题:我们团队不可能大家都用VScode, 而且本来VScode就不一定有这种插件,而其他IDE的社区就更差了,我认为能通过插件达到效果的希望不大
- 就算真的有这些插件,使用起来似乎也不太方便,VScode的扩展插件的代码是不能上传到github的,要自己下载,而同步的话又需要额外的插件,这样,新人加进来就不能做到开箱即用了。我们之间团队的协调还不能做到完全一致,可能新人进来没人引导他下载这些VScode插件
- 好吧,就算前2种都没问题,但其实还是有问题,因为我们没办法完全禁掉相对路径引用,所以结果就是相对引用和绝对引用并存的状态,这时候风格就很乱,不统一
结论
就用相对路径吧!! 难看就难看呗,咱们追求的是实用主义