关于前端:ES6-exports的几种用法

ES6 模块只反对 动态导出，只能够在模块的最外层作用域应用export，不可在条件语句与函数作用域中应用。

这种形式次要用于导出多个函数或者变量, 明确晓得导出的变量名称。
应用：只须要在变量或函数后面加 export 关键字即可。
应用场景：比方 utils、tools、common 之类的工具类函数集，或者全站对立变量等。

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));
}


// index.js 应用形式 1
import {square, diag} from 'lib';
console.log(square(11)); // 121

// index.js 应用形式 2
import * as lib from 'lib';
console.log(lib.square(11)); // 121

简写格局，对立列出须要输入的变量，例如下面的 lib.js 能够改写成：

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

这种形式次要用于导出类文件或一个性能比拟繁多的函数文件；
应用：只须要在变量或函数后面加 export default 关键字即可。

一个模块最多只能有一个默认导出；
默认导出能够视为名字是 default 的模块输入变量；
默认导出前面能够是表达式，因为它只须要值。

export default 与 export 的次要区别：

不须要晓得导出的具体变量名；

导入【import】时不须要 {} 包裹；

导出一个函数：

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

// index.js
import myFunc from 'myFunc';
myFunc();

导出一个类：

// MyClass.js
class MyClass{constructor() {}}
export default MyClass;

// index.js
import MyClass from 'MyClass';

混合导出是 Named exports 和Default exports组合导出。

混合导出后，默认导入肯定放在命名导入后面；

// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {...}
export function* myGeneratorFunc() {...}
export default class MyClass {...}

// index.js【MyClass 必须在后面】import MyClass, {myValue, myFunc} from 'lib';

比方 lodash：

// lodash.js
export default function (obj) {...};
export function each(obj, iterator, context) {...}

// index.js
import _, {each} from 'lodash';

个别状况下，export 导出的变量名是原文件中的变量名，但也能够用 as 关键字来指定别名。这样做是为了简化或者语义化 export 的函数名。
同一个变量容许应用不同名字输入屡次

// lib.js
function getName() {...};
function setName() {...};

export {
  getName as get,
  getName as getUserName,
  setName as set
}

为了防止下层模块导入太多的模块，可能应用底层模块作为直达，间接导出另一个模块的内容。

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

// Header.js
export default Header
               
// Footer.js
export default Header

// lib.js
export * from 'myFunc';
export {default as Header} from './Header';
export {default as Footer} from './Footer'
export function each() {...};
 
// index.js
import myFunc, {Header, Footer, each} from 'lib';

Named exports (命名导出)

Default exports (默认导出)

Mixed exports (混合导出)

Re-exporting (别名导出)

Module Redirects (直达模块导出)