ECMAScript 모듈을 동적으로 가져오는 방법에 대한 간략한 설명

ECMAScript(ES2015 또는 ES라고도 함) 모듈은 JavaScript에서 응집력 있는 코드 블록을 구성하는 방법입니다.

ES 모듈 시스템은 두 부분으로 구성됩니다:

• import 모듈 - import { func } from './myModule'
import模块 - 使用 import { func } from './myModule'
• export模块-  使用 export const func = () => {}

import 模块是使用 import 语法导入依赖项的模块:

import { concat } from './concatModule';

concat('a', 'b'); // => 'ab'

而被导入的模块使用export语法从自身导出组件:

export const concat = (paramA, paramB) => paramA + paramB;

import { concat } from './concatModule'使用ES模块的方式是静态的：意味着模块之间的依赖关系在编译时就已经知道了。

虽然静态导入在大多数情况下是有效的，但有时我们想节省客户的带宽并有条件地加载模块。

为了实现这一点，我们可以用不同的方式使用 import(pathToModule) 语法对模块进行新的动态导入：作为一个函数。动态导入是ES2020开始的一个JavaScript语言特性。

1. 动态模块的导入

当import关键字用作函数而不是静态导入语法时:

const module = await import(pathToModule);

它返回一个promise ，并开始一个加载模块的异步任务。如果模块被成功加载，那么promise就会解析到模块的内容，否则，promise 就会被拒绝。

请注意，pathToModule可以是任何表达式，其值为表示导入模块路径的字符串。有效的值是普通的字符串字面意义（如./myModule）或有字符串的变量。

例如，我们在一个异步函数中加载一个模块。

async function loadMyModule() {
  const myModule = await import('./myModule');
  // ... use myModule
}

loadMyModule();

有趣的是，与静态导入相反，动态导入接受以模块路径求值的表达式

async function loadMyModule(pathToModule) {
  const myModule = await import(pathToModule);
  // ... use myModule
}

loadMyModule('./myModule');

现在，了解了如何加载模块后，我们来看看如何从导入的模块中提取组件。

2.导入组件

2.1 导入命名组件

考虑下面的模块：

// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;

这里导出了一个 concat 函数。

如果想动态导入namedConcat.js，并访问命名的导出concat，那么只需通解构的方式就行了：

async function loadMyModule() {
  const { concat } = await import('./namedConcat');
  concat('b', 'c'); // => 'bc'
}

loadMyModule();

2.2 默认导出

如果模块是默认导出的，我们可以使用default属性来访问。

还是上面的例子，我们将defaultConcat.js里面的concat函数默认导出:

// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;

在动态导入模块中,可以使用default属性来访问:

async function loadMyModule() {
  const { default: defaultImport } = await import('./defaultConcat');
  defaultImport('b', 'c'); // => 'bc'
}

loadMyModule();

注意，default在JavaScript中是一个关键字，所以它不能用作变量名。

2.3导入混合形式

如果模块里面既有默认导出也有命名导出，同样也是使用解构的方式来访问：

async function loadMyModule() {
  const { 
    default: defaultImport,
    namedExport1,
    namedExport2
  } = await import('./mixedExportModule');
  // ...
}

loadMyModule();

3.何时使用动态导入

建议在模块比较大的，或者要根据条件才导入的模块可以使用动态导入。

async function execBigModule(condition) {
  if (condition) {
    const { funcA } = await import('./bigModuleA');
    funcA();
  } else {
    const { funcB } = await import('./bigModuleB');
    funcB();
  }
}

execBigModule(true);

对于小模块(如前面例子中的namedConcat.js或defaultConcat.js)，只有几十行代码，使用动态导入在点杀鸡用牛刀感觉。

总结

当调用 import(pathToModule) 作为一个函数时，其参数表示一个模块的指定符（又称路径），那么就会动态加载该模块。

在这种情况下，module = await import(pathToModule)export 모듈 - <code>export const func =() => {}

import 사용 모듈은 import 구문은 종속 모듈을 가져옵니다: <p>rrreee</p> 가져온 모듈은 <code>export 구문을 사용하여 자체에서 구성 요소를 내보냅니다.

rrreee

import { concat } from './concatModule'ES 모듈을 사용하는 방법은 정적입니다. 이는 모듈 간의 종속성이 컴파일 타임에 이미 알려져 있음을 의미합니다.

대부분의 경우 정적 가져오기가 작동하지만 때로는 클라이언트의 대역폭을 절약하고 조건부로 모듈을 로드하고 싶을 때도 있습니다.

이를 달성하기 위해 import(pathToModule) 구문을 다른 방식, 즉 함수로 사용하여 모듈의 새로운 동적 가져오기를 만들 수 있습니다. 동적 가져오기는 ES2020부터 시작하는 JavaScript 언어 기능입니다.

1. 동적 모듈 가져오기

import 키워드를 함수로 사용하는 경우 대신 구문을 정적으로 가져올 때: 🎜rrreee🎜 promise를 반환하고 모듈을 로드하는 비동기 작업을 시작합니다. 모듈이 성공적으로 로드되면 promise는 모듈의 내용으로 확인되고, 그렇지 않으면 promise가 거부됩니다. 🎜🎜 pathToModule은 값이 가져온 모듈의 경로를 나타내는 문자열인 표현식일 수 있습니다. 유효한 값은 일반 문자열 리터럴(예: ./myModule) 또는 문자열이 포함된 변수입니다. 🎜🎜예를 들어 비동기 함수에서 모듈을 로드합니다. 🎜rrreee🎜흥미롭게도 정적 가져오기와 달리 동적 가져오기는 모듈 경로로 평가되는 표현식을 허용합니다🎜rrreee🎜이제 모듈을 로드하는 방법을 이해했으므로 가져온 모듈에서 구성 요소를 추출하는 방법을 살펴보겠습니다. 🎜🎜2. 구성 요소 가져오기🎜🎜2.1 명명된 구성 요소 가져오기🎜🎜다음 모듈을 고려하세요. 🎜rrreee🎜 concat 함수를 여기로 내보냅니다. 🎜🎜 namedConcat.js를 동적으로 가져오고 명명된 내보내기 concat에 액세스하려면 구조 분해를 사용하세요. 🎜rrreee🎜2.2 기본 내보내기 🎜🎜모듈이 기본적으로 내보내지면 default 속성을 ​​사용하여 액세스할 수 있습니다. 🎜🎜위의 예에서도 기본적으로 defaultConcat.js의 concat 함수를 내보냅니다. 🎜rrreee🎜동적 가져오기 모듈에서는 를 사용할 수 있습니다. default 속성에 접근하려면: 🎜rrreee🎜 참고로 default는 자바스크립트의 키워드이므로 변수 이름으로 사용할 수 없습니다. 🎜🎜2.3 혼합 형식 가져오기🎜🎜모듈에 기본 내보내기와 명명된 내보내기가 모두 있는 경우 구조 분해를 사용하여 액세스할 수도 있습니다: 🎜rrreee🎜3. 동적 가져오기를 사용하는 경우🎜🎜모듈이 상대적으로 크거나 기본적으로 모듈을 가져와야 하는 경우 동적 가져오기를 사용하는 것이 좋습니다. 조건에 따라. 🎜rrreee🎜 수십 줄의 코드만 있는 작은 모듈(예: 이전 예의 namedConcat.js 또는 defaultConcat.js)의 경우 동적 가져오기를 사용하는 것은 과도합니다. . 느끼다. 🎜🎜요약🎜🎜import(pathToModule)을 함수로 호출할 때 해당 매개변수는 A를 나타냅니다. 모듈 지정자(경로라고도 함)를 사용하면 모듈이 동적으로 로드됩니다. 🎜🎜이 경우 module =await import(pathToModule)는 가져온 모듈 구성 요소를 포함하는 객체로 확인되는 Promise를 반환합니다. 🎜🎜동적 가져오기는 Node.js(13.2 이상) 및 대부분의 최신 브라우저에서 지원됩니다. 🎜🎜🎜영어 원본 주소: https://dmitripavlutin.com/ecmascript-modules-dynamic-import/🎜🎜저자: Dmitri Pavlutin🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 ECMAScript 모듈을 동적으로 가져오는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!