173

モジュール パスを webpack で解決する方法がまだわかりません。今私は書く：

myfile = require('../../mydir/myfile.js')

しかし、私は書きたい

myfile = require('mydir/myfile.js')

as alias then I canを使用した同様の例が見られるので、 resolve.aliasが役立つかもしれないと考えていました。{ xyz: "/some/dir" }require("xyz/file.js")

しかし、エイリアスを に設定すると{ mydir: '/absolute/path/mydir' }、機能しrequire('mydir/myfile.js') ません。

ドキュメントを何度も読んでいて、何かが足りないと感じているので、私はばかげているように感じます。../../親戚が必要とするすべてをetcで書くことを避ける正しい方法は何ですか?

4

11 に答える 11

146

Webpack >2.0

wtkの回答を参照してください。

ウェブパック 1.0

これを行うより簡単な方法は、resolve.root を使用することです。

http://webpack.github.io/docs/configuration.html#resolve-root

resolve.root

モジュールを含むディレクトリ (絶対パス)。ディレクトリの配列の場合もあります。この設定は、個々のディレクトリを検索パスに追加するために使用する必要があります。

あなたの場合：

webpack構成

var path = require('path');

// ...

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

消費モジュール

require('myfile')

また

require('myfile.js')

参照: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

于 2014-12-16T20:01:48.280 に答える
84

modules今後の参考のために、webpack 2はパスを解決する方法以外はすべて削除しました。これは機能しないrootことを意味します。

https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

構成例は次で始まります。

{
  modules: [path.resolve(__dirname, "app"), "node_modules"]
  // (was split into `root`, `modulesDirectories` and `fallback` in the old options)
于 2016-04-12T13:35:54.773 に答える
13

他の誰かがこの問題に遭遇した場合に備えて、次のように機能させることができました。

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

私のディレクトリ構造は次のとおりです。

.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│   ├── components
│   ├── index.html
│   ├── main.js
│   └── styles
├── webpack.config.js

次に、srcディレクトリ内のどこからでも呼び出すことができます。

import MyComponent from 'components/MyComponent';
于 2015-11-20T01:30:50.980 に答える
5

私の最大の頭痛の種は、名前空間のパスなしで動作することでした。このようなもの：

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

これを行うように環境を設定する前に：

require('app.js')
require('ui/menu')
require('lodash')

src重要なコンテキスト情報を隠す暗黙のパスを避ける方がはるかに便利であることがわかりました。

私の目的は、次のように要求することです:

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

ご覧のとおり、すべてのアプリ コードは必須のパス名前空間内にあります。これにより、どの require 呼び出しがライブラリ、アプリ コード、またはテスト ファイルを受け取るかが明確になります。

このため、次node_modulesのようにソースフォルダー内でアプリの名前を付けない限り、解決パスが現在のアプリフォルダーであることを確認しますsrc/my_app

これは私のwebpackのデフォルトです

resolve: {
  extensions: ['', '.jsx', '.js', '.json'],
  root: path.resolve(__dirname),
  modulesDirectories: ['node_modules']
}

NODE_PATH環境変数を現在のプロジェクト ファイルに設定するとさらに良いでしょう。これはより普遍的な解決策であり、webpack なしで他のツールを使用したい場合に役立ちます: テスト、リンティング...

于 2016-01-04T08:55:32.137 に答える
3

create-react-appを使用している場合は、次.envを含むファイルを追加するだけです

NODE_PATH=src/

ソース: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

于 2017-08-02T11:21:37.563 に答える