Node.js 가져오기 별칭

Originally published on abhijithota.me

문제

종종 Node.js 코드베이스가 커짐에 따라 다음과 같은 일이 발생합니다.

import { UserModel } from "../../../../db/models/index.js";
import { validate } from "../../../../lib/utils.js";
import { SERVICE_API_KEY } from "../../../../lib/constants.js";

여기에는 몇 가지 문제가 있습니다.

폴더 구조 변경에 대한 민감도: 우수한 IDE 또는 편집기는 자동으로 가져올 수 있지만 모두 오류가 없는 것은 아닙니다. 또한 일반 IDE 외부에서 무언가를 변경하면 어떻게 됩니까?

잡동사니: 보기에 좋지 않습니다

.

해결책

package.json라는 imports의 새 필드가 Node.js v14에서 안정화되었습니다. Node.js v12에서 이전에 도입되었습니다. 특정 규칙을 따르고 특정 별칭(사용자 지정 경로)을 선택한 경로에 "매핑"하고 폴백을 선언할 수 있습니다.

Here's the documentation 동일합니다.
package.json에 다음을 추가하여 예제 문제를 해결할 수 있습니다.

"imports": {
  "#models": "./src/db/models/index.js",
  "#utils": "./src/lib/utils.js",
  "#constants": "./src/lib/constants.js"
}

다음과 같이 코드에서 사용하십시오.

import { UserModel } from "#models";
import { Validate } from "#utils";
import { SERVICE_API_KEY } from "#constants";

메모

imports의 package.json 필드에 있는 항목은 #와 같은 패키지 지정자와 명확하게 구분되도록 @로 시작하는 문자열이어야 합니다.

값은 프로젝트 루트의 상대 경로여야 합니다. 루트는 귀하의 package.json가 있는 곳입니다.

위의 예에서 우리는 package.json가 루트에 있고 모든 관련 파일이 src 디렉토리 안에 있다고 가정했습니다.

응용 프로그램이 제대로 실행되는 것을 볼 수 있지만 선택한 IDE에 일부 오류가 표시될 수 있습니다. 바람직하지 않은 빨간색과 노란색 물결선은 아무도 좋아하지 않습니다. 또한 경로 별칭 대신 실제 상대 경로에서 자동으로 가져옵니다. 그건 재미 없어.
jsconfig.json 구조에. ( TypeScript 프로젝트에 있는 경우 tsconfig.json.)
jsconfig.json 에 다음을 추가합니다.

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "#models": ["./src/db/models/index.js"],
      "#utils": ["./src/lib/utils.js"],
      "#constants": ["./src/lib/constants.js"]
    }
}

The above configuration tells your IDE's LSP to look for code in the given prefixes. Refer to the documentation of the property to know more.

이제 원하는 위치에서 달콤한 자동 가져오기가 있습니다.

대체 종속성

documentation 에서 볼 수 있듯이 대체 패키지 또는 폴리필을 조건부로 설정하는 데 이 속성을 사용할 수도 있습니다. 문서에서:

// package.json
{
  "imports": {
    "#dep": {
      "node": "dep-node-native",
      "default": "./dep-polyfill.js"
    }
  },
  "dependencies": {
    "dep-node-native": "^1.0.0"
  }
}

[Here, if the] import #dep does not get the resolution of the external package dep-node-native (including its exports in turn), and instead gets the local file ./dep-polyfill.js relative to the package in other environments.

프런트엔드 프로젝트

프론트엔드 애플리케이션에서는 이 접근 방식을 시도하지 않았습니다. 그들은 일반적으로 별칭을 해결하는 자체 방법이 있는 Webpack 또는 Rollup과 같은 번들링 시스템을 사용합니다. 예를 들어 Vite(Rollup 및 ESBuild 사용)의 경우 다음을 vite.config.js에 추가해야 합니다.

import path from "path";

export default defineConfig({
//   Some other config
    resolve: {
        alias: {
            "#": path.resolve(__dirname, "./src"),
        },
    },
});

그리고 귀하의 jsconfig.json:

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

위의 구성은 #로 시작하는 모든 항목을 src 바로 아래의 폴더 및 파일에 매핑합니다. YMMV.

A designer knows he has arrived at perfection not when there is no longer anything to add but when there is no longer anything to take away

- Jon Bentley in Programming Pearls