如何动态导入ECMAScript模块？

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及以上版本)和大多数现代浏览器都支持动态导入。

作者：Dmitri Pavlutin

译者：前端小智来源：dmitripavlutin原文：https://dmitripavlutin.com/ecmascript-modules-dynamic-import/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

文章名称：如何动态导入ECMAScript模块？
文章转载：http://www.shufengxianlan.com/qtweb/news6/352906.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容