Я все ще плутаю, як вирішити шляхи модулів за допомогою webpack. Тепер я пишу:

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

але я хотів би написати

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

Я думав, що разрешение.alias може допомогти, оскільки я бачу подібний приклад, використовуючи { xyz: "/some/dir" }як псевдонім, тоді можу require("xyz/file.js").

Але якщо я встановлю свій псевдонім { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') не вийде.

Я почуваюсь німим, бо читав документ багато разів і відчуваю, що чогось пропускаю. Який правильний спосіб уникнути написання всіх відносних потреб за допомогою ../../тощо?

Вебпак> 2.0

Дивіться відповідь wtk .

Webpack 1.0

Більш простий спосіб зробити це було б використовувати resolution.root.

http://webpack.github.io/docs/configuration.html#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-modulesdirectories

Для подальшої довідки, 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)

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є те, що він надає вам можливість простору імен для вашого requires, що може додати ясності коду; так само, як легко зрозуміти від інших require, на який модуль посилається, aliasдозволяє писати описові дані require, які роблять очевидним, що вам потрібні внутрішні модулі, наприклад require( 'my-project/component' ). resolve.rootпросто переміщує вас у потрібний каталог, не даючи вам можливості надалі простору імен.

У випадку, якщо хтось інший зіткнеться з цією проблемою, я зміг змусити її працювати так:

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';

Найбільший мій головний біль працював без пробігу імен. Щось на зразок цього:

./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')

Як бачите, весь код мого додатка знаходиться в обов'язковому просторі імен шляху. Це дає зрозуміти, що для виклику потрібна бібліотека, код програми або тестовий файл.

Для цього я переконуюсь, що мої шляхи вирішення справедливі node_modules поточна папка додатків, якщо ви не додасте простір імен у свою папку, якsrc/my_app

Це за замовчуванням для webpack

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

Було б навіть краще, якщо ви встановите var середовища NODE_PATHдля поточного файлу проекту. Це більш універсальне рішення, і воно допоможе, якщо ви хочете використовувати інші інструменти без веб-упаковки: тестування, підшивка ...

Я вирішую це з Webpack 2, як це:

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

Ви можете додати більше каталогів до масиву ...

Це вирішено за допомогою Webpack 2:

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

Якщо ви використовуєте create-react-app , ви можете просто додати .envфайл, що містить

NODE_PATH=src/

Джерело: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Цей потік старий, але оскільки ніхто не публікував інформацію про requ.context, я збираюся його згадати:

Ви можете використовувати Requ.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')

Я не зрозумів, чому хтось пропонував включити батьківський каталог myDir в moduleDirectories у webpack, що має легко зробити трюк:

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

Просто використовуйте babel-plugin-module-resolutionver :

$ npm i babel-plugin-module-resolver --save-dev

Потім створіть .babelrcфайл під коренем, якщо у вас його ще немає:

{
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"]
            }
        ]
    ]
}

І все під коренем трактуватиметься як абсолютний імпорт:

import { Layout } from 'components'

Про підтримку VSCode / Eslint дивіться тут .