Reactのスーパークリーンでリファクタリングに適したインポートステートメント

投稿日: 2022-04-20 2022-04-20
タグ: React

この記事では、importステートメントをよりクリーンにし、リファクタリングを容易にするための小さなトリックを学びます。

create-react-app v3の最新リリースでは、絶対インポートで非常に人気のある機能がサポートされるようになりました。この機能は、Visual Studio Code IDEから着想を得たものであり、最新バージョンの Create ReactAppを使用しているすべての人が利用できるようになりました。

「絶対輸入」とは何ですか？

通常、Reactコードベースはかなり大きくなり、プロジェクトの一般的なファイル構造は次のようになります。

├── src
│   ├── components
│   │    ├── Header
│   │    ├── Footer
│   │    ├── Sidebar
│   │    ├── ...etc
│   ├── containers
│   ├── store
│   ├── reducers
│   ├── actions
│   └── helpers
├── public
├── package.json
└── README.md

プロジェクトに別の<Component/>またはローカルモジュールをインポートするときはいつでも、./Foo、../foo、および../../../foo-barインポートステートメントがたくさんあります。ファイル。

deep-nested-file.js

import { Header } from '../Header'
import { HeaderContainer } from '../../containers/HeaderContainer'
import headerStore from '../../store/headerStore'

このファイルを移動する必要がある場合、これらのimportステートメントはすべて壊れます。最新の[email protected]リリースの「絶対インポート」は、webpackがimportステートメントを読み取る方法を変更することでこの問題を解決するため、代わりに次の構文を使用します。

deep-nested-file.js

import { Header } from 'components/Header'
import { HeaderContainer } from 'containers/HeaderContainer'
import headerStore from 'store/headerStore'

「component」という名前のnpmモジュールをインポートしているように見えるかもしれませんが、それは起こっていることではありません。 webpackは、node_modules（デフォルト）の代わりにsrcフォルダーを最初のルックアップ場所として使用しています。

これで、このファイルを移動する必要があるときに、importステートメントが壊れることはありません。追加のボーナスは、見た目がはるかにきれいになり、コードベースを初めて使用する人がプロジェクトの編成方法をより明確に理解できるようになることです。

使用法

Create React App 3を使用している場合は、プロジェクトのルート（package.jsonは）にjsconfig.jsonファイルを追加し、srcルックアップ参照として。このような：

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

それでおしまい！これで、プロジェクトは開発および本番ビルドで絶対インポートを使用します。

ノードと一緒に…

この環境変数を使用してCreateReactAppプロジェクトのルートに.envファイルを作成することにより、webpackからこれと同じ動作を取得する昔ながらの方法があります。

NODE_PATH=src

ただし、Create React Appの最新バージョンでは、次の非推奨の警告が表示されます。

モジュールを解決するためのNODE_PATHの設定は、jsconfig.json（またはTypeScriptを使用している場合はtsconfig.json）でbaseUrlを設定するために非推奨になり、create-react-appの将来のメジャーリリースで削除される予定です。

Reactチームが.envファイルのようなツールにとらわれない標準を廃止する理由は少し疑問です。私の唯一の推測は、jsconfig.jsonがCreateReactAppの将来のリリースの重要な構成ファイルになる可能性が高いということです。

絶対インポートの詳細については、create-react-appリリースノートをご覧ください。

結論

この機能に興奮していますか？ Twitter @alligatorioでご意見をお聞かせください。私は今これを新しいプロジェクトに使用していますが、クリーンな構文が本当に成長しています✨

getdocs

13036