问题背景
- 在使用 dva 框架进行项目开发过程中,起初都是使用相对路径的,比如这样:
../../../Models
; - 但是项目做到后面,新增了很多目录,导致目录结构很杂乱,这时候就想要整理下项目的目录结构,也就将目录换一个位置;
- 这时候随便换一个文件就会报找不到文件的错误,遂决定使用绝对路径,像这样:
D:/work/antd-admin/src/models/Models
; - 这样也埋了一个坑,就是以后将项目antd-admin移动到 e 盘下,不是又需要重新改路径吗?????
解决方法
-
问题出现了,就该寻找解决方法。
-
找了很多资料发现 Webpack 的配置文件中有个 alias 文件,可以解决这个问题。参考资料,详见62-68行
-
但是在 dva 的配置文件 roadhog 中又明确说道:“你最好不要用 webpack 的配置文件,因为我们之后会更新 roadhog,并不保证兼容 webpack”。考虑到毕竟整体框架还是用人家 dva 的,这里就不埋坑了。
-
接着找解决办法,在 github 上给 dva 作者 sorrycc 提了这个问题,他提供的解决方案是使用 babel-plugin-module-alias 这个包。
-
查询上述包的使用发现该包已经废弃了,替代品是 babel-plugin-module-resolver,写法上更加简单。
-
介绍下 babel-plugin-module-resolver 在 dva 中的使用方法:
- 安装包:
$ npm install --save-dev babel-plugin-module-resolver
- 在 .roadhogrc.js 中配置:(主要添加的是 3-9 行)
0 "env": { 1 "development": { 2 "extraBabelPlugins": [ 3 ["module-resolver", { 4 "root": ["./src"], 5 "alias": { 6 "utils": '/utils', 7 "underscore": "lodash" 8 } 9 }] 10 ] 11 }, 12 }
// 配置前的写法 import utils from './src/utils'; // 配置后的写法 import utils from 'utils';
-
如果你没有使用 ESlint,到这里就算是解决了,如果你使用 ESlint,会发现
import utils from 'utils';
这里的utils
会报错,信息是:can not find utils module
,原因是把 utils 当成是一个诸如 fs 这样的模块了,而事实上它只是一个别名。 -
网上有说用 eslint-import-resolver-babel-module 在 .eslintrc 进行配置即可解决这个问题,作者试了好久都没成功,只能把它当成是使用别名的副作用了。
- 在 .eslintrc 中配置:
"settings": { "import/resolver": { "babel-module": {} } },
-
后来也询问了 dav 作者 sorrycc 这问题咋解决,大拿给的答案:
这是使用 alias 的副作用,副作用还包括不能在 IDE 里直接跳转到指定模块或者函数, 这也是我为啥不推荐用 alias 并且没有把 webpack 的 alias 配置暴露出来的原因。