カスタムインポートパスとどのように役立つことができます

インポートをよりエレガントにし、組織化する
私が多くのファイルでアプリケーションを開発しているとき、私を悩ませる痛みがあるならば、それらのファイルが他のファイルを輸入するとき、それはあります../ それらのファイルのインポートで.
我々のアプリケーションが成長するにつれて、我々のプロジェクトファイルのフォルダは他のフォルダの中でますます入れ子になっていることがわかります.

import ExampleComponent from '../../../../../../src/components/ExampleComponent/'

上の例は本物で、我々が考えるよりずっと一般的です.残念ながら、これらの過度の使用../ 私たちがコードを維持する必要があるとき、いくつかの痛みをもたらします.そして、それらの間で、我々が輸入されたファイルまたはインポートファイルの位置を変える必要があるたびに、相対パスを固定することの再処理.
このインポートをよりエレガントで組織化する最も簡単な方法の一つはカスタムパスを作成し、それを絶対パスとして残すことです.したがって、上の例は次のようになります.

import ExampleComponent from '~/components/ExampleComponent/'

上の例では~ 接頭辞は、我々のプロジェクトのディレクトリへの絶対パスとして設定されましたsrc フォルダ.そのように、我々のファイルがどんなフォルダであっても、我々が使用するとき~/ 接頭辞、我々は常にsrc フォルダ.
本当に良い右?

それを作る

依存関係のインストール

まず最初に、この魔法の動作に3つの依存関係をインストールして設定する必要があります.そして、
反応アプリを配線し、カスタマイズCRA
プロジェクトのルートでは、以下のコマンドを実行して、ejectを使用する必要がなく、反応スクリプトフォークを作成する必要なしに、webpack設定をカスタマイズしましょう.

yarn add -D react-app-rewired customize-cra

プラグインのインポート
次のコマンドを実行してカスタムパスを使用してファイルをインポートします.

yarn add -D babel-plugin-root-import

設定を上書きするjs

また、私たちのプロジェクトのルートで、私たちはconfig-overrides.js . 彼は私たちのプロジェクトのルートフォルダを確立する責任があります.
このコードをファイルに挿入しましょう

const { addBabelPlugin, override } = require('customize-cra')

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
)

devエディタでの生活の容易化

我々のプロジェクトの根源に、我々はファイルと呼ばれるjsconfig.json . VSCodeはカスタムパスを理解できるようになります.
このコードをファイルに挿入しましょう

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

最後の詳細

最後に、パッケージ内のスクリプトを更新します.JSONファイル.このようにしてください.

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

ご覧の通り、我々はすべてを交換していますreact-scripts with react-app-rewired を除いてeject スクリプト.

準備完了！

これでSRCフォルダ内の任意のファイルを使用できます~/ インポート時.

import ExampleComponent from '~/components/ExampleComponent/'

そして

実際にこの例を見たい場合は、ここで反応プロジェクト用に作成したテンプレートを見てみましょう.

ディゴルシルテック / ボアプレートCRAタイプスクリプト

このプロジェクトは、反応プロジェクトのためのボイラープレートです。このテンプレートはreactjsとtypescriptで構築されました。

このアプローチについて、私たちの輸入品についてどう思いますか?