Javascript WebStorm 中导入的路径别名

Path aliases for imports in WebStorm

提问by Bogdan D

I use webpack path aliases for ES6 module loading.

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

E.g.If I define an alias for utilsinstead of something like
import Foo from "../../../utils/foo", I can do
import Foo from "utils/foo"

例如，如果我定义了一个别名utils而不是类似的东西
import Foo from "../../../utils/foo"，我可以做
import Foo from "utils/foo"

The problem is that once I start using aliases, WebStorm looses track of the import and I'm left with warnings and no auto-completion.

问题是，一旦我开始使用别名，WebStorm 就会失去对导入的跟踪，我会收到警告并且没有自动完成功能。

Is there a way to instruct WebStorm to use such aliases?

有没有办法指示 WebStorm 使用这样的别名？

回答by Jalil

[Deprecated answer. Starting since WS2017.2 Webstorm automatically parses and applies Webpack config (see @anstarovoyt comment)]

[已弃用的答案。从 WS2017.2 Webstorm 开始自动解析和应用 Webpack 配置（见@anstarovoyt 评论）]

Yes, there is.

就在这里。

In fact, Webstorm can't automatically parse and apply Webpack config, but you can set up aliases the same way.

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

You just have to mark the parentfolder of "utils" (in your example) as a resource root(right-click, mark directory as / resource root).

你只需要标记父“utils的”（在你的例子）作为一个文件夹资源根（右击，标记目录/资源根）。

We just managed to do with the following structure :

我们只是设法使用以下结构：

/src
    /A
    /B
    /C

We have A B and C folders declared as alias in Webpack. And in Webstorm we marked "src" as "Resource Root".

我们在 Webpack 中将 AB 和 C 文件夹声明为别名。在 Webstorm 中，我们将“src”标记为“Resource Root”。

And now we can simply import :

现在我们可以简单地导入：

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

instead of

代替

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

while still having Webstorm correctly parsing and indexing all code, link to files, autocompleting and so on ...

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

回答by Tomasz Mularczyk

I managed to set up aliases for WebStorm 2017.2 within webpack like this:

我设法在 webpack 中为 WebStorm 2017.2 设置别名，如下所示：

回答by nachodd

For the record: in PHPSTORM, working with laravel mix, I managed to solve this by creating a webpack.config.js file separately like:

作为记录：在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')
    }
  },
  ...
}

And then importing it in the webpack.mix.js like:

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

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

Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack

确保在 PhpStorm 的配置中正确指向 webpack 配置文件：设置 > 语言和框架 > Javascript > Webpack

回答by E. Dn

You can define custom paths, so WebStorm/PhpStorm can understand your aliases. But make sure, they are identical with your aliases. Create file in your root directory and call it something like this: webStorm.config.js(any jsfile will be ok). Then configure your paths inside:

您可以定义自定义路径，以便 WebStorm/PhpStorm 可以理解您的别名。但请确保它们与您的别名相同。在您的根目录中创建文件并像这样调用它：（webStorm.config.js任何js文件都可以）。然后在里面配置你的路径：

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

WebStorm/PhpStorm will recognize Systemas it's own module and will treat this file as configuration.

WebStorm/PhpStorm 将识别System为它自己的模块并将此文件视为配置。

回答by webnoob

This is answered in a comment but to save people digging into comments and link only information, here it is:

这是在评论中回答的，但为了避免人们深入研究评论并仅链接信息，这里是：

As of WS2017.2 this will be done automatically. The information is here.

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

According to this, webstorm will automatically resolve aliases that are included within the webpack.configin the root of the project. If you have a custom structure and your webpack.configisn't in the root folder then go to Settings | Languages & Frameworks | JavaScript | Webpackand set the option to the config you require.

据此，webstorm 将自动解析包含在webpack.config项目根目录中的别名。如果您有自定义结构并且webpack.config不在根文件夹中，请转到Settings | Languages & Frameworks | JavaScript | Webpack并将选项设置为您需要的配置。

Note: Most setups have a baseconfig which then call a devor prodversion. In order for this to work properly, you need to tell webstorm to use the dev one.

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

回答by sandeep

Not right now, We were also using path aliases for the files in our react project. The import names were shorter but we lost a lot on static checking of webstorm as well as completion features.

不是现在，我们还为我们的 React 项目中的文件使用了路径别名。导入名称较短，但我们在 webstorm 的静态检查以及完成功能方面丢失了很多。

We later came up with a decision to reduce the code to only 3 levels of depth, as well a single level for the common parts. The path completion feature of webstom (ctrl + space)even helps reduce the typing overhead. The production build does not use longer names, so hardly makes any difference in final code.

我们后来决定将代码减少到只有 3 个深度级别，以及公共部分的一个级别。webstom 的路径补全功能(ctrl + space)甚至有助于减少打字开销。生产版本不使用更长的名称，因此最终代码几乎没有任何区别。

I will suggest please reconsider your decision about aliases. You loose semantic meaning of modules coming from node_modules and your own code, as well as referencing the alias files again and again to make sense of your code, is a much bigger overhead.

我建议请重新考虑您对别名的决定。来自 node_modules 和您自己的代码的模块的语义松散，以及一次又一次地引用别名文件以理解您的代码，是一个更大的开销。

回答by Gordon Forsythe

In PHPStorm (using 2017.2 currently), I have not been able to get webpack configs to work properly in regards to aliases.

在 PHPStorm（目前使用 2017.2）中，我无法让 webpack 配置在别名方面正常工作。

My fix involves using the "Directories" section of the main settings. I just had to mark each folder referenced by an alias as a sources root, then click the properties dropdown for each and specify the alias as a "Package prefix". This made everything link up for me.

我的修复涉及使用主要设置的“目录”部分。我只需要将别名引用的每个文件夹标记为源根目录，然后单击每个文件夹的属性下拉列表并将别名指定为“包前缀”。这让我的一切都联系起来了。

Not sure if the Directories section exists in WebStorm, but if it does, this seems to be a fool-proof method for getting import aliases working.

不确定 WebStorm 中是否存在 Directories 部分，但如果存在，这似乎是使导入别名工作的万无一失的方法。

回答by Kshatra

For anyone struggling: path.resolve() must be called with "__dirname" first argument for Idea (Websorm) to be able to resolve the path correctly.

对于任何挣扎的人：path.resolve() 必须使用“__dirname”第一个参数调用 Idea (Websorm) 才能正确解析路径。

Will work for Idea (Websorm):

将适用于 Idea (Websorm)：

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

Will not work for Idea (Websorm) (while still being valid webpack alias):

不适用于 Idea (Websorm)（同时仍然是有效的 webpack 别名）：

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

回答by Aleksey Mann

Webstorm can't read webpack.config if module.exportsreturn a function. For example

如果module.exports返回一个函数，Webstorm 将无法读取 webpack.config 。例如

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

Check your config file, maybe this cause you are a problem.

检查您的配置文件，也许这会导致您出现问题。