JS ES6新增之Module | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第14天

Module

ES在语言标准的层面上实现了模块的功能. 模块不是对象,踏实通过export显式指定输出的代码,并且再通过import命令输入. ES6的模块自动采用严格模式,因此尤其需要注意this的限制,因此不应该在顶层代码中使用this.

export命令

如果你希望外部能够读取模块里的变量,就必须用export输出这个变量,export还可以输出函数和类,在输出的时候可以用as来重命名.

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

import命令

在使用export之后,我们可以在其他JS文件中使用import来加载这个模块. 如果想要给模块重新取一个名字,就要用as关键字.

import { lastName as surname } from './profile.js';

如果想要整体加载一个模块,就用星号 * 指定一个对象:

import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

export default 命令

export default命令可以让模块指定默认输出,其他模块加载该模块的时候,import命令可以为该匿名函数指定任意名字,这时候import命令后面不使用大括号.

import()

ES2020提案引入了import()函数,支持动态加载模块. 它返回一个Promise对象. 它能够实现按需加载,条件加载以及动态的模块路径.

Module的加载

浏览器加载ES6模块,也使用script标签,但是要加入type="module"属性.浏览器对于带有type="module"的script,都是异步加载,不会造成浏览器的堵塞.如果有多个module标签,则会按照他们的界面出现顺序依次执行.

Node.js的加载方法

JavaScript 现在有两种模块。一种是 ES6 模块，简称 ESM；另一种是 CommonJS 模块，简称 CJS。

CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。语法上面，两者最明显的差异是，CommonJS 模块使用require()和module.exports，ES6 模块使用import和export。

Node.js要求ES6模块必须采用mjs的后缀名,如果不希望使用mjs,则可以在项目文件的package.json中,指定type为module.

package.json的main字段可以指定模块加载的入口文件:

{
  "type": "module",
  "main": "./src/index.js"
}