javascript - node - Alias de ruta para importaciones en WebStorm

webstorm license

Question

Utilizo alias de ruta webpack para cargar el módulo ES6.

Por ejemplo, si defino un alias para utils lugar de algo como
import Foo from "../../../utils/foo" , puedo hacer
import Foo from "utils/foo"

El problema es que una vez que empiezo a usar alias, WebStorm pierde el seguimiento de la importación y me quedo con advertencias y sin autocompletar.

¿Hay alguna manera de indicarle a WebStorm que use tales alias?

Answer 1

En PHPStorm (usando 2017.2 actualmente), no he podido hacer que las configuraciones de paquete web funcionen correctamente con respecto a los alias.

Mi solución implica usar la sección "Directorios" de la configuración principal. Solo tenía que marcar cada carpeta referenciada por un alias como raíz de origen, luego hacer clic en el menú desplegable de propiedades para cada una y especificar el alias como un "Prefijo de paquete". Esto hizo que todo se vincule para mí.

No estoy seguro de si la sección Directorios existe en WebStorm, pero si es así, este parece ser un método infalible para que funcionen los alias de importación.

Answer 2

Esto se responde en un comentario, pero para salvar a las personas que cavan en comentarios y vincular solo información, aquí está:

A partir de WS2017.2 esto se hará automáticamente . La información está blog.jetbrains.com/webstorm/2017/06/… .

De acuerdo con esto, webstorm resolverá automáticamente los alias incluidos en webpack.config en la raíz del proyecto. Si tiene una estructura personalizada y su webpack.config no está en la carpeta raíz, vaya a Settings | Languages & Frameworks | JavaScript | Webpack Settings | Languages & Frameworks | JavaScript | Webpack Settings | Languages & Frameworks | JavaScript | Webpack y configure la opción a la configuración que necesita.

Nota: La mayoría de las configuraciones tienen una configuración base que luego llama a una versión de desarrollo o prod . Para que esto funcione correctamente, debe indicarle a webstorm que use el desarrollador .

Answer 3

Logré configurar alias para WebStorm 2017.2 dentro de un paquete web como este:

Answer 4

Para cualquiera que tenga dificultades: path.resolve () debe llamarse con el primer argumento "__dirname" para que Idea (Websorm) pueda resolver la ruta correctamente.

Funcionará para Idea (Websorm):

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

No funcionará para Idea (Websorm) (mientras sigue siendo un alias de paquete web válido):

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

Answer 5

Para el registro: en PHPSTORM , trabajando con laravel mix , logré resolver esto creando un archivo webpack.config.js por separado como:

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

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

Y luego importarlo en webpack.mix.js como:

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

Asegúrese de que el archivo de configuración del paquete web se apunte correctamente en la configuración de PhpStorm en: Configuración> Idiomas y marcos> Javascript> Paquete web

Answer 6

Webstorm no puede leer webpack.config si module.exports devuelve una función. Por ejemplo

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

Verifique su archivo de configuración, tal vez esto sea un problema.

Answer 7

[Respuesta obsoleta. A partir de WS2017.2 Webstorm analiza y aplica automáticamente la configuración de Webpack (vea el comentario de @anstarovoyt)]

Sí hay.

De hecho, Webstorm no puede analizar y aplicar automáticamente la configuración de Webpack, pero puede configurar alias de la misma manera.

Solo tiene que marcar la carpeta principal de "utils" (en su ejemplo) como raíz del recurso (clic derecho, marcar directorio como / raíz del recurso).

Logramos hacer con la siguiente estructura:

/src
    /A
    /B
    /C

Tenemos carpetas AB y C declaradas como alias en Webpack. Y en Webstorm marcamos "src" como "raíz de recursos".

Y ahora podemos simplemente importar:

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

en vez de

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

mientras todavía tiene Webstorm analizando e indexando correctamente todo el código, enlace a archivos, autocompletado, etc.

Answer 8

No en este momento , también estábamos usando alias de ruta para los archivos en nuestro proyecto de reacción. Los nombres de importación eran más cortos, pero perdimos mucho en la comprobación estática de la tormenta web, así como en las características de finalización.

Más tarde se nos ocurrió la decisión de reducir el código a solo 3 niveles de profundidad, así como un solo nivel para las partes comunes. La función de finalización de ruta de webstom (ctrl + space) incluso ayuda a reducir la sobrecarga de escritura. La compilación de producción no usa nombres más largos, por lo que casi no hace ninguna diferencia en el código final.

Sugeriré reconsiderar su decisión sobre los alias. Pierde el significado semántico de los módulos que provienen de node_modules y su propio código, así como hacer referencia a los archivos de alias una y otra vez para darle sentido a su código, es una sobrecarga mucho mayor.