问题背景

• 在使用 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 配置暴露出来的原因。