WebStorm 中导入的路径别名

Question

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

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

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

有没有办法指示 WebStorm 使用此类别名？

Answer 1

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

我们后来决定将代码的深度减少到只有 3 层，公共部分也只有一层。 webstom (ctrl + space) 的路径完成功能甚至有助于减少输入开销。生产版本不使用更长的名称，因此对最终代码几乎没有影响。

我会建议您重新考虑您关于别名的决定。你失去了来自 node_modules 和你自己的代码的模块的语义，以及一次又一次地引用别名文件来理解你的代码，这是一个更大的开销。

Answer 2

是的，有。

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

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

我们刚刚设法处理了以下结构：

/src
    /A
    /B
    /C

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

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

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

而不是

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

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

Answer 3

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

我的修复涉及使用主要设置的 "Directories" 部分。我只需要将别名引用的每个文件夹标记为源根目录，然后单击每个文件夹的属性下拉列表并将别名指定为 "Package prefix"。这让一切 link 都适合我。

不确定 WebStorm 中是否存在目录部分，但如果存在，这似乎是一种让导入别名正常工作的简单方法。

Answer 4

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

Answer 5

这在评论中得到了回答，但为了避免人们深入研究评论和 link 只有信息，这里是：

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

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

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

Answer 6

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

适用于 Idea (Websorm)：

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

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

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

Answer 7

记录在案：在 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 配置文件：设置 > 语言和框架 > Javascript > Webpack

Answer 8

Webstorm 无法读取 webpack.config 如果 module.exports return 函数。例如

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

检查你的配置文件，可能是你的问题所在。

Answer 9

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

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

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

Answer 10

在您的项目根目录中添加 jsconfig.js

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

Answer 11

在使用 Jetstream 的新 Laravel 项目中遇到了同样的问题。 webpack.config.js 存在且正确。但是 PHPStorm 仍然没有将 @ 符号识别为资源根。

打开webpack配置后，收到通知：

单击 信任项目和运行 后，@ 符号被识别。

我知道这不是适合所有人的解决方案或用例。但我仍然觉得这个 post 值得一提，因为它对我的情况有所帮助。

正在使用

laravel/framework:8.77.1
npm:8.3.0
node:v14.18.1

Answer 12

这里有很多关于 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/ide.config.js）

创建假的 webpack 配置

在这里，导入 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 配置文件。

WebStorm 中导入的路径别名

Path aliases for imports in WebStorm

javascript

webstorm

webpack

es6-module-loader