web-dev-qa-db-fra.com

Chemin des alias pour les importations dans WebStorm

J'utilise des alias de chemin Webpack pour le chargement du module ES6. 

Par exemple. Si je définis un alias pour utils au lieu de quelque chose comme
import Foo from "../../../utils/foo", je peux faire
import Foo from "utils/foo"

Le problème est qu'une fois que je commence à utiliser des alias, WebStorm perd la trace de l'importation et me laisse avec des avertissements et aucune finalisation automatique.

Existe-t-il un moyen de demander à WebStorm d'utiliser de tels alias?

javascriptwebstormwebpackes6-module-loader
58
Bogdan D

(Réponse obsolète. Depuis WS2017.2, Webstorm analyse et applique automatiquement la configuration Webpack (voir le commentaire @anstarovoyt)]} 

Oui il y a. 

En fait, Webstorm ne peut pas analyser et appliquer automatiquement la configuration Webpack, mais vous pouvez configurer des alias de la même manière. 

Il vous suffit de marquer le dossier parent de "utils" (dans votre exemple) en tant que racine resource (clic droit, marquer le répertoire en tant que/racine de la ressource). 

 right click on folder

Nous avons juste réussi à faire avec la structure suivante: 

/src
    /A
    /B
    /C

Nous avons des dossiers A B et C déclarés comme alias dans Webpack. Et dans Webstorm, nous avons marqué "src" comme "racine de la ressource". 

Et maintenant, nous pouvons simplement importer: 

import A/path/to/any/file.js

au lieu de 

import ../../../../../A/path/to/any/file.js

tout en ayant Webstorm correctement analysé et indexé tout le code, les liens vers des fichiers, la saisie semi-automatique, etc.

92
Jalil

J'ai réussi à configurer des alias pour WebStorm 2017.2 dans WebPack comme suit:

 enter image description here

24
Tomasz Mularczyk

Pour mémoire: dansPHPSTORM, en travaillant avec laravel mix , j’ai réussi à résoudre ce problème en créant un fichier webpack.config.js séparément, comme suit: 

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

Et puis en l'important dans le fichier webpack.mix.js, comme: 

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Assurez-vous que le fichier de configuration webpack est correctement pointé dans la configuration du PhpStorm dans: Paramètres> Langages & Frameworks> Javascript> Webpack

10
nachodd

Pas maintenant , Nous utilisions également des alias de chemins pour les fichiers de notre projet react. Les noms d'importation étaient plus courts, mais nous avons perdu beaucoup sur la vérification statique de webstorm ainsi que sur les fonctionnalités d'achèvement.

Nous avons ensuite décidé de réduire le code à 3 niveaux de profondeur, ainsi qu’à un seul niveau pour les parties communes. La fonctionnalité de complétion de chemin de Webstom (ctrl + space) permet même de réduire le temps de frappe. La version de production n'utilise pas de noms plus longs, elle ne fait donc guère de différence dans le code final.

Je vais suggérer s'il vous plaît reconsidérer votre décision sur les alias. Vous perdez la signification sémantique des modules provenant de node_modules et de votre propre code, ainsi que le fait de référencer les fichiers alias à plusieurs reprises pour donner un sens à votre code, ce qui est beaucoup plus lourd.

5
sandeep

Ceci est répondu dans un commentaire mais pour éviter que les gens ne creusent des commentaires et ne lient que des informations, la voici:

A partir de WS2017.2, cela se fera automatiquement. L'information est ici . 

Selon cela, webstorm résoudra automatiquement les alias inclus dans le webpack.config à la racine du projet. Si vous avez une structure personnalisée et que votre webpack.config ne se trouve pas dans le dossier racine, allez à Settings | Languages & Frameworks | JavaScript | Webpack et définissez l'option sur la configuration souhaitée.

Remarque: La plupart des configurations ont une configuration base qui appelle ensuite une version dev ou prod. Pour que cela fonctionne correctement, vous devez dire à webstorm d'utiliser le dev one.

4
webnoob

Dans PHPStorm (en 2017.2 actuellement), je n'ai pas réussi à faire en sorte que les configurations de packs Web fonctionnent correctement avec les alias.

Mon correctif implique l'utilisation de la section "Répertoires" des paramètres principaux. Je devais simplement marquer chaque dossier référencé par un alias en tant que racine des sources, puis cliquer sur la liste déroulante des propriétés pour chacun et spécifier l'alias en tant que "préfixe de package". Cela a tout relié pour moi.

Pas sûr que la section Répertoires existe dans WebStorm, mais si c'est le cas, cela semble être une méthode infaillible pour obtenir le fonctionnement des alias d'importation.

2
Gordon Forsythe

Path.resolve () doit être appelé avec le premier argument "__dirname" pour Idea (Websorm) afin de pouvoir résoudre le chemin correctement.

Travaillera pour Idea (Websorm):

alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}

Ne fonctionnera pas pour Idea (Websorm) (tout en restant un alias de Webpack valide):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}
2
Kshatra

Webstorm ne peut pas lire webpack.config si module.exports renvoie une fonction . Par exemple

module.exports = function (webpackEnv) {
  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    ...
 }
}

Vérifiez votre fichier de configuration, peut-être que cela cause un problème.

0
Aleksey Mann