Webpack解決による超簡単な輸入

Modulesは、なしで、ES 6で来た最高の改善のうちの1つでした.Webpackと組み合わせると、より開発者フレンドリーな方法でコードを書くことができます.しかし、ファイルを参照するときにインポートすることができます繰り返し、エラーがちになり、ハードを見てすることができます.幸いにもWebpackは私たちを設定する超簡単に正しいソリューションで覆われている.

webpackの解決
Resolveはインポートされたモジュールを見つけるのを助けるウェブパックライブラリです.設定するには、以下のコードスニペットを設定ファイルに追加します.
webpack設定.js

module.exports = {
  resolve: {
    // configuration options
  },
};

解決ライブラリを使用すると、2つの方法でインポートを解決できます.

モジュール
モジュールは、指定したディレクトリでそれらを検索してインポートを解決します.しばしば、これはノードモジュールを解決するのに使用されます.
webpack設定.js

resolve: {
  modules: ['node_modules']
}

この設定では、次のように置き換えます.

import Module from '../../../../node_modules/module';

これで

import Module from 'module';

modulesを使用して、これは他の設定ファイルで問題が発生しないため、インポートの作業を行う必要があります.

別名
エイリアスは、元のパスをカスタムのものと置き換えることでインポートを解決します.
webpack設定.js

resolve: {
  alias: {
    @components: path.resolve(__dirname, 'components/'),
    @partials: path.resolve(__dirname, 'partials/'),
  },
}

これにより、次のように変更できます.

import Component from '../../../../components/component';
import Part from '../../../../partislas/part';

これを:

import Component from '@components/component';
import Part from '@partials/part';

aliasはresolve.modulesファイルの場所を指します.

エスペラント
エイリアスを使用すると、パスが解決できないというエラーが出てくるかもしれません.修正するには、eslint-import-resolver-webpackを使用できます.
設定するには、このコード行を__dirnameファイルに追加できます.

settings:
  import/resolver: webpack

webpack.config.jsが.eslintrc.ymlファイルと同じディレクトリにあるならば、この設定は動きます.それ以外の場合は、他の設定オプションを参照してください.

概要
WebPackを設定するすべての利用可能なオプションを圧倒することができますが、幸いにも、このライブラリは非常に理解し、設定が簡単です.それは私がきれいな輸入を書くのを助けました、そして、私はあなたがそれが私が持っているように役に立つと確信すると確信します.