ES Modules

ES Modules特性

1、ESM自动采用严格模式，忽略'use strict'

2、每个ES Module 都是运行在单独的私有作用域

3、ESM是通过CORE的方式请求外部JS模块的

4、ESM的script标签会延迟执行脚本

ES Modules导入与导出

export模块内向模块外暴露接口

export var name = 'xiaoFang';

import模块将外面的模块引入进来

import { name } from './module.js';
console.log(name);

一次导出多个

var name = 'xiaoFang';
function hello() {
    console.log('hello');
}
class Person{}
export{ name, hello, Person}

通过as重命名成员

var name = 'xiaoFang';
function hello() {
    console.log('hello');
}
class Person{}
export{
    name as fooName
}

那么导入name时需要导入重命名后的name

import { fooName } from './module.js';
console.log(fooName);

导出成员含有default，属于默认导出成员，那么导入的时候需要重命名该成员

export{
    name as default
}
----------------------------------------
import { default as fooName } from './module.js';
console.log(fooName+'----');

ESM导入

相对路径

import { fooName } from './module.js';import { default as fooName } from './module.js';

绝对路径

import { fooName } from '/module.js';

完整的URL

import { fooName } from 'http://localhost:3000/module.js';

加载模块，不提取成员

import '/module.js'

提取所有成员，并放在mod对象中

import * as mod from '/module.js';

满足条件导入，动态导入模块

import('./module.js').then(function(module){
    console.log(module);
})

导入默认成员和命名成员

//import后紧跟的是默认成员
import title, {name,age} from './module.js';
console.log(name,age,title);