기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

각 js 파일은 모듈이며 CommonJS 모듈 사양이 기본적으로 채택됩니다.

새로운 ES6 모듈 pk 기존 CommonJS 모듈

로딩 모드

• CommonJS는 동기식이므로 모듈이 로드될 때까지 코드 실행이 중지됩니다.
• ES6 모듈은 비동기식이므로 모듈이 나중에 로드되는 동안 코드가 계속 실행될 수 있습니다.

실행 모드

CommonJS 및 ES6 모듈의 실행은 싱글톤입니다. 모듈은 한 번만 로드되며 모듈에 대한 모든 참조는 동일한 인스턴스를 가리킵니다.

종속성

• CommonJS는 정적이며 모듈 종속성은 컴파일 타임에 결정됩니다.
• ES6 모듈은 동적이며 모듈 종속성은 런타임에 결정됩니다.

흔들리는 나무 모양

JavaScript 번들에서 사용되지 않는 코드를 제거하기 위한 최적화 기술입니다.

• CommonJS는 트리 쉐이킹을 지원하지 않으며, 모듈에서 사용되지 않는 코드도 로드됩니다.
• ES6 모듈성은 패키지 크기를 줄이기 위해 사용되지 않는 코드를 자동으로 제거하는 트리 쉐이킹을 지원합니다.

ES6 모듈을 활성화하는 세 가지 방법

1. package.json 파일에 설정 "type": "module", Node.js는 모든 .js 파일을 ES6 모듈로 처리합니다.
2. 파일 확장자를 다음으로 변경하세요. .mjs, Node.js가 자동으로 ES6 모듈로 처리하도록 합니다.
3. 스크립트 태그에 추가 type="module" 속성

ES6 모듈 구문

기본 내보내기 가져오기 내보내기 기본값

각 모듈에는 기본 내보내기가 하나만 있을 수 있습니다.

let a = 1
// 默认导出 a
export default a
1
2
3

// 导入默认时，可以命其他名称
import b from './demo.js'

console.log(b)
1
2
3
4

함수 표현식/익명 함수를 기본 내보내기로 직접 사용할 수 있습니다.

export default function myFunc() {}
1

export default function() {}。
1

다중 내보내기 { } 내보내기 및 가져오기

let a = 1
let b = 2

export { a, b }
1
2
3
4

// 导入多项时，必须与导出名对应
import { a, b } from './demo.js'

console.log(a, b)
1
2
3
4

내보낼 때 이름 바꾸기

let a = 1
let b = 2

export { a as c, b as d }
1
2
3
4

// 导入时，只能导入新的名称
import { c, d } from './demo.js'

console.log(c, d)
1
2
3
4

다른 모듈 사양 내보내기

export { name1, name2, ... } from 'module-name'
1

모듈 import로 내보낸 모든 것을 가져옵니다 *

export let a = 1;
export let b = 2;
1
2

// 通过 as 重命名为一个变量（值为对象）
import * as myModule from "./demo.mjs";

console.log(myModule.a);
console.log(myModule.b);
1
2
3
4
5

가져올 때 이름을 다음과 같이 바꿉니다.

import {trunc as StringLib} from "../lib/string.js"
import {trunc as MathLib} from "../lib/math.js"
1
2

json 형식으로 파일 가져오기

import pkg from "./package.json" assert { type: "json" };
1

const { default: jsonObject } = await import('./file.json', {
  assert: {
    type: 'json'
  }
});
1
2
3
4
5

CommonJS 모듈 가져오기

import * as 自定义名称  from '模块名称'
1

CommonJS 모듈 구문

• 각 모듈에는 내보내기 속성이 있는 모듈 개체가 있습니다(속성 값도 개체임).
• require()를 통해 import할 때, 내보낸 모듈에 있는 모듈 객체의 내보내기 속성을 가져옵니다.
• 동일한 모듈 내에서 서로 다른 콘텐츠를 내보내기 위해 내보내기와 module.exports를 혼합하지 마십시오. 이렇게 하면 혼란과 예측할 수 없는 동작이 발생할 수 있습니다.

단일 항목 모듈 내보내기 및 가져오기.exports

내보내다

module.exports = "朝阳";
1

수입

const demoModule = require("./demo.js");

console.log(demoModule); // 朝阳
1
2
3

여러 내보내기 내보내기 및 가져오기

내보내다

exports.a = 1;
exports.b = 2;
1
2

수입

const demoModule = require("./demo.js");

console.log(demoModule); // { a: 1, b: 2 }
1
2
3