模块化开发-ES Modules 导入用法

1,193 阅读4分钟

对于 import 在使用上也有一些需要注意的点还有一些特殊的用法:

  • 第一点就是 import 在导入模块时 from 后面写的实际上是导入模块的路径,它是一个字符串在这个字符串当中必须要使用完整的文件名称,并且不能省略 .js 的扩展名,这里和在 CommonJS 里是有区别的。对于路径当中的 index.js 这部分在 CommonJS 当中也是可以省略掉的,通过载入目录的方式就是载入这个目录下 index, 但是通过实验发现在 ES Modules 原生的工作过程当中是不能载入 index 的,必须要手动的填写完整的路径。对于文件路径名称我们在后期去使用打包工具去打包我们的模块时,就可以省略扩展名也可以省略 index.js 这样一个默认文件的操作。如果导入的是一个相对路径,相对路径的 ./ 在 web 开发当中引用资源实际上是可以省略的。但是在 import 的时候 ./是不能省略掉的,如果省略掉的话就是以字母开头会造成 ES Modules 会认为加载第三方模块。所以说它必须要以 . 开头,这一点与 CommonJS 实际上是相同的。除了使用 ./ 这种相对路径,还可以使用 / 开头的决定路径也就是从网站根目录下开始往后去数。再者就是我们可以使用完整的 URL 去加载我们的模块。
  • 第二点就是如果说我们只是执行某个模块,而并不需要去提取这个模块当中的成员的话。我们就可以保持 import 后的 {} 为空 import {} from './module.js'。这样的话它就只会去执行这个模块,并不会去提取任何成员。这种方式还有一种简写的语法 import './module.js',这种特性在我们去导入一些不需要去外界控制的一些子功能模块是会非常有用。
  • 第三点就是如果说我们一个模块当中需要导出成员特别多,而且在导入时都会去用到它们这个时候就可以使用 import * from './module' 的方式,把这个模块当中所有导出的成员全部提取出来。提取出来过后需要通过 as 关键词将提取到的所有成员全部放到一个对象当中import * as mod from './module',这个导出成员都会作为这个对象的属性出现。
  • 第四点就是我们在使用导入模块的时候 import 关键词,可以理解成是一个导入模块的声明,它需要在开发阶段就明确我们需要导入的这个模块的路径。但是有的时候这个路径是我们在运行阶段我们才知道的,这种情况下就不能使用 import 关键词去 from 一个变量。有些时候我们需要在某些情况下当某些条件满足过后才去导入模块,在这种方式下也没有办法去使用 import 因为 import 关键词只能出现在最顶层,也就外侧的作用域并不能去嵌套在一些条件语句中。如果遇到上面两种情况就需要使用动态导入模块的机制了,ES Modules 中提供了一个全局的 import 函数专门用来动态导入模块。具体的用法就是通过 import 函数去传入我们需要去导入模块的路径 import('./module.js'),这个调用因为它是一个普通函数,在任何一个地方都可以去使用,而且这个函数返回的是一个 Promise 。因为模块的加载是一个异步过程,当模块加载完成过后会自动去执行 then 当中所指定的这样一个回调函数 import('./module').then(function(module){console.log(module)}),模块的对象可以通过参数去拿到。
  • 第五点如果我们在一个模块当中,同时导出了一些命名成员再导出了一个默认成员。
// module.js
var name = 'leo'
var age = 18
export default 'default'
export {name, age}
// app.js 方式 1
import {name, age, default as title} from './module.js'
console.log(name, age, title)
// app.js 方式 2
import title, {name, age} from './module.js'
console.log(name, age, title)