web-dev-qa-db-ja.com

create-react-appで相対パスインポート（/../../../redux/action/action1）を使用しないようにする方法

反応ウェブサイトを作成するためにcreate-react-appパッケージを使用しています。コンポーネント、リソース、reduxなどをインポートするために、アプリ全体で相対パスを使用していました。たとえば、import action from '../../../redux/action

module-alis npmパッケージを使用してみましたが、成功しませんでした。フォルダー名またはエイリアスに基づいてインポートするために使用できるプラグインはありますか？

たとえば、import action from '@redux/action' または import action from '@resource/css/style.css'

reactjsreact-nativenpmcreate-react-app
31
Prem

プロジェクトルートに.envというファイルを作成し、そこに書き込みます。

NODE_PATH=src

次に、開発サーバーを再起動します。相対パスなしでsrc内にあるものをインポートできるはずです。

注redux importがアプリとライブラリのどちらを指しているのかわかりにくいため、フォルダーsrc/reduxを呼び出すことはお勧めしません。代わりに、フォルダsrc/appを呼び出して、app/...からインポートできます。

@reduxのようなカスタム構文は、Node解決アルゴリズムと互換性がないため、意図的にサポートしていません。

75
Dan Abramov

package.jsonファイルで、

このようなスクリプトオブジェクトでこのコードを取り出します。

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
     "eject": "NODE_PATH=src/ react-scripts eject"
  },

これにより、アプリで絶対パスのインポートが可能になります

1
parag patel

この問題を解決するために、プロジェクトで babel-plugin-module-resolver を使用しています。 babel-plugin-module-resolverもmodule-alisと同じです。したがって、module-alis問題を使用して解決する必要があると思います。

module-alisの使用が失敗した理由を教えていないのですか？だから私はそれを修正する方法を示すことはできません。

理由がわからない間は、ソリューションを放棄しないでください！

1
Quang Noi Truong

Webpack configでwebpack 2 resolveプロパティを使用できます。

resolve：を使用したwebpack設定のサンプル

ここで、コンポーネントとユーティリティは、Reactコンポーネントを含む独立したフォルダです。

resolve: {
        modules: ['src/scripts', 'node_modules'],
        extensions: ['.jsx', '.js'],
        unsafeCache: true,
        alias: {
            components: path.resolve(__dirname, 'src', 'scripts', 'components'),
            utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
        }
    }

その後、ファイルに直接インポートできます：

import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';

Webpack 2 Resolve Reference

1
santosh