MDN Refrence

import

1.导入整个模块的所有export,并用namspace globalOBj来表示这个模块名，后面的调用可以直接在这个对象上进行调用

import * as globalObj From './main/main.js'

2.导入单个模块名，必须使用花括号

import {foo} from './main/main.js'

3.从模块当中导入多个export到当前的作用域当中

import {foo, bar} from '/modules/my.js'

4.导入输出的模块时，可以重命名

import {
    foo1 as F1,
    foo2 as f2
} from './module.js'

5.默认值，默认值可以是一个对象，函数，类等

import default from './module.js'

6.同时导入默认值和输出的名字空间,默认值的导入必须首先声明

import my, * as myModule from '/module.js'

import myDefault, {foo, bar} from '/modules/my-module.js';

export

1. 命名空间的导出
2. 默认值的导出,不能使用var,let,const作为默认导出的值

 // 导出数据
 export let girl = 'mint'
 export const name = 'Moshi'
 export VAR order = 1

 //导出默认值
 export default onlyU = 'Mint'

// 导出函数
export function foo(){
    // do something
}

// 导出默认函数
export default function(){
    alert('Hello my girl')
}

// 导出的默认值可以被重命名为任何名字，在他被导入的时候
export default k = 12; // in test.js

import m from './test'

console.LOG(m) // 12

兼容性

在HTML中需要添加defer属性来使用模块化

 <script defer src="module.js"></script>