Псевдонимы путей для импорта в WebStorm

Question

Псевдонимы путей для импорта в WebStorm

Я использую псевдонимы пути webpack для загрузки модуля ES6.

например. если я определяю псевдоним utils вместо чего-то вроде
import Foo from "../../../utils/foo", Я могу
import Foo from "utils/foo"

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

есть ли способ поручить WebStorm использовать такие псевдонимы?

786 7

javascript webpack webstorm es6-module-loader

7 ответов:

Comments

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

Jalil · Accepted Answer · 2017-06-26 17:58:08

[нерекомендуемый ответа. Начиная с WS2017. 2 Webstorm автоматически анализирует и применяет конфигурацию Webpack (см. комментарий @anstarovoyt)]

Да, есть.

фактически, Webstorm не может автоматически анализировать и применять конфигурацию Webpack, но вы можете настроить псевдонимы таким же образом.

вы просто должны отмечать родитель папка " utils "(в вашем примере) как корневой ресурс (щелкните правой кнопкой мыши, отметьте каталог / корень ресурса).

нам просто удалось сделать со следующей структурой:
/src
    /A
    /B
    /C
у нас есть папки B и C, объявленные как псевдоним в Webpack. И в Webstorm мы отметили " src "как"корень ресурса".

и теперь мы можем просто импортировать :
import A/path/to/any/file.js
вместо
import ../../../../../A/path/to/any/file.js
при этом Webstorm правильно разбирает и индексирует весь код, ссылки на файлы, автозаполнение и так далее...

Tomasz Mularczyk · Accepted Answer · 2017-10-20 21:52:38

мне удалось настроить псевдонимы для WebStorm 2017.2 в webpack следующим образом:

sandeep · Accepted Answer · 2016-01-23 22:34:10

сейчас, мы также использовали псевдонимы пути для файлов в нашем проекте реагировать. Имена импорта были короче, но мы потеряли много на статической проверке webstorm, а также функций завершения.

позже мы пришли к решению сократить код только до 3 уровней глубины, а также один уровень для общих частей. Функция завершения пути webstom (ctrl + space) даже помогает уменьшить накладные расходы на ввод текста. Производственная сборка не использует более длинные имена, поэтому вряд ли имеет какое-либо значение в окончательном коде.

Я предлагаю, пожалуйста, пересмотрите свое решение о псевдонимах. Вы теряете семантический смысл модулей, поступающих из node_modules и вашего собственного кода, а также снова и снова ссылаетесь на файлы псевдонимов, чтобы понять ваш код, это гораздо большие накладные расходы.

nachodd · Accepted Answer · 2018-05-03 19:02:59

для записи: in PHPSTORM, работая с laravel mix, мне удалось решить эту проблему путем создания webpack.конфиг.js файл отдельно нравится:
const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}
а затем импортировать его в webpack.смесь.js нравится:
const config = require('./webpack.config')
...
mix.webpackConfig(config)
убедитесь, что файл конфигурации webpack правильно указан в конфигурации PhpStorm в: Настройки > языки и фреймворки > Javascript > Webpack

webnoob · Accepted Answer · 2018-01-08 18:57:33

на это отвечают в комментарии, но чтобы спасти людей, копающихся в комментариях и ссылающихся только на информацию, вот она:

начиная с WS2017. 2 это будет сделано автоматически. Информация есть здесь.

в соответствии с этим, webstorm будет автоматически разрешать псевдонимы, которые включены в webpack.config в корне проекта. Если у вас есть пользовательская структура и ваш webpack.config не находится в корневой папке, а затем перейдите в Settings | Languages & Frameworks | JavaScript | Webpack и установить опция для конфигурации, которую вы требуете.

Примечание: большинство установок имеют base config, который затем вызывает a dev или prod версия. Чтобы это работало правильно, вам нужно сказать webstorm использовать dev one.

Gordon Forsythe · Accepted Answer · 2017-10-20 22:01:36

в PHPStorm (используя 2017.2 в настоящее время), я не смог заставить конфигурации webpack работать правильно в отношении псевдонимов.

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

Не уверен, что раздел каталогов существует в WebStorm, но если это так,это кажется надежным методом для получения псевдонимов импорта.

Kshatra · Accepted Answer · 2018-04-28 15:41:22

для тех, кто борется: путь.resolve () должен быть вызван с первым аргументом "__dirname" для Idea (Websorm), чтобы правильно разрешить путь.

будет работать для Idea (Websorm):
alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}
не будет работать для Idea (Websorm) (пока еще действителен псевдоним webpack):
alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}