ES6 모듈을 가져올 때 매개 변수를 전달하는 방법

ES6 가져 오기를위한 매개 변수

최근에 Javascript에서 ES6 모듈 시스템 가져 오기 문을 일반적인 방법 (상대 경로 또는 패키지 이름을 통해 로컬 모듈 만 가져 오기)뿐만 아니라 매개 변수를 사용하여 실제로 사용할 수 있는지 자문했습니다.

내 사용 사례는 다음과 같을 것입니다. 가져 오는 동안 일종의 매개 변수를 제공하여 가져온 모듈이 해당 매개 변수를 조건부 가져 오기 또는 특수 코드 처리를위한 플래그로 처리 할 수 있도록합니다.

결과적으로 그것은 완전히 가능합니다!

ES6 가져 오기는 URL 일뿐입니다.

코드를 살펴보기 전에 Node.js의 import 문은 사실상 URL에 불과하다는 점을 기억하는 것이 중요합니다. Node.js는 기본적으로 알고리즘을 사용하여 URL이 완전히 확인되었을 때 실제로 어떻게 보이는지 결정합니다. 예를 들어 가져 오기 지정자로 상대 경로 만 제공하는 경우 Node.js는 여전히이면에서 가져 오기를 위해 문자열을 절대 URL로 확인합니다.

가져 오기에 URL 쿼리 매개 변수 사용

가져 오기가 URL로 확인되기 때문에 가져 오기에서 URL 조각뿐만 아니라 공통 URL 검색 매개 변수를 사용할 수 있습니다.

먼저이 기능을 테스트하기 위해 ES6 모듈이 지원되는지 확인하십시오. 이를 위해서는 "type"필드를 "module"로 설정해야하는 package.json을 약간 변경해야합니다. Node.js 버전 12 이상을 사용해야합니다.

{
  "name": "es6-import-params",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

다음으로 간단한 데모를 위해 두 개의 최소 모듈을 정의하십시오.

//
// index.js
//

import {greet} from "./lib.js?name=Tom";

// This will print "Hello Tom".
greet();

//
// lib.js
//

// We're using Node's native 'URL'-module
// to transform the provided string into
// a usable representation.
//
// Note that 'import' here isn't part of
// an acutal import, but rather resolved
// to a global variable.
const url = new URL(import.meta.url);

// A simple greeter for demo purposes.
// We just access the map 'searchParams'
// from our usable 'url'-object and use
// a fallback if no params are provided.
export function greet() {
  console.log(`Hello ${url.searchParams.get("name") || "World"}`);
}

매개 변수가 다른 여러 가져 오기

Node.js 문서에 기록 된대로 각 가져 오기는 다른 모듈에서 더 빠른 후속 가져 오기를 위해 런타임에 캐시됩니다. 따라서 동일한 모듈에서 가져 오지만 매개 변수가 다른 가져 오기는 각각 개별적으로 캐시된다는 점을 아는 것이 중요합니다. 물론 일치하는 서명이있는 가져 오기는 여전히 캐시에서 읽습니다.

// 
// index.js
//

// A small adaptation for the index.js
// file, this time importing the same 
// module twice w/ different params. Each
// module gets cached twice, too.
import * as tomLib from "./lib.js?name=Tom";
import * as lukeLib from "./lib.js?name=Luke";

// 'Hello Tom'.
tomLib.greet();
// 'Hello Luke'.
lukeLib.greet();

// Still 'Hello Tom', as it's
// its own module.
tomLib.greet();

사용 사례

이 기사의 예제는 의도적으로 매우 짧지 만 아이디어를 얻었습니다. 요구 사항에 따라 가져 오기와 함께 쿼리 매개 변수를 사용하는 것은 각 모듈에 대한 "전역"변수를 설정하는 매우 우아한 옵션이 될 수 있습니다. 이렇게하면 동일한 목표를 달성하기 위해 getter 및 setter를 제공 할 필요가 없습니다.