Javascript 动态导入

我们在前面章节中介绍的导出和导入语句称为“静态”导入。语法非常简单且严格。

首先，我们不能动态生成 import 的任何参数。

模块路径必须是原始类型字符串，不能是函数调用，下面这样的 import 行不通：

import ... from getModuleName(); // Error, only from "string" is allowed

其次，我们无法根据条件或者在运行时导入：

if(...) {
  import ...; // Error, not allowed!
}

{
  import ...; // Error, we can't put import in any block
}

这是因为 import/export 旨在提供代码结构的主干。这是非常好的事儿，因为这样便于分析代码结构，可以收集模块，可以使用特殊工具将收集的模块打包到一个文件中，可以删除未使用的导出（“tree-shaken”）。这些只有在 import/export 结构简单且固定的情况下才能够实现。

但是，我们如何才能动态地按需导入模块呢？

import() 表达式

​import(module)​ 表达式加载模块并返回一个 promise，该 promise resolve 为一个包含其所有导出的模块对象。我们可以在代码中的任意位置调用这个表达式。

我们可以在代码中的任意位置动态地使用它。例如：

let modulePath = prompt("Which module to load?");

import(modulePath)
  .then(obj => <module object>)
  .catch(err => <loading error, e.g. if no such module>)

或者，如果在异步函数中，我们可以使用 let module = await import(modulePath)。

例如，如果我们有以下模块 say.js：

// 








		
← Javascript 导出和导入
			
Javascript Proxy 和 Reflect →
	





推荐文章

	

学电脑办公软件一定要参加培训班吗？本篇文章告诉你！

	

java语言的三大特性是什么？如何理解？

	

后端是做什么的？后端开发者需要具备哪些技能？

	

前端入门到工作要多久？结果可能颠覆你的认知！

	

Python开发网站好吗？为什么是个好选择？

	




推荐教程

	

D 编程 中文教程

	

Vant3 中文教程文章列表

	

Vant3 中文教程文章列表

	

ProvidePlugin

	

Webpack val-loader

	



最新教程

	

D 编程 中文教程

	

Vant3 中文教程文章列表

	

Vant3 中文教程文章列表

	

ProvidePlugin

	

Webpack val-loader