模块引用方式利弊辨析： 全局绝对引用(alias) && 长相对引用

前言

这个问题首先要从我们项目的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种都没问题，但其实还是有问题，因为我们没办法完全禁掉相对路径引用，所以结果就是相对引用和绝对引用并存的状态，这时候风格就很乱，不统一

结论

就用相对路径吧！！ 难看就难看呗，咱们追求的是实用主义