JavaScript ES 모듈 사용

ES 모듈이 사양에 추가되면 JavaScript의 모듈은 더욱 간단해집니다.모듈은 파일에 따라 분리되어 비동기적으로 불러옵니다.내보내기는 export 키워드로 정의됩니다.값은 import 키워드로 가져올 수 있습니다.
단일 값을 가져오고 내보내는 기초 지식은 쉽게 파악하고 사용할 수 있지만, ES 모듈을 사용하여 가져오고 내보내는 데 필요한 방식으로 작업을 할 수 있는 다른 방법도 많다.본고에서, 나는 네가 모듈에서 내보내고 가져올 수 있는 모든 방법을 소개할 것이다.
기억해야 할 점은 내보내기와 정적 가져오기는 모듈의 가장 바깥쪽에서만 발생할 수 있다는 것이다.함수,if문장, 다른 블록에서 내보내거나 정적으로 가져올 수 없습니다.또한 동적 가져오기는 함수에서 완성할 수 있으며, 우리는 본고의 마지막 부분에서 그것을 토론할 것이다.
내보내기
기본 내보내기
각 모듈에는 기본 내보내기가 있으며 이는 모듈 내보내기의 주요 값을 나타냅니다.더 많은 내보내기 값이 있을 수 있지만 기본 내보내기 값은 모듈의 정의를 나타냅니다.하나의 모듈에 기본 내보내기만 있을 수 있습니다.

const fruitBasket = new FruitBasket()

export default fruitBasket

기본적으로 내보내기 전에 이 값을 정의해야 합니다.만약 내가 생각한다면, 나도 즉시 나의 값을 내보낼 수 있고, 그것을 변수에 분배하지 않을 수 있지만, 이렇게 하면 나는 내보내는 동시에 그것을 변수에 부여할 수 없다.
우리는 함수 성명과 클래스 성명을 기본적으로 내보낼 수 있으며, 변수에 먼저 분배할 필요가 없다.

export default function addToFruitBasket(fruit) {
 // ...
}

우리는 심지어 글꼴 값을 기본값으로 내보낼 수도 있다.

export default 123

이름 지정 내보내기
모든 변수 성명은 생성할 때 내보낼 수 있습니다. 이것은 내보내기 이름으로 변수 이름을 사용합니다.

export const fruitBasket = new FruitBasket()

우리는 또한 함수와 클래스의 성명을 즉시 내보낼 수 있다.

export function addToFruitBasket(fruit) {
 // ...
}
export class FruitBasket {
 // ...
}

만약 우리가 이미 정의된 변수를 내보내고 싶다면, 우리는 대괄호를 통해 변수 이름을 대상으로 포장할 수 있다.

const fruitBasket = new FruitBasket()

export { fruitBasket }

우리는 변수 이름과 다르게 하기 위해 as 키워드를 사용할 수도 있습니다.만약 필요하다면, 우리는 동시에 다른 변수를 내보낼 수 있다.

const fruitBasket = new FruitBasket()
class Apple {}

export { fruitBasket as basketOfFruit, Apple }

집선 내보내기
모듈에서 모듈을 가져와서 바로 이 값을 내보내는 경우도 종종 있습니다.예:

import fruitBasket from './fruitBasket.js'

export { fruitBasket }

많은 것을 가져오고 내보내야 할 때, 이것은 매우 번거로워질 수 있다.ES 모듈을 사용하면 여러 값을 동시에 가져오고 내보낼 수 있습니다.

export * from './fruitBasket.js'

이것은 ./fruitBasket.js 의 모든 이름 내보내기를 다시 포장해서 내보내지만, 모듈에 기본 내보내기 값이 하나만 있기 때문에 기본 내보내기 값을 내보내지 않습니다.만약 우리가 여러 개의 기본 내보내기 모듈을 가져오고 내보내려고 한다면, 어느 값이 내보내기 모듈의 기본 내보내기 값이 될까요?
우리는 다른 파일에서 기본 모듈을 내보내거나 다시 내보낼 때 기본 내보내기 이름을 지정할 수 있습니다.

export { default } from './fruitBasket.js'

//  

export { default as fruitBasket } from './fruitBasket.js'

우리도 모든 항목을 다시 내보내는 것이 아니라 다른 모듈에서 다른 항목을 선택적으로 내보낼 수 있다.이런 상황에서 우리도 대괄호를 사용한다.

export { fruitBasket as basketOfFruit, Apple } from './fruitBasket.js'

마지막으로, 우리는 as 키워드를 사용하여 전체 모듈을 하나의 단독 이름으로 묶어서 내보낼 수 있다.다음과 같은 파일이 있다고 가정합니다.

// fruits.js
export class Apple {}
export class Banana {}

이제 우리는 그것을 단독 내보내기 대상으로 포장할 수 있습니다. 이 대상은 모든 이름 내보내기와 기본 내보내기 대상을 포함합니다.

export * as fruits from './fruits.js'
// { Apple: class Apple, Banana: class Banana }

가져오기
기본 가져오기
기본값을 가져올 때, 이름을 지정해야 합니다.기본값인 이상 우리가 그것을 어떤 이름을 지어주는지는 중요하지 않다.

import fruitBasketList from './fruitBasket.js'

이름 내보내기와 기본 내보내기를 포함한 모든 내보내기를 동시에 가져올 수 있습니다.이것은 모든 내보내기를 하나의 대상에 넣고, 기본 내보내기는 "default"의 속성 이름을 부여합니다.

import * as fruitBasket from './fruitBasket.js'
// { default: fruitBasket }

이름 지정 가져오기
우리는 대괄호 포장으로 내보낸 이름을 가져와 내보낼 수 있습니다.

import { fruitBasket, Apple } from './fruitBasket.js'

가져올 때 as 키워드를 사용하여 가져오기 이름을 바꿀 수도 있습니다.

import {fruitBasket as basketOfFruit, Apple} from './fruitBasket.js'

같은 가져오기 문장에서 이름 내보내기와 기본 내보내기를 혼합할 수도 있습니다.기본적으로 내보낸 내용이 먼저 나열되고 괄호 안에 있는 명명된 내보내기 내용이 나열됩니다.

import fruitBasket, { Apple } from './fruitBasket.js'

부작용 가져오기
때때로 하나의 모듈이 내보내는 값이 없습니다. 우리는 이 모듈을 가져오기만 하면 즉시 실행할 수 있습니다.이러한 모듈을 가져올 때 파일에 내보내기 값을 나열할 필요가 없습니다.이것을'부작용 (side-effect)'이라고 합니다. 모듈의 코드를 직접 실행하고 내보내는 값을 제공하지 않습니다.

import './fruitBasket.js'

동적 가져오기
때때로 우리는 파일을 가져오기 전에 파일의 이름을 모른다.또는 코드를 절반까지 실행할 때 파일을 가져와야 합니다. 코드에 동적으로 가져온 모든 위치에서 모듈을 가져올 수 있습니다.'동적'이라고 하는 이유는 가져오는 경로가 확실하지 않을 수도 있고, 문자열 변수일 수도 있고, 문자열 표현식일 수도 있으며, 정적 가져오기처럼 문자열 문자열이어야 하기 때문이다.
ES 모듈은 비동기적이므로 모듈을 즉시 사용할 수 없습니다.우리는 그것이 불러오기를 기다려야만 그것에 대해 일을 할 수 있다.따라서 동적 가져오기는 해석 모듈의 Promise를 반환합니다.

async function createFruit(fruitName) {
 try {
  const FruitClass = await import(`./${fruitName}.js`)
 } catch {
  console.error('Error getting fruit class module:', fruitName)
 }
 return new FruitClass()
}

총결산
ES가 내보내는 내용은 변수 및 문자 양 등의 값일 수도 있고 클래스 및 함수의 선언일 수도 있습니다. 내보내기 방식에서 기본 내보내기, 이름 내보내기, 집합 내보내기로 나눌 수 있습니다.가져오기는 내보내기 방식에 따라 기본 가져오기, 이름 지정, 부작용 가져오기, 동적 가져오기로 나눌 수 있습니다.이름 내보내기와 가져오기는 as를 사용하여 별명을 지정할 수 있습니다.내보내기와 정적 가져오기는 반드시 파일의 가장 바깥쪽에 있어야 하며, 동적 가져오기는 코드의 함수에서 비동기적으로 완성할 수 있다.
다음은 JavaScript ES 모듈의 사용에 대한 상세한 내용입니다. JavaScript ES 모듈에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!