模块引用方式利弊辨析： 全局绝对引用(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种都没问题，但其实仍是有问题，由于咱们没办法彻底禁掉相对路径引用，因此结果就是相对引用和绝对引用并存的状态，这时候风格就很乱，不统一

结论

 

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