前端工程使用絕對路徑代替相對路徑

當項目的目錄結構比較復雜時，如果使用相對路徑，不僅不易讀，而且容易寫錯。比如:

import MyUtilFn from '../../../../utils/MyUtilFn';

那么借助一個插件我們就可以實現絕對路徑到相對路徑的轉換。

比如:

import MyUtilFn from '/utils/MyUtilFn';

babel-plugin-module-resolver
安裝方法:

 npm install --save-dev babel-plugin-module-resolver或

 yarn add --dev babel-plugin-module-resolver

安裝好后在babel的配置文件中加入:

{
  "plugins": [ ["module-resolver", { "root": ["./src"], "alias": { "@common": "./src/common", "@constants": "./src/constants" } }] ] }
以上配置表示把./src(.表示babel配置文件所在路徑)作為根路徑，也就是我們在import或require時只要寫/xxx就會到./src/xxx去尋找。
下面的alias可有可無，意思是起一些別名，比如我們寫'@common/xxx'就會到./src/common/xxx去尋找。