返回

评论

ES6 Module语法小结

2018-12-12 20:00

`export`

输出变量。

export const name = 'GzhiYi';
export const job = 'Frontend';

以上可简写（荐）：

const name = 'GzhiYi';
const job = 'Frontend';

export { name, job };

输出函数或者类class。

export function exportMe () {}
export class exportMeToo {}

关键字as重命名输出。

const name = 'GzhiYi';
const job = 'Frontend';

export {
   name as changeName,
   job as changeJob  
};

`import`

导入export输出的接口。

import { name, job } from 'filePath';
// import 进来的变量均是readOnly，也不建议改写引入的其它类型数据。

关键字as重命名输入。

import { name as changName } from 'filePath';

整体引入

// 假设demo.js文件有如下内容
function funA () {}
function funB () {}

export { funA, funB };

// 平常加载
import { funA, funB } from './demo';

// 整体引入
import * as allFun from './demo';
allFun.funA();
allFun.funB();

`export defalut` 指定默认输出

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

// 引入
import funName from 'demo'; 
// 不需要知道封装demo.js包含的函数名，import后无需接大括号，因为默认输出的只有一个。