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 (
    

      
        {STRINGS.HELLO}
      
      
      Learn more
    
  );
}

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 (
    

      
        {STRINGS.HELLO}
      
      
      Learn more
    
  );
}

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 (
    

    
  );
}

export default App;

次に、ファイルに次のコードをコピーします.

{STRINGS.HELLO}
Learn more

設定されたWebstormは、 、STRINGS、LINKS、および{STRINGS.HELLO} Learn more が必要であることを認識し、適切な位置に絶対パス参照を挿入します.

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 (
    

      

); } export default App; jsconfig.json
ただし、参照は必要な順序で挿入されていません.
npm package-->相対パス参照
ただし、参照順序を再調整する必要がある場合でも、相対パスを使用することができます.

VSコード

VS Codeの無師範な理解 は、jump to sourceが使用される場合、Intellisenseおよび は依然として正常に動作する.
実はVSコードはあなたのgit toolsが指すファイルやディレクトリが存在するかどうか気にしないので、あなたの構成も必要ありません.
注記私から見れば、2019年5月現在、全体的にWebstormはVS Codeよりも優れており、特に で衝突を解決し、コード再構築の面ではあるが、VS Codeは追いかけようと努力しており、Webstormに比べてまるで光速が開いている.

頭文字大文字慣例(Capital letters by convention)

Webpackで (PascalCase)を使用するのは長い間可能であり、codebaseを使用してルート参照パスに別名を付けるのが慣例となっている(examples from the Webpack docsではそうである).
これはとても聡明で、私もあなたの (top-level directories) の中のComponentsアルパカ法`の命名を強くお勧めします.Utilsとnpm packagesが頭文字の大文字を使うと、どの引用がnpm packageで、どれが自分のソースコードなのかを簡単に区別することができ、srcと衝突することはありません.
同様に、src/constant.jsのルートディレクトリの下でファイルを定義することを避けます.例えば、import constants from 'constants'を定義した場合、あなたが導入したときにAirbnbを定義すると、奥さんがおかしいように見えます.

ESLint

CRAは彼らのESLint設定に非常に簡素なルールがあり、なぜこのようになったのかについて強い意見を持っています.もしよろしければ、Facebookのアドバイス(Reactとは何かを理解していないし、404)を無視して、ESLintのESLint構成を使用することができます.
もしあなたが本当にそうすれば、Airbnbはeslint-plugin-importを使用していることに気づきます.定義されていないインポートをチェックし、次のエラーを与えます.settingのsrcでこの問題を修復し、settingに対する経路が可能であることを伝えることができます.

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

このためにnpmパッケージをインストールする必要はありません. で十分です.

リカバリ解像度(Restoring clarity)

Readmeに触れたことがない開発者にとっては、しばらく迷うかもしれませんが、IDEの設定方法など、この部分について説明することをお勧めします.あなたも本文のリンクを加えることができて、 が倒産しない限り、私は私が本文の内容を削除したり修正したりしないことを保証して、せいぜいネットの画像が失効しただけです.
もちろん、 を使用する必要があります.同じディレクトリの下にあるファイルは で導入したほうが便利だと思いますが、 を使うと逆に経路が冗長になると思います.また、関連するchild componentsの中で を使用することをお勧めします.コンポーネントがあり、コンポーネントが含まれている場合、完全に冗長な 参照を使用するのはあまりにもひどいです.
読んでくれてありがとう.もしあなたに役に立つなら、伝言を残したり、ほめたりして、感謝しています.
原文アドレス:hackernoon.com/absolute-im…
作者:David Gilbertson