Сделать абсолютные пути относительно корня проекта в Webpack

Question

Я нахожу, что мне нужно набрать ../, чтобы require() файлов. Моя структура каталогов включает в себя эти:

js/ 
    components/ 
    ... 
    actions/ 
    ... 

из папки компонентов, мне нужно сделать import foo from '../actions/fooAction'. Возможно ли сделать корневой каталог корнем проекта? То есть Вместо этого я хочу сделать import foo from '/actions/fooAction'. Я попытался установить параметр resolve.root Webpack, но он ничего не сделал.

Answer 1

Опция resolve.root не modifiy как file modules разрешены.

Необходимый модуль с префиксом '/' является абсолютным путем к файлу. Например, require ('/ home/marco/foo.js') загрузит файл в /home/marco/foo.js.

/ разрешает корень вашей файловой системы.

Возможно, что вы хотите, чтобы разрешить вашу папку js как modules directory.

webpack.config.js

resolve: { 
    root: path.resolve('./js') 
} 

В этой конфигурации добавлен в ваш конфигурационный файл будет сказать WebPack разрешить любую import или require относительно папки js. Затем, вместо того, чтобы использовать

import foo from '../actions/fooAction' 

вы сможете:

import foo from 'actions/fooAction` 

Разуму отсутствие / в самом начале.

Answer 2

Процесс решения в основном простой и различает три варианта:

абсолютный путь: требуется ("/ домашний/Me/файл")

относительный путь: требуется (» ../src/file ") или требовать (" ./ файл ")

модуль путь: требуется (" модуль/Библиотека/файл ")

Первые два довольно очевидны, третья заслуживает более подробного рассмотрения:

1. Absolute к вашей файловой системе действительно

2. Относительно текущего файла (если этот файл находится в src/foo/bar или webpack/config/subconfig , тогда действительно это все ...)

3. В отличие от import (который обрабатывает 1 + 2 в значительной степени то же самое, но послать бы вы ищете в node_modules сразу) путь «модуль» действительно означает, что ваш корень проекта для путей без необходимости разрешения, как output.path в вашем WebPack конфигурации ... и (по разрешению) только 3 подлежит resolve.root и resolve.moduleDirectories разрешающего, see webpack docs here

Answer 3

Я собираюсь ответить на этот вопрос немного по-другому, без использования resolve.root. Все, что сказал @dresyecat, верны. Тем не менее, я просто прошел одно и то же упражнение, перемещаясь от относительных путей всюду к модульным путям. Here is the doc, который объясняет три разных типа путей, которые вы можете использовать в инструкции import.

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

Проблема заключается в том, что по умолчанию пути модулей работают только с вещами, импортированными через npm, поскольку новые модули переменной по умолчанию по умолчанию имеют значение ["node_modules"]. Это позволяет вам легко импортировать сторонний код из npm. Но это означает, что для импорта вашего кода с помощью пути к модулю требуется изменение конфигурации. BTW, модули в предыдущих версиях назывался moduleDirectories. Here are the docs для конфигурации конфигурации разрешения.

Хорошо если у вас есть структура каталогов вроде этого:

project/ 
    webpack.config.json 
    js/ 
     components 
     actions 

Вы можете установить каталог модулей быть:

resolve: { 
    extensions: [ '.ts', '.js', '*' ], 
    modules: [ path.resolve(__dirname, "js"), "node_modules"] 
} 

Пару важных моментов:

• Будьте уверены, включить «node_modules», если вы используете npm для вытягивания стороннего кода, или ваш импорт из них начнет сбой

• Обязательно импортируйте компонент пути в вашу конфигурацию, чтобы определить путь

  var path = require ('path');

Затем вы можете использовать следующее (как было указано - без ведущего /), чтобы импортировать компоненты, используя форму пути.Модуль:

import "actions/fooAction";