ChelesteWang / FE-Review

前端知识复盘与整理
Apache License 2.0
33 stars 8 forks source link

Nodejs 模块引入 #29

Open ChelesteWang opened 3 years ago

ChelesteWang commented 3 years ago

import * as xxx 与 import xxx

name参数是“导入模块对象”的名称,它将用一种名称空间来引用导入模块的接口。export参数指定单个的命名导出,而import * as name语法导入所有导出接口,即导入模块整体。以下示例阐明该语法。

导入整个模块的内容 这将myModule插入当前作用域,其中包含来自位于/modules/my-module.js文件中导出的所有接口。

import * as myModule from '/modules/my-module.js';

在这里,访问导出接口意味着使用模块名称(在本例为“myModule”)作为命名空间。例如,如果上面导入的模块包含一个接口doAllTheAmazingThings(),你可以这样调用:

myModule.doAllTheAmazingThings();

ChelesteWang commented 3 years ago

动态import

标准用法的import导入的模块是静态的,会使所有被导入的模块,在加载时就被编译(无法做到按需编译,降低首页加载速度)。 有些场景中,你可能希望根据条件导入模块或者按需导入模块,这时你可以使用动态导入代替静态导入。下面的是你可能会需要动态导入的场景:

关键字import可以像调用函数一样来动态的导入模块。以这种方式调用,将返回一个 promise。

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

这种使用方式也支持 await 关键字。

let module = await import('/modules/my-module.js');