WebStorm에서 가져 오기를위한 경로 별칭

WebStorm에서 가져 오기를위한 경로 별칭

---

ES6 모듈 로딩을 위해 webpack 경로 별칭을 사용합니다.

예를 들어utils 같은 대신 별칭을 정의하면
import Foo from "../../../utils/foo"할 수 있습니다.
import Foo from "utils/foo"

문제는 일단 별칭을 사용하기 시작하면 WebStorm이 가져 오기 추적을 잃고 경고와 자동 완성이 남지 않는다는 것입니다.

WebStorm에 이러한 별칭을 사용하도록 지시하는 방법이 있습니까?

---

[사용되지 않는 답변입니다. WS2017.2부터 Webstorm은 Webpack 구성을 자동으로 구문 분석하고 적용합니다 (@anstarovoyt 주석 참조)]

네, 있습니다.

실제로 Webstorm은 Webpack 구성을 자동으로 구문 분석하고 적용 할 수 없지만 동일한 방식으로 별칭을 설정할 수 있습니다.

"utils" 의 상위 폴더 (예 : 예)를 리소스 루트 로 표시하기 만하면 됩니다 (오른쪽 클릭, 디렉토리를 / 리소스 루트로 표시).

우리는 다음 구조로 처리했습니다.

/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이 모든 코드를 올바르게 구문 분석하고 인덱싱하고 파일에 대한 링크, 자동 완성 등을 유지하면서 ...

---

다음과 같이 webpack 내에서 WebStorm 2017.2의 별칭을 설정했습니다.

---

기록을 위해 : 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의 구성에서 웹팩 구성 파일이 올바르게 지정되었는지 확인하십시오.

---

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.

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

Note: Most setups have a base config which then call a dev or prod version. In order for this to work properly, you need to tell webstorm to use the dev one.

---

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.

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.

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.

---

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

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.

---

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

Will work for Idea (Websorm):

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

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

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

---

Webstorm은 module.exports함수를 반환하는 경우 webpack.config를 읽을 수 없습니다 . 예를 들면

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

구성 파일을 확인하십시오. 이로 인해 문제가 발생할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/34943631/path-aliases-for-imports-in-webstorm