명명된 내보내기 가져오기 및 이름 바꾸기

JavaScript 모듈에는 가져올 때 명명된 내보내기를 유지하기 위한 구문이 있습니다.

import { exportedName as localName } from "…";

나는 이것을 "이름"과 "별명"으로 생각합니다. Michael Chan은 제 창작자들이 저에게 지어준 이름입니다.

import { michaelChan as chantastic } from "./michael-chan.mjs";

이것은 모듈 간의 이름 충돌을 피하기 위한 두 가지 도구 중 하나입니다.

충돌을 피하기 위해 명명된 내보내기의 이름을 바꿉니다 #

내 마지막 게시물Import Named Exports에서 string-utils 모듈에서 hype 및 chant 두 함수를 가져왔습니다.

import { hype, chant } from "./string-utils.mjs";

우리가 작업하고 있는 모듈에 이미 hype 기능이 있다면 어떻게 될까요? 우리가 붙어있어? 새 모듈을 고려하기 위해 코드를 리팩토링해야 합니까?

아니요!
as 키워드를 사용하여 명명된 내보내기의 이름을 로컬로 바꿉니다.

- import { hype, chant } from "./string-utils.mjs";+ import {+ hype as hypeText,+ chant+ } from "./string-utils.mjs";

as 를 사용하면 작업 중인 모듈을 완전히 제어할 수 있습니다.
모든 무료 로컬 식별자에 명명된 내보내기를 할당할 수 있습니다.

내 테이크 #

as 키워드는 이름 충돌을 피하거나 문맥상 더 정확한 이름을 사용하는 방법을 제공합니다. 이것은 코드베이스 및 더 큰 npm 생태계의 모듈로 작업하는 데 유용합니다.

그러나 이것이 모듈의 모든 내용을 단일 변수로 가져오는 것보다 덜 이상적인 형태의 충돌 회피라는 것을 알았습니다.

그러나 우리는 미래의 포스트에서 그것을 다룰 것입니다 😅.

프로로 이동 #

이것은 lunch.dev 의 모듈을 기반으로 하는 과정의 일부입니다.
라이브 상태일 때 회원은 이 강좌와 React의 다른 강좌에 액세스할 수 있습니다.

Join lunch.dev for videos