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

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

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

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

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

네, 있습니다.

실제로 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의 구성에서 웹팩 구성 파일이 올바르게 지정되었는지 확인하십시오.

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

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

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

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

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

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

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

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

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

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

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

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

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

어려움을 겪고있는 사람을 위해 : 경로를 올바르게 해석하려면 Idea (Websorm)의 첫 번째 인수로 path.resolve ()를 "__dirname"으로 호출해야합니다.

Idea (Websorm)에서 작동합니다.

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

Idea (Websorm)에서 작동하지 않습니다 (유효한 웹팩 별칭 인 동안) :

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

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

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

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

jsconfig.js프로젝트 루트에 추가

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