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

Question 1

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

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

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

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

Question 2

네, 있습니다.

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

Question 3

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

Question 4

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

Question 5

사용자 지정 경로를 정의 할 수 있으므로 WebStorm / PhpStorm이 별칭을 이해할 수 있습니다. 그러나 별칭과 동일한 지 확인하십시오. 루트 디렉토리에 파일을 만들고 다음과 같이 이름을 지정합니다. webStorm.config.js(어떤 js파일 이든 괜찮습니다). 그런 다음 내부 경로를 구성하십시오.

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

WebStorm / PhpStorm은 System자체 모듈로 인식 하고이 파일을 구성으로 취급합니다.

Question 6

이것은 주석으로 답변되지만 사람들이 주석을 파고 정보 만 연결하는 것을 저장하기 위해 다음과 같습니다.

WS2017.2부터이 작업은 자동으로 수행됩니다 . 정보는 여기에 있습니다 .

이에 따라 웹 스톰은 webpack.config프로젝트의 루트에 포함 된 별칭을 자동으로 해결합니다 . 사용자 지정 구조가 있고 webpack.config루트 폴더에없는 경우 이동하여 Settings | Languages & Frameworks | JavaScript | Webpack필요한 구성으로 옵션을 설정합니다.

참고 : 대부분의 설정에는 또는 버전 base을 호출하는 구성이 있습니다. 이것이 제대로 작동하려면 webstorm에 dev one을 사용하도록 지시해야합니다 .devprod

Question 7

지금 말고 반응 프로젝트의 파일에 대한 경로 별칭도 사용했습니다. 가져 오기 이름은 더 짧았지만 웹 스톰의 정적 검사와 완성 기능에서 많은 것을 잃었습니다.

나중에 코드를 3 단계 수준으로 낮추고 공통 부분에 대해 단일 수준으로 낮추기로 결정했습니다. webstom의 경로 완성 기능은 (ctrl + space)입력 오버 헤드를 줄이는 데 도움이됩니다. 프로덕션 빌드는 더 긴 이름을 사용하지 않으므로 최종 코드에서 거의 차이가 없습니다.

별칭에 대한 귀하의 결정을 재고 해 주시기 바랍니다. node_modules 및 자신의 코드에서 오는 모듈의 의미 론적 의미를 풀고 코드를 이해하기 위해 별칭 파일을 반복해서 참조하는 것은 훨씬 더 큰 오버 헤드입니다.

Question 8

PHPStorm (현재 2017.2 사용)에서 별칭과 관련하여 웹팩 구성이 제대로 작동하도록 할 수 없었습니다.

내 수정은 기본 설정의 “디렉토리”섹션을 사용하는 것과 관련이 있습니다. 별칭이 참조하는 각 폴더를 소스 루트로 표시 한 다음 각각에 대한 속성 드롭 다운을 클릭하고 별칭을 “패키지 접두사”로 지정해야했습니다. 이로 인해 모든 것이 연결되었습니다.

디렉토리 섹션이 WebStorm에 있는지 확실하지 않지만, 존재한다면 가져 오기 별칭이 작동하도록하는 확실한 방법 인 것 같습니다.