WebStorm中用于导入的路径别名

Question

我使用webpack路径别名来加载ES6模块。

例如：如果我为utils定义了别名，而不是像这样写：
import Foo from "../../../utils/foo"，我可以这样写：
import Foo from "utils/foo"

问题是一旦我开始使用别名，WebStorm就无法追踪导入，我会得到警告并失去自动完成功能。

有没有一种方法可以指示WebStorm使用这种别名？

- Bogdan D

Answer 1

有的。

事实上，Webstorm不能自动解析和应用Webpack配置，但你可以通过同样的方式设置别名。

你只需要将“utils”（在您的示例中）的父文件夹标记为资源根目录（右键单击，标记目录为/资源根目录）。

我们刚刚使用了以下结构：

/src
    /A
    /B
    /C

我们在Webpack中将A、B和C文件夹声明为别名。而在WebStorm中，我们将“src”标记为“资源根目录”。

现在我们可以直接导入：

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

代替

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

同时仍然可以使Webstorm正确解析和索引所有代码、链接到文件、自动完成等等...

- Jalil

---

当不直接从Webstorm构建时，这将有效地破坏事物。 - maddrag0n

我已经在WebStorm 2016.2.3中尝试过，但是这个解决方案不起作用。 - Zation

在Angular2中，对于import { Component } from '@angular/core'这样的导入也会被解析。如果想要更清晰地表明路径是别名，应该如何实现at呢？ - Hitmands

@Toosick，请查看此博客文章：https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/。 - anstarovoyt

多个文件夹和多个webpack配置怎么办？ 对我不起作用，可能是因为这个原因：“默认情况下，WebStorm将分析项目根目录中的webpack配置文件，但您可以在“首选项|语言和框架|JavaScript|Webpack”中选择另一个文件。” https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/ - rofrol

Answer 2

我成功地在webpack中为WebStorm 2017.2设置了别名，如下所示：

- Tomasz Mularczyk

---

它可以工作。文件应包括module.exports = {resolve: {alias: {'@utils': path.resolve(__dirname, '../utils/')}}}。另外，我不得不重新启动WebStorm才能应用更改。 - Alexander

谢谢！它在 PhpStorm 2019.1 中对我很有帮助。 - Илья Зеленько

我们应该将这个答案标记为最佳答案。谢谢。 - Moein Alizadeh

这个帮了我。 - TomTomSamSam

谢谢！终于有解决这个烦人问题的办法了。 - Alberto Perez

Answer 3

您可以定义自定义路径，以便WebStorm/PhpStorm能够理解您的别名。但是请确保它们与您的别名相同。在根目录中创建一个文件，例如webStorm.config.js（任何js文件都可以）。然后在其中配置您的路径：

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm/PhpStorm将会把System识别为自己的模块，并将这个文件视为配置文件。

- E. Dn

---

这真的很有效！对我在Rollup+Svelte项目中有很大帮助！ - joycollector

谢谢，它有效。问题：您知道有关此文件的所有选项的完整文档吗？ - Mojtaba Hn

有没有一种方法可以针对特定的js文件来做到这一点？例如，我想使用“config”代替“src/server/lib/config/index.js”。我尝试过"config": "./src/server/lib/config/index.js"，但是那行不通。 - Matt

这应该是最好的答案。非常感谢。 - Nhan DT

太棒了！不幸的是，我还必须手动配置ESLint和Rollup，使用别名的副本。至少我有一个清洁的环境，但我希望JetBrains能像他们支持Webpack一样原生地支持Rollup。 - Mac

Answer 4

记录一下：在PHPSTORM中，使用laravel mix时，我通过创建单独的webpack.config.js文件解决了这个问题，例如：

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

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

然后，在 webpack.mix.js 中导入它，如下所示：

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

请确保在PhpStorm的“设置” > “语言和框架” > “JavaScript” > “Webpack”配置中，正确指向webpack配置文件。

- nachodd

---

请考虑那些在项目中并没有实际使用 webpack，但是想要设置这两个文件仅用于教授 PHPStorm 如何解析别名的用户的情况。这些人不知道应该在 "..." 中放置什么，以使 webpack.mix.js 文件对此目的实际起作用。具体而言，如果我只是删除 "..."，IDE 会报告无法解析 mix 符号，这是强烈的提示它实际上不会工作。缺少了一些关键重要的行，在其中某种方式需要/导入 "mix" 符号。请将这些添加到您的答案中。 - Szczepan Hołyszewski

Answer 5

这个问题已经在评论中得到了回答，但为了避免人们深入评论并仅链接相关信息，这里是答案：

从WS2017.2开始，这将自动完成。相关信息在这里。

根据此信息，WebStorm将自动解析包含在项目根目录下的webpack.config中的别名。如果您有自定义结构且您的webpack.config不在根文件夹中，则转到设置|语言和框架|JavaScript | Webpack并设置所需的配置选项。

注意：大多数设置都有一个base配置，然后调用dev或prod版本。为了使其正常工作，您需要告诉WebStorm使用dev版本。

- webnoob

---

这似乎是有效的，除非使用Webpack别名。我将@作为我的src文件夹的别名，但即使在Webstorm中指向了我的配置文件，它仍无法正确解析我的导入。然而，一旦我将src文件夹标记为资源根目录，它就按预期工作了。如果Webstorm能处理别名就更好了，但也没关系。 - dericcain

你是否在使用类似这样的别名符号：'@': '../src'。另外，你是在使用一个文件来配置webpack，还是多个文件？想知道有什么不同之处。谢谢！ - dericcain

我的一个例子是'@': path.resolve(__dirname, '../src/components')。我使用多个文件，包括 webpack.base.conf.js 以及其对应的 dev 和 prod 版本。它们又调用了一个名为 index.js、dev.env.js 和 prod.env.js 的配置文件夹。我将 Webstorm 设置为查看 webpack.dev.conf.js 文件。 - webnoob

我的设置非常相似（vue-webpack-pwa），将其指向.dev.conf就解决了问题。指向.base.conf是不起作用的。好主意！ - dericcain

我认为这可能需要打开一个问题。我确认它可以工作，但经常会遇到打开它时所有的webpack别名都无法解析的情况。我会执行“无效缓存并重新启动”，然后它就可以按照广告中的方式工作了。 - willredington315

使用开发Webpack配置对我很有帮助。谢谢！ - Kevin Bruccoleri

Answer 6

在项目根目录下添加 jsconfig.js

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

- keating

---

在重启WebStorm后，这对我起作用了。对于不使用webpack的人来说，这是一个很好的选择，因此没有webpack配置与别名。使用typescript的人将在tsconfig.json文件中具有相同的设置，但您仍需要jsconfig.json才能使别名在.js和.jsx文件中正常工作。 - Aaron Solberg

Answer 7

目前不行，我们在React项目中使用了路径别名。虽然导入名称更短，但我们失去了WebStorm静态检查和代码补全等很多功能。

后来我们决定将代码深度减少到仅有3级，公共部分只有一个级别。WebStorm的路径自动补全功能(ctrl + space) 甚至有助于减少输入工作量。而且生产环境构建不会使用较长的名称，因此在最终代码中几乎没有任何区别。

我建议重新考虑关于路径别名的决定。你会失去来自node_modules和你自己的代码模块的语义含义，并且反复引用别名文件以理解你的代码，这是一个更大的负担。

- sandeep

---

这是更好的答案。相对路径令人讨厌，但路径别名的便利性不值得失去有用的IDE功能。 - thewoolleyman

Answer 8

在PHPStorm中（目前使用的是2017.2版本），我无法正确地使用webpack配置文件来处理别名。我的解决方法涉及到主设置中的“Directories”部分。我只需要将每个由别名引用的文件夹标记为源根，然后单击每个文件夹的属性下拉列表，并将别名指定为“Package prefix”。这样就可以让所有内容都连接起来了。不确定WebStorm是否有“Directories”部分，但如果有的话，这似乎是一种行之有效的方法来使导入别名正常工作。

- Gordon Forsythe

Answer 9

对于那些遇到问题的人：为了让Idea（Websorm）能够正确解析路径，必须首先使用“__dirname”作为第一个参数调用path.resolve()。

这将适用于Idea（Websorm）：

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

以下内容不适用于Idea（Webstorm）（虽然它仍然是有效的webpack别名）：

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

- Kshatra

---

你如何让Webstorm正确识别@someAlias？ - Dave Johansen

你在哪个文件中定义了别名？是哪个文件？ - Daniel

Answer 10

这里有很多关于Laravel Mix的讨论，为了帮助未来的读者，我将提供以下信息。我通过创建一个单独的（虚假的）webpack配置文件来解决这个问题，该文件仅由我的IDE(PHPStorm)使用。

1. 创建一个单独的alias.js文件(例如/webpack/alias.js)

const path = require('path');

const assets = path.join(__dirname,'..','resources','assets');

module.exports = {
    '@js'        : path.resolve(assets, 'js'),
    '@c'         : path.resolve(assets, 'js', 'components'),    
    '@errors'    : path.resolve(assets, 'js', 'errors'),
    '@utils'     : path.resolve(assets, 'js', 'utils'),
    '@store'     : path.resolve(assets, 'js', 'store'),
    '@api'       : path.resolve(assets, 'js', 'api'),
    '@less'      : path.resolve(assets, 'less')
}

2. 把alias.js文件引入到webpack.mix.js中

const mix  = require('laravel-mix');

mix.alias(require('./webpack/alias'))
   // ... The rest of your mix, e.g.
   .js('app.js')
   .vue()
   .less('app.less');

3. 为你的IDE创建虚假的webpack配置文件(例如/webpack/ide.config.js)

在这里，导入laravel-mix webpack配置文件，以及你的别名和任何其他配置，帮助IDE找到需要的内容。同时，包括前缀为~的别名，用于将样式导入Vue组件。

/*
 |--------------------------------------------------------------------------
 | A fake config file for PhpStorm to enable aliases
 |--------------------------------------------------------------------------
 |
 |   File > Settings... > Languages & Frameworks > Javascript > Webpack
 |
 |   Select "Manually" and set the configuration file to this
 |
*/
const path = require('path');
const mixConfig = require('./../node_modules/laravel-mix/setup/webpack.config')();

module.exports = {
    ...mixConfig,
    resolve: {
        alias: {
            ...require('./alias'),
            '~@less' : path.resolve('@less'), // <-- 
        },
        ...mixConfig.resolve
    }
}

4. 将你的IDE设置为使用webpack/ide.config.js作为你的Webpack配置文件。

- Erin

---

喜欢你的完美主义。我会完全一样地做（不是开玩笑的）。 - D.R.