Create React app 引用中使用絕對路徑

閱讀本文只需6分鐘

隨着Create React App 3的發佈，咱們如今引入組件或對象時可使用絕對路徑（absolute import),而不須要eject項目。

哈利路亞。

也許不用我解釋你也知道這一利好，不過我仍是總結一下好處。

• 輸入路徑更加容易, 再也不須要 ../../../../地獄模式
• 你能夠複製/粘貼代碼包括導入到其餘文件中，而不須要修改引用路徑
• 你能夠移動文件而不須要更新引用路徑(假如你的IDE沒有幫你這麼作)
• 簡潔

根據官方文檔的解釋，在你項目的根目錄下建立jsconfig.json文件，並添加如下代碼。

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
複製代碼

好極了，如今你能夠像往常同樣使用相對路徑

import React from 'react';
import Button from '../../Button/Button';
import { LINKS, STRINGS } from '../../../utils/constants';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <Button>
        {STRINGS.HELLO}
      </Button>
      
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;
複製代碼

或者，你可使用絕對路徑讓一切變得簡單，

import React from 'react';
import { LINKS, STRINGS } from 'utils/constants';
import Button from 'components/Button/Button';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <Button>
        {STRINGS.HELLO}
      </Button>
      
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;
複製代碼

不幸的是，官方解釋到此爲止了，可是你可能還須要作一些額外的配置。

WebStorm config

若是你是個 WebStorm/IntelliJ 用戶，你必定碰見過這些煩惱:

WebStrom 根據 Node.js 規則假設絕對路徑都在 node_modules, 因此咱們必須告訴它咱們須要酷一點使用絕對路徑。

首先，設置你的src目錄爲 Resources Root。

而後選擇 Settings > Editor > Code Style > JavaScript, 進入 Imports tab 下勾選 Use paths relative to the project, resource or sources roots.。

如今 Webstorm 明白了絕對路徑 該指向哪裏。同時 jump-to-source/autocomplete 這些功能將會奏效，而且再也不有警告，也意味着auto-import機制將使用絕對路徑。

假如咱們有這樣一份文件:

import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
    </div>
  );
}

export default App;
複製代碼

而後咱們在該文件中複製以下代碼:

<Button>{STRINGS.HELLO}</Button>
<a href={LINKS.HELP}>Learn more</a>
複製代碼

通過設置的 Webstorm 將會知道咱們須要 <Button> , STRINGS 和 LINKS, 並在合適的位置插入絕對路徑引用。

import React from 'react';
import styles from './App.module.css';
import Button from 'components/Button/Button';
import { LINKS, STRINGS } from 'utils/constants';

function App() {
  return (
    <div className={styles.App}>
      <Button>{STRINGS.HELLO}</Button>
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;
複製代碼

不過，它並無按我須要的順序插入引用,

npm package --> 相對路徑引用

不過，哪怕我須要從新調整引用順序，也好過使用相對路徑。

VS Code  — 不須要任何配置

VS Code 無師自通的理解 jsconfig.json， 當使用絕對路徑時，jump to source 和 Intellisense 依然正常運行。

其實VS Code 並不關心你的絕對路徑指向的文件或目錄是否存在，因此也並不須要你的任何配置。

註解 依我看，截止到 2019 年 5月爲止， 總體上來講， Webstorm 依然比 VS Code 優秀一些，特別是 git tools 解決衝突, 代碼重構方面，不過， VS Code 正在努力追趕，相比於Webstorm簡直就是光速打開。

首字母大寫慣例（Capital letters by convention）

在Webpack中使用絕對路徑可能有很長一段時間了，而且使用駝峯法(PascalCase)爲根引用路徑起別名已經成爲慣例(在 examples from the Webpack docs中就是這麼作的)。

這很聰明，我也強烈推薦在你的codebase中的根目錄(top-level directories)使用駝峯法`命名。

當 Components 和 Utils 使用首字母大寫，即可以很簡單的區分哪些引用是npm packages, 哪些是你本身的源碼，你也絕對不會和npm package 發生衝突。

一樣的，避免在src的根目錄下定義文件，好比，若是你定義了src/constant.js, 在你引入的時候 import constants from 'constants', 看起來就太太太奇怪了。

ESLint

CRA在他們的ESLint設置中有一套很是精簡的規則，而且對爲何會這樣有一些強烈的意見。若是你願意，你能夠不理會Facebook的建議(他們哪懂什麼是React ，何況他們仍是404), 而後使用 Airbnb的 ESLint 配置。

若是你真這麼作了，你會發現Airbnb使用eslint-plugin-import，它會檢查未定義的導入，並給你以下錯誤:

你能夠經過ESLint的setting來修復這個問題，告訴它路徑多是相對於src的:

"eslintConfig": {
  "extends": ["react-app", "airbnb"],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
},
複製代碼

請注意，你不須要爲此安裝任何的npm包，setting就夠了。

恢復清晰度(Restoring clarity)

對於沒接觸過絕對路徑引入的開發者來講，暫時可能會有點迷惑，因此我建議加入一些關於這部分描述在你的Readme中, 包括怎樣設置IDE。 你也能夠把加上本文的連接，只要簡書不倒閉，我保證我不會刪除或者修改本文的內容，至多隻是網絡圖片失效而已。

固然， 值得說明的是咱們仍是須要使用相對路徑引入。 我認爲在同一目錄下的文件使用相對路徑引入會更加方便， 使用絕對路徑反而會使路徑變得冗長。 同時，我建議你在一些相關的child components中使用相對路徑引入。假如你有一個<Dropdown>組件幷包含一個<DropdownItem>組件，這時還使用完整冗長的絕對路徑引用就顯得太過度了。

感謝閱讀。 若是對你有所幫助，請留言或者點贊，感激涕零。

原文地址：hackernoon.com/absolute-im…

感謝原文做者：David Gilbertson