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

_TheSpecialOne發表於2019-05-24
ReactAPP

閱讀本文只需6分鐘

隨著Create React App 3的釋出，我們現在引入元件或物件時可以使用絕對路徑（absolute import),而不需要eject專案。

哈利路亞。

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

  • 輸入路徑更加容易, 不再需要 ../../../../地獄模式
  • 你可以複製/貼上程式碼包括匯入到其他檔案中，而不需要修改引用路徑
  • 你可以移動檔案而不需要更新引用路徑(假如你的IDE沒有幫你這麼做)
  • 簡潔

image.png

根據官方文件的解釋，在你專案的根目錄下建立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 使用者，你一定遇見過這些煩惱:

image.png

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

首先，設定你的src目錄為 Resources Root。

image.png

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

image.png

現在 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)使用駝峰法`命名。

image.png

當 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，它會檢查未定義的匯入，並給你如下錯誤:

image.png

你可以通過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

相關文章