文档章节

dva 中使用绝对路径/别名的方法

dkvirus
 dkvirus
发布于 2017/08/02 16:01
字数 648
阅读 1074
收藏 1

问题背景

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

© 著作权归作者所有

dkvirus
粉丝 41
博文 120
码字总数 117311
作品 0
六安
程序员
私信 提问
React服务端渲染实现(基于Dva)

React服务端渲染实现 (基于Dva) 功能 基于 Dva 的 SSR 解决方案 (react-router-v4, redux, redux-saga) 支持 Dynamic Import (不再使用Dva自带的 dva/dynamic加载组件) 支持 CSS Modules ...

ruby97
2018/10/16
0
0
与DvaJS风云对话,是DvaJS挑战者?还是又一轮子?

有请主角登场: DvaJS:项目地址 React-coat:项目地址 >-

wooline
03/04
0
0
qml component is not ready

困扰很久的Component is not ready问题,网络上有很多种介绍的解决办法,但是都是未能真正的解决问题。现在就根据本人的使用情况简单的讨论分析。 提示Component is not ready有以下几种情况...

洋碱
2018/06/13
0
0
Linux文件目录管理

系统目录结构 为了方便查看系统目录结构,使用tree命令: //安装命令 yum install -y tree // 帮助 tree --help //man帮助命令使用 man tree // tree用法示例:查看根目录下两级 tree -L 2 / ...

yolks丶
2017/06/05
0
0
#react 之ant design Pro 学习研究#----启动项目

首页 src/index.js 就是以上5步成就了首页引用createHistory 可以实现类似java restfull 风格api 一样的路径访问 引用路由 src/router.js 里面用到了AuthorizedRoutea 和 authority,目前笔者...

杭州-IT攻城狮
2018/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
50分钟前
4
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
2
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
3
0
Java设计模式之外观模式(门面模式)

什么是外观模式   外观模式(Facade),他隐藏了系统的复杂性,并向客户端提供了一个可以访问系统的接口。这种类型的设计模式属于结构性模式。为子系统中的一组接口提供了一个统一的访问接口...

须臾之余
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部