Разрешение требуемых путей с помощью 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?
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