WebStorm中导入的路径别名
Bog*_*n D 71 javascript webstorm webpack es6-module-loader
我使用webpack路径别名来加载ES6模块.
例如,如果我定义别名utils而不是类似的东西
import Foo from "../../../utils/foo",我可以这样做
import Foo from "utils/foo"
问题是,一旦我开始使用别名,WebStorm就会失去对导入的跟踪,并且我会留下警告并且没有自动完成.
有没有办法指示WebStorm使用这些别名？
Jal*_*lil 112
[弃用答案.从WS2017.2开始,Webstorm自动解析并应用Webpack配置(参见@anstarovoyt评论)]
就在这里.
实际上,Webstorm无法自动解析和应用Webpack配置,但您可以以相同的方式设置别名.
您只需将"utils" 的父文件夹(在您的示例中)标记为资源根(右键单击,将目录标记为/ resource root).
我们设法做了以下结构:
/src
/A
/B
/C
我们在Webpack中将AB和C文件夹声明为别名.在Webstorm中,我们将"src"标记为"Resource Root".
现在我们可以简单地导入:
import A/path/to/any/file.js
代替
import ../../../../../A/path/to/any/file.js
同时仍然让Webstorm正确解析和索引所有代码,链接到文件,自动完成等等......
- @Toosick看到这篇博文https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/ (6认同)
- 多个文件夹和多个webpack配置怎么样？对我来说不起作用可能是因为:"默认情况下,WebStorm将分析项目根目录中的webpack配置文件,但您可以在Preferences | Languages&Frameworks | JavaScript | Webpack"中选择另一个文件"https:// blog .jetbrains.com/webstorm/2017/06/webstorm-2017-2-EAP-172-2827 / (3认同)
- 当不直接从 Webstorm 构建时，这将有效地破坏事情 (2认同)
- 我曾在WebStorm 2016.2.3中尝试过，但是此解决方案不起作用。 (2认同)
- angular2 `import { Component } from '@angular/core'` 中的导入又如何，这也已解决。如何实现 `at` 以更清楚地表明路径是别名？ (2认同)
Tom*_*zyk 38
我设法在webpack中为WebStorm 2017.2设置别名,如下所示:
- 有用。该文件应包括 module.exports = {resolve: {alias: {'@utils': path.resolve(__dirname, '../utils/')}}}。此外，我必须重新启动 WebStorm 才能应用更改。 (2认同)
E. *_* Dn 31
您可以定义自定义路径，以便 WebStorm/PhpStorm 可以理解您的别名。但请确保它们与您的别名相同。在您的根目录中创建文件并像这样调用它：（webStorm.config.js任何js文件都可以）。然后在里面配置你的路径：
System.config({
"paths": {
"components/*": "./src/components/*",
"core/*": "./src/core/*",
...
}
});
WebStorm/PhpStorm 将识别System为它自己的模块并将此文件视为配置。
- 这确实有效！真的对我的 Rollup+Svelte 项目很有帮助！ (2认同)
- 谢谢。有用。问：您知道该文件可用的完整选项的任何文档吗？ (2认同)
小智 22
为了记录:在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
- 请考虑那些在项目中实际没有使用 webpack 的用户的情况，并且希望设置这两个文件只是为了教 PHPStorm 如何解析别名。这些人不知道“...”中应该包含什么，才能使 webpack.mix.js 文件真正用于此目的。具体来说，如果我只是删除“...”，IDE 会报告“mix”符号无法解析，这强烈暗示它实际上不起作用。有缺失但极其重要的行，其中“混合”符号以某种方式需要/导入。请将这些添加到您的答案中。 (2认同)
这是在评论中回答的，但为了避免人们只关注评论并仅链接信息，这里是：
从WS2017.2开始，这将自动完成。信息在这里。
据此，webstorm将自动解析webpack.config项目根目录中包含的别名。如果您具有自定义结构，但您webpack.config不在根目录中，请转到Settings | Languages & Frameworks | JavaScript | Webpack并将选项设置为所需的配置。
注意：大多数设置都有一个base配置，该配置然后调用dev或prod版本。为了使其正常工作，您需要告诉webstorm使用dev one。
- 我的一个示例是“ @”：path.resolve（__ dirname，'../ src / components'）`。我使用了多个文件，即webpack.base.conf.js，然后是dev和prod版本。他们依次调用带有index.js，dev.env.js和prod.env.js的配置文件夹。我将Webstorm指向`webpack.dev.conf.js`文件。 (3认同)
- 除非使用Webpack别名，否则这似乎可行。我使用@作为我的src文件夹的别名，但是即使将Webstorm指向我的配置，它仍然无法正确解析我的导入。但是，一旦我将src文件夹标记为Resource Root，它就会按预期工作。如果Webstorm可以处理别名，那没什么大不了的。 (2认同)
- 我的设置非常相似（vue-webpack-pwa），将其指向`.dev.conf`可以解决问题。指向`.base.conf`无效。好决定！ (2认同)
小智 7
添加jsconfig.js到您的项目根目录
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
}
}
不是现在,我们还在反应项目中使用路径别名来处理文件.导入名称较短,但我们在webstorm的静态检查以及完成功能上丢失了很多.
我们后来决定将代码减少到只有3个深度级别,以及公共部分的单个级别.webstom的路径完成功能(ctrl + space)甚至有助于减少打字开销.生产版本不使用更长的名称,因此在最终代码中几乎没有任何区别.
我建议请重新考虑你对别名的决定.您放弃了来自node_modules和您自己的代码的模块的语义含义,以及反复引用别名文件以理解您的代码,这是一个更大的开销.