web-dev-qa-db-ja.com

WebPackを使用した要求パスの解決

私はまだwebpackでモジュールパスを解決する方法を混同しています。今私は書きます：

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

でも書きたい

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

私は resolve.alias がエイリアスとして{ xyz: "/some/dir" }を使った同様の例を見るので助けになるかもしれないと思っていました、そして私はrequire("xyz/file.js")をすることができます。

しかし、私のエイリアスを{ mydir: '/absolute/path/mydir' }に設定した場合、require('mydir/myfile.js')は機能しません。

私はこの文書を何度も読んだので愚かな気がしますし、何かが足りないと感じます。 ../../などですべての関連する必要条件を書かないようにするための正しい方法は何ですか？

javascriptwebpack
154
gpbl

Webpack> 2.0

wtkの答え をご覧ください。

Webpack 1.0

これを行うためのもっと簡単な方法はresolve.rootを使うことです。

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

resolve.root

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

あなたの場合：

ウェブパック設定

var path = require('path');

// ...

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

消費モジュール

require('myfile')

または

require('myfile.js')

http://webpack.github.io/docs/configuration.html#resolve-モジュールディレクトリ

139
AndyCunningham

今後の参考のために、webpack 2はパスを解決する方法としてmodulesを除くすべてを削除しました。これは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)
68
wtk

resolve.alias はあなたが説明したのと全く同じように動作するはずです。そこで、私はこれを元の提案から生じる混乱を軽減するための答えとして提供します。それがうまくいかないという質問。

以下のような解決設定では、望ましい結果が得られます。

// used to resolve absolute path to project's root directory (where web pack.config.js should be located)
var path = require( 'path' );
...
{
  ...
  resolve: {
    // add alias for application code directory
    alias:{
      mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )
    },
    extensions: [ '', '.js' ]
  }
}

require( 'mydir/myfile.js' )は期待通りに動作します。そうでなければ、他の問題があるはずです。

検索パスに追加したいモジュールが複数ある場合は、 resolve.root が意味をなしますが、自分の内のコンポーネントを参照できるようにしたい場合は、相対パスのないアプリケーションコードでは、aliasが最も直接的で明示的なようです。

aliasの重要な利点はあなたのrequireに名前を付ける機会をあなたに与えることです。それはあなたのコードに明快さを加えることができます。他のrequiresからどのモジュールが参照されているかが簡単にわかるように、aliasを使用すると、内部モジュールが必要であることを明確にする記述的なrequireを記述できます。 require( 'my-project/component' )。 resolve.root は、名前を付ける機会を与えずに、目的のディレクトリに移動します。

62
sethro

他の誰かがこの問題に遭遇した場合、私はそれをこのように機能させることができました：

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';
14
Alex Klibisz

私の最大の頭痛は名前空間のない道で働いていました。このようなもの：

./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をあなたの現在のプロジェクトファイルに設定すればさらに良いでしょう。これはより普遍的な解決策であり、あなたがウェブパックなしで他のツールを使用したい場合に役立ちます：テスト、リンティング.

5
SystematicFrank

私はこのようにWebpack 2でそれを解決しました：

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

あなたは配列にもっとディレクトリを追加することができます...

3
Damjan Pavlica

Webpack 2を使用してこれを解決しました：

   resolve: {
      extensions: ['', '.js'],
        modules: [__dirname , 'node_modules']
    }
3
Aaqib

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

NODE_PATH=src/

出典： https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

1
Brian Burns

このスレッドは古くなっていますが、require.contextについて誰も投稿していないので、ここで言及します。

Require.contextを使用して、フォルダを次のように表示するように設定できます。

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')
1
altShiftDev

MyDirの親ディレクトリをwebpackのmodulesDirectoriesに含めることを誰かが提案した理由はわかりませんでした。

resolve: {
    modulesDirectories: [
      'parentDir',
      'node_modules',
    ],
    extensions: ['', '.js', '.jsx']
  },
0
daniele bertella