ES6中export平常的用法有两种

1. 定名导出（Named exports）
2. 默许导出（Default exports）

定名导出（Named exports）

就是每一个须要输出的数据类型都要有一个name，一致输入一定要带有{}，即使只要一个须要输出的数据类型。这类写法清新直观，是引荐的写法。

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}

export {sqrt, square, diag}

//------ main.js ------
import { square, diag } from 'lib';                
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

把export直接加到声明前面就能够省略{}

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';                
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

无论怎样输出，输入的时刻都须要{}。

别号导入（Aliasing named imports）

当从差别模块输入的变量名雷同的时刻

import {speak} from './cow.js'
import {speak} from './goat.js'    

这些写法显然会形成杂沓

准确的要领是如许的

import {speak as cowSpeak} from './cow.js'
import {speak as goatSpeak} from './goat.js'

然则，当从每一个模块须要输入的要领许多的时刻，这类写法就显得非常的烦琐、冗杂，比方

import {
  speak as cowSpeak,
  eat as cowEat,
  drink as cowDrink
} from './cow.js'

import {
  speak as goatSpeak,
  eat as goatEat,
  drink as goatDrink
} from './goat.js'

cowSpeak() // moo
cowEat() // cow eats
goatSpeak() // baa
goatDrink() // goat drinks

解决方案就是定名空间导入了

定名空间导入（Namespace imports）

import * as cow from './cow.js'
import * as goat from './goat.js'

cow.speak() // moo
goat.speak() // baa

非常的简约文雅

默许导出（Default exports）

默许输出就不须要name了，然则一个js文件中只能有一个export default。

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

实在这类导出体式格局能够看成是定名导出的变种，只不过把定名写成了default。

虽然export default只能有一个，但也能够输出多个要领。

export default {
  speak () {
    return 'moo'
  },
  eat () {
    return 'cow eats'
  },
  drink () {
    return 'cow drinks'
  }
}

输入与定名空间输入相似

import cow from './default-cow.js'
import goat from './default-goat.js'

cow.speak() // moo
goat.speak() // baa

假如我们在编写模块的时刻运用的输出要领不一致，那末引入的时刻就须要斟酌差别模块输入的体式格局。这类贫苦能够经由过程自援用的要领消弭。要领以下

编写两种输入体式格局通用的模块

import * as myself from './ambidextrous-cow.js' // import this file into itself

// this module's own namespace is its default export
export default myself

export function speak () {
  console.log('moo')
}

如许在输入的时刻就不须要斟酌输入体式格局了。

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow.speak() // moo
alsocow.speak() // moo

两种输入要领都可。

这类要领也有一个小瑕玷，就是在我们编写的模块中，有一个function是经常使用的，我们想默许输出，可export default已运用了，而我们晓得export default在一个模块中只能运用一次。这时候就要运用Object.assign

import * as myself from './ambidextrous-cow.js' 

export default Object.assign(speak, myself) 

export function speak () {
  console.log('moo')
}

须要注重的是，Object.assign只能用于function。

对应输入的例子

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow() // moo
cow.speak() // moo
alsocow.speak() // moo

参考文章

1.[es6] import, export, default cheatsheet

2.详解JavaScript ES6中export import与export default的用法和区分

3.ES Modules: Using named exports as the default export

4.export in MDN

我在github
https://github.com/zhuanyongx…