Babel プラグインモジュールリゾルバーによるインポートの簡素化-jsチュートリアル-php.cn

Babel プラグインモジュールリゾルバーによるインポートの簡素化

DDD

リリース： 2024-09-28 06:15:29

オリジナル

987 人が閲覧しました

Simplifying Imports with Babel Plugin Module Resolver

大規模な React Native または JavaScript プロジェクトで作業している場合、インポートの管理はすぐに面倒になる可能性があります。 ../../../components/Header.js のような長い相対パスを扱うことになるかもしれませんが、これは管理が難しいだけでなく、エラーも発生しやすくなります。幸いなことに、babel-plugin-module-resolver を使用してインポートを簡素化し、整理するための優れたソリューションがあります。

babel-plugin-module-resolver とは何ですか?

babel-plugin-module-resolver は、カスタムモジュール解決パスの構成を支援する Babel プラグインで、プロジェクト内のディレクトリまたはファイルのエイリアスを作成できるようにします。これにより、長く複雑な相対パスが読みやすい絶対エイリアスに置き換えられるため、コードがクリーンになり、保守が容易になります。

インストール

babel-plugin-module-resolver を使用するには、Babel と一緒にインストールする必要があります (まだインストールしていない場合)。インストール方法は次のとおりです:

npm install --save-dev babel-plugin-module-resolver

ログイン後にコピー

または

yarn add --dev babel-plugin-module-resolver

ログイン後にコピー

基本的な構成例

設定例を見てみましょう:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@assets': './src/assets',
          '@features': './src/features',
          '@navigation': './src/navigation',
          '@components': './src/components',
          '@styles': './src/styles',
          '@service': './src/service',
          '@state': './src/state',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};

ログイン後にコピー

この設定では:

root オプションは、Babel にモジュールの解決を開始する場所を指示します。この場合、それは ./src ディレクトリを指します。つまり、すべてのパスは src を基準にして解決されます。
エイリアスオプションを使用すると、プロジェクト内のさまざまなディレクトリのショートカットを定義できます。

これを詳しく見てみましょう:

@assets は ./src/assets にマップされ、次のようにアセットをインポートできます。

  import logo from '@assets/images/logo.png';

ログイン後にコピー

@components は ./src/components を指すため、次のようにコンポーネントをインポートできます。

  import Header from '@components/Header';

ログイン後にコピー

もうだめです ../../../!

エイリアスを使用する理由

可読性: シンプルで意味のあるエイリアスを使用すると、コードが読みやすく、理解しやすくなります。

   import UserProfile from '../../../components/UserProfile'; // old
   import UserProfile from '@components/UserProfile'; // new

ログイン後にコピー

保守性: ファイルを移動するときに、多数の相対パスを更新する必要はありません。必要なのは、エイリアスが正しい場所を指していることを確認することだけです。
よりクリーンなコードベース: コードをフォルダーに整理することをお勧めします。エイリアスを使用すると、このモジュール性のために長いインポートパスの代償を払う必要がなくなります。

プロジェクトに合わせて構成する方法

npm または Yarn を使用してプラグインをインストールします。

   npm install --save-dev babel-plugin-module-resolver

ログイン後にコピー

例に示すように、モジュールリゾルバープラグインを使用して Babel 構成 (babel.config.js) を更新し、カスタムパスを設定します。
エディターのオートコンプリートがこれを処理できることを確認してください。 VSCode などの一部のエディターでは、エイリアスを認識するために jsconfig.json または tsconfig.json ファイルで追加の構成が必要です。以下は VSCode の設定例です:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@assets/*": ["assets/*"],
      "@features/*": ["features/*"],
      "@service/*": ["service/*"],
      "@styles/*": ["styles/*"],
      "@navigation/*": ["navigation/*"],
      "@components/*": ["components/*"],
      "@state/*": ["state/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

ログイン後にコピー