export和export default

import 和export 是ES6的两大模块

export 用法

//demo.js
export var num= 123；

//index.js
import {num} from 'demo.js';
//或者
import {num as aa} from 'demo.js';

export default 用法

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字

//demo.js
var num = 123;
export default num;
//错误写法
export default var num = 123;
//因为export default num 的意思是把变量num的值赋值给变量default;
//所以不能写成export default var num = 123;

//index.js
import num from 'demo.js';
//或者
import aa from 'demo.js';
//注意不能加 {}

export与export default混合用法

//demo.js
var num = 123;
export var age = 18;
export var name = 'tom';
export default num;

//index.js
import AA, {age,name} from './demo.js';
console.log(AA,age,name);
// AA就是demo.js中默认导出的num
//在一个模块中export default 只能使用一次，export可以多次

import * as的用法

//demo.js
var num = 123;
export var age = 18;
export var name = 'tom';
export default num;

//index.js
import * as some from './demo.js';
console.log(some);
//{
//age: 18
//default: 123
//name: "tom"
//}

小总结：

export aa,在import的时候需要 import { aa } from 'aa.js';
export default aa,import的时候不要{}，可以重命名 import bb from 'aa.js';
另外：
import xx from 'xx.js' 是编译阶段执行，是静态执行，不是运行时候执行；
所以下面这种写法是不行的

import {'f'+'oo'} from 'index.js'  //不可行

不过新的ES2020提案中提供了import()，类似于Node的require()
不过import()是异步加载，require()是同步加载
另外，写例子的时候，需要在script标签上加上type='module'
并且需要起个本地服务，通过localhost:8000这种方式去访问(如果直接访问本地文件会报跨域)