WebStorm中导入的路径别名

Question

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

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

问题在于，一旦我开始使用别名，WebStorm就会失去对导入的跟踪，而且我会留下警告并且没有自动完成。

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

Answer 1

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

是的，有。

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

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

我们刚刚设法使用以下结构：

/src
    /A
    /B
    /C

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

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

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

而不是

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

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

Answer 2

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

Answer 3

对于记录：在 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的配置中正确指出了webpack配置文件：设置＆gt;语言与框架＆gt; Javascript＆gt;的WebPack

Answer 4

现在不是，我们还在反应项目中为文件使用路径别名。导入名称较短，但我们在静态检查webstorm以及完成功能方面损失惨重。

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

我建议请重新考虑你对别名的决定。您放弃了来自node_modules和您自己的代码的模块的语义含义，以及反复引用别名文件以理解您的代码，这是一个更大的开销。

Answer 5

这在评论中得到了解答，但是为了节省人们挖掘评论并仅链接信息，这里是：

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

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

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

Answer 6

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

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

不确定WebStorm中是否存在“目录”部分，但如果确实如此，这似乎是一种使导入别名有效的万无一失的方法。

Answer 7

对于任何挣扎的人：必须使用＆＃34; __ dirname＆＃34;来调用path.resolve（）; Idea（Websorm）的第一个参数是能够正确解析路径。

适用于Idea（Websorm）：

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

对于Idea（Websorm）不起作用（虽然仍然是有效的webpack别名）：

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

Answer 8

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

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

Answer 9

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

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

检查您的配置文件，也许这可能是您的问题。

Answer 10

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

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

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