Разрешение требуемых путей с помощью webpack



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



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


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



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


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



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



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

770   10  

10 ответов:

Webpack >2.0

посмотреть ответ wtk.

Webpack 1.0

более простой способ сделать это-использовать resolve.корень.

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

разрешить.корень

каталог (абсолютный путь), который содержит ваши модули. Также может быть массив каталогов. Этот параметр следует использовать для добавления отдельные каталоги к пути поиска.

в вашем случае:

webpack config

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, которые могут добавить ясности в ваш код; так же, как это легко увидеть из других 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

это мой дефолт с webpack

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

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

Я разрешаю его с помощью Webpack 2 следующим образом:

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

вы можете добавить дополнительные каталоги для выбора...

получил это решение с помощью Webpack 2:

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

эта тема старая, но так как никто не написал о require.контекст я собираюсь упомянуть об этом:

вы можете использовать require.контекст, чтобы установить папку для просмотра следующим образом:

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 в webpack, что должно сделать трюк легко:

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

Если вы используете create-react-app, вы можете просто добавить содержащих

NODE_PATH=src/

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

Comments

    Ничего не найдено.