Я все еще не понимаю, как разрешить пути модулей с помощью веб-пакета. Теперь я пишу:

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

но я хотел бы написать

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

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

Но если я установлю свой псевдоним { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') не будет работать.

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

Webpack> 2.0

Смотри ответ wtk .

Webpack 1.0

Более простой способ сделать это - использовать resol.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-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является то, что он дает вам возможность использовать пространство имен, requireчто может внести ясность в ваш код; точно так же, как легко увидеть из других requires, на какой модуль ссылаются, он aliasпозволяет вам писать описательные requires, которые делают очевидным, что вам нужны внутренние модули, например 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

Это мой по умолчанию с веб-пак

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

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

Я решил это с Webpack 2 следующим образом:

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

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

Решил это с помощью Webpack 2:

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

Если вы используете create-реагировать-приложение , вы можете просто добавить .envфайл, содержащий

NODE_PATH=src/

Источник: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Эта ветка старая, но поскольку никто не писал о 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')

Я не понял, почему кто-то предложил включить родительский каталог myDir в modulesDirectories в веб-пакете, что должно легко сработать:

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

Просто используйте babel-plugin-module-resolver :

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

Затем создайте .babelrcфайл под root, если у вас его еще нет:

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

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

import { Layout } from 'components'

Для поддержки VSCode / Eslint, смотрите здесь .