[번역] 웹팩, Jest, VScode를 위한 모듈 import 앨리어싱 해결하기

어떤 프로젝트라도 규모가 커져감에 따라 코드가 복잡해지기 시작하면, 컴포넌트가 파일의 위아래로 종횡무진하며 모듈을 import하고 있는 것을 발견하게 될 겁니다. 앨리어싱 설정을 통해 문제를 쉽게 만드는 방법이 있습니다. 앨리어싱 개념이 익숙하지 않나요? 아래의 코드를 바꾸는 겁니다.

import React from 'react'
import { connect } from 'react-redux'
import { someConstant } from './../../config/constants'
import MyComponent from './../../../components/MyComponent'
import { myActionCreator } from './../../../ducks/someReducer'

이렇게요.

import React from 'react'
import { connect } from 'react-redux'
import { someConstant } from 'Config/constants'
import MyComponent from 'Components/MyComponent'
import { myActionCreator } from 'Ducks/someReducer'

이 포스트에선 앱 구조를 다음과 같다고 가정해봅시다.

MyApp/
  dist/
  src/
    config/
    components/
    ducks/
    shared/
  jsconfig.json
  package.json
  webpack.config.js

Webpack

웹팩은 부가적인 플러그인없이 resolve.alias 프로퍼티에 모듈 import 앨리어싱 설정을 할 수 있습니다.

module.resolve = {
  alias: {
    Config: path.resolve(__dirname, "..", "src", "config"),
    Components: path.resolve(__dirname, "..", "src", "components"),
    Ducks: path.resolve(__dirname, "..", "src", "ducks"),
    Shared: path.resolve(__dirname, "..", "src", "shared"),
    App: path.join(__dirname, "..", "src")
  }
}

Complication 1: 웹팩에 앨리어스 설정이 되었지만 VS Code엔 설정되지 않아 Intellisense 같은 툴들이 정상 작동하지 않을겁니다.

VS Code

프로젝트 루트 폴더에 앨리어스 설정이 들어있는 jsconfig.json 파일을 추가해서 VS Code에 앨리어스 설정을 쉽게 해결할 수 있습니다. exclude 프로퍼티를 통해서 node_modules 나 복잡한 폴더(dist 같은)를 건너띄게하여 탐색이 느려지지 않도록 하세요.

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "Config/*": ["src/config/*"],
      "Components/*": ["src/components/*"],
      "Ducks/*": ["src/ducks/*"],
      "Shared/*": ["src/shared/*"],
      "App/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

Complication 2: VS Code가 이 경로들의 앨리어싱이 잘 작동하고 있는것은 좋지만 Jest에서 웹팩 설정과 jsconfig.json은 사용되지 않기 때문에 테스트 기능은 망가지게 될 겁니다.

Jest

package.json파일에 moduleNameMapper 프로퍼티를 사용해서 Jest 설정을 추가하세요.

"jest": {
  "moduleNameMapper": {
    "^Config(.*)$": "<rootDir>/src/config$1",
    "^Components(.*)$": "<rootDir>/src/components$1",
    "^Ducks(.*)$": "<rootDir>/src/ducks$1",
    "^Shared(.*)$": "<rootDir>/src/shared$1",
    "^App(.*)$": "<rootDir>/src$1"
}

Complication 3: 상위 경로(<rootDir>/src 같은)를 자식 경(<rootDir>/src/components)로 뒤에 배치하지 않으면 에러가 발생한다는 것을 잊으면 안됩니다. 이건 세 개의 설정 파일들을 다 해당하는 문제입니다. 저는 각각의 작동 방식을 정확하게는 모르지만 이 설정들에서 App을 먼저 정의한 문제가 있었습니다.

---

원문: Solve Module Import Aliasing for Webpack, Jest, and VSCode