关于前端:如何动态导入ECMAScript模块

作者：Dmitri Pavlutin
译者：前端小智
起源：dmitripavlutin

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

ECMAScript(又名 ES2015 或 ES)模块是在 JavaScript 中组织内聚代码块的一种办法。

ES 模块零碎有 2 个局部：

• 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) 返回一个 promise，该承诺解析为一个蕴含导入模块组件的对象。

Node.js（13.2 及以上版本）和大多数古代浏览器都反对动静导入。

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://dmitripavlutin.com/ec…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。