web-dev-qa-db-ja.com

Webpackがエイリアスを適切に解決しない

アプリがモジュールとして機能するための名前空間を用意し、この名前空間を使用してコンポーネントをインポートし、相対パスの使用を制限しようとしています。

ただし、ここではエイリアスのWebpackドキュメントに従っていますが、 http://webpack.github.io/docs/configuration.html#resolve-alias 動作させることができません。

これは私の解決オブジェクトがどのように見えるかです：

_resolve: {
  root: path.resolve(__dirname),
  alias: {
    myApp: './src',
  },
  extensions: ['', '.js', '.json', '.jsx']
}
_

path.resolve(__dirname)は_/Users/Alex/Workspace/MyAppName/ui/_を解決します

その方法でファイルをファイル_/Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx_にインポートします。

_import { myMethod } from 'myApp/utils/myUtils';
_

ビルド中に次のエラーが表示されます。

_ERROR in ./src/components/Header/index.jsx
Module not found: Error: Cannot resolve module 'myApp/utils/myUtils' in /Users/Alex/Workspace/MyAppName/ui/src/components/Header
 @ ./src/components/Header/index.jsx 33:19-56
_

私もmodulesDirectoriesを試してみましたが、どちらも機能しません。

何が悪いのか分かりますか？

javascriptnode.jsreactjsecmascript-6webpack
11
alexmngn

エイリアスを絶対パスに解決すると、トリックが実行されます。

resolve: {
  alias: {
    myApp: path.resolve(__dirname, 'src'),
  },
  extensions: ['', '.js', '.jsx']
}

簡単な例でこれを確認してください webpack resolve alias Gist 。

相対パスの数を制限する別の解決策は、./srcフォルダーをエイリアスする代わりに root として追加することです。

resolve: {
  root: [path.resolve('./src')],
  extensions: ['', '.js', '.jsx']
}

そうすれば、./src内のすべてのフォルダーを、モジュールが配置されているかのように要求できます。たとえば、次のディレクトリ構造があるとします。

.
├── node_modules
├── src
│   ├── components
│   └── utils

次のようにcomponentsおよびutilsからインポートできます。

import Header from 'components/Header';
import { myMethod } from 'utils/myUtils';

./src内の各フォルダーのエイリアスを持つようなもの。

7
dreyescat

これは多くの人にとって明白かもしれませんが、私と同じように、WindowsまたはMacからLinuxに移動したときに突然機能しない理由を理解するために多くの時間を費やしている場合は、パスの大文字と小文字を確認してください...

私とプロジェクトの他のすべての人はWindowsまたはMacを使用していますが、自宅ではデュアルブートUbuntuを使用しています。コードのクローンを作成してwebpackを実行すると、_Cannot resolve module..._エラーが大量に発生しました。失敗したモジュールのパスが_@app/Shared/settings.js_のようなもので、requireがrequire('@app/shared/settings')。 Windowsは気にしないので、私がLinuxに取り掛かるまで、すべてがうまくいきました。結局のところ、問題はwebpackやnodeなどにあるのではないため、これが問題である可能性を示唆する人を見つけられなかったのはおそらくそのためです。

これが誰かの時間を節約することを願っています。それとも、私はばかげているだけかもしれません。

2
Niklas Noem

同じエラーが発生しました。 Finnalyが問題を見つけたのは、resolveを2回書いたことです。そして、2番目のresolveは前のものを上書きします。私のコードは次のとおりです：

modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, 'src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

さらにヘルプが Webpack Doc にあります

0
saifei Lee

ほとんどの場合、プロジェクトのフォルダ構造に依存します。 Webpackファイルがフォルダー内にある場合は、それを適切に処理するようにしてください

.
├── node_modules
├── src
│   ├── components
│   └── config/webpack.config.js

modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, '../src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

また、フォルダに「ソース」という名前を付けて、パスに「src」を使用することもよくあります。

くそー！そのコピーペーストは私のデバッグ時間の多くを費やしました

これが上記の理由のためにそのような問題に直面している誰かを助けることを願っています。

0
Vinayak humberi

私は次の構文なしで使用します：

resolve: {
        alias: {
            Data:  __dirname + '/src/data'
        },
        extensions: ['.js', '.jsx', '.json']

    }

import points from 'Data/points.json';
0
zloctb