ES6 Module语法小结

12/12/2018 前端

export

  1. 输出变量。
export const name = 'GzhiYi';
export const job = 'Frontend';

以上可简写(荐):

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

export { name, job };
  1. 输出函数或者类class
export function exportMe () {}
export class exportMeToo {}
  1. 关键字as重命名输出。
const name = 'GzhiYi';
const job = 'Frontend';

export {
   name as changeName,
   job as changeJob  
};

import

  1. 导入export输出的接口。
import { name, job } from 'filePath';
// import 进来的变量均是readOnly,也不建议改写引入的其它类型数据。
  1. 关键字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后无需接大括号,因为默认输出的只有一个。