es6 module模块

原本说尝鲜使用下es6的import和export呢，结果以上来就遇到了问题了，发现以原来require的思惟(CommonJS)去使用es6的module了。

您能看出问题吗

首先要说的就是，下面的测试走不通报错，但您能看出问题在哪里吗，若是不能，也许须要继续读下去，真正了解下es6的module。

//controller/union.js
export async function transReqPage(ctx, next) {
    return await {'hello': 'world'};
}

//test-import.js
import unionController from '../controller/union';

unionController.transReqPage()
    .then(function(res) {
        console.log(res);
    })
    .catch(function(err) {
        console.log(err);
    });

错误信息

suntopo@suntopo-X550VX:~/Desktop/workspace/UionPay$ babel-node ./test-import.js
/home/suntopo/Desktop/workspace/UionPay/test-import.js:9
_union2.default.transReqPage().then(function (res) {
               ^

TypeError: Cannot read property 'transReqPage' of undefined
...

export

导出整体上分为两种: 命名导出，默认导出

命名导出

export { name1, name2, …, nameN };
export let name1 = …, name2 = …, …, nameN; // also var, const
export function name1(…) { … } // also class, function*

常见的就三种

function test() {console.log('test')}
export {test, test as test1}

export function test() {console.log('test');}

export var test = 'test';

常见的错误形式

var test = 'test';
export test

function test() {console.log('test');}
export test

究其缘由：export规定的是对外的接口，必须与内部变量创建一一对应关系，即既要有接口名，又要有变量名，接口名能够显示指定也能够隐式的指定，但无非就是上面说的几种形式，最明显的形式能够这样

export { a as b}

这里明确的指明的接口名b，同是也指明了一一对应的变量a，可是这种形式仍是有些繁琐尤为在接口名和变量名相同的时候，因而能够写成这样

export {a}

当变量a变得很简单的时候，这样写也可能会比较繁琐，因而乎又有了简写

export var a=1;

当咱们的模块也许只有一个接口的时候，或者说想要模块有一个默认的接口的时候，有能够再次简写--默认导出

默认导出

export default function() {console.log('test')}

实际上解释默认导出时，若是从用户使用import的角度来解释更加清楚，好比用户在使用模块的时候，她必须清楚模块接口的名字才能正确引用，可是这每每给用户带来很大的不便，好比说该模块就一个接口，或该模块有一个默认的接口，我就想拿来就用而已，因而才有了默认导出。

注：一个模块只能有一个默认导出

import

导入和导出老是相对的，既然导出有两种，那么导入也可能会有不一样。

import * asname from "module-name"; 
import { member } from "module-name"; 
import { member as alias } from "module-name"; 
import { member1 , member2 } from "module-name"; 
import { member1 , member2 as alias2 , [...] } from "module-name"; 

import defaultMember, { member [ , [...] ] } from "module-name"; 
import defaultMember, * as name from "module-name"; 
import defaultMember from "module-name"; 
import "module-name";

命名导入

在导出中咱们强调了两个关键字，接口名和变量名，对于导入而言咱们关心的只有接口名，只有知道接口名才能正确的调用该接口。

import接受一个对象，里面指定要从其余模块导入的接口名

import {test} from './test'

一样，也可给导入到该模块的接口重命名

import {test as test1} from './test'

可是当须要导入多个接口的时候，一个个写接口可能不现实，因此提供了导入整个模块全部接口的写法

import * as TEST from './test';

默认导入

能够导出默认选项，不管是一个对象，一个函数或一个 class。相对地， 也可使用 import 默认导出，不用{}, 不用变量名，不用as，导入的就是默认导出的几口

最简单版本，直接导入默认

import test from './test'

混合版

import test, * as test1 from './test';

注意： test1中并不包含test接口，各自独立的，尽管使用了*

那么问题处在哪里呢

首先看下我导出和导入的方式

export async function transReqPage

import unionController from '../controller/union';

咱们导入的方式其实是采用默认导入，可是导出却没有默认导出，因此报找不到方法咯。那么咱们该怎么修改呢？首先要看咱们的需求，若是咱们的模块仅仅只须要导出一个接口，那么在export后面加上default就OK了，可是一般状况下咱们须要导出多个接口，因此这里须要咱们修改下导入的方式，采用命名导入方式，例如其中一种导入全部的接口

import * as unionController from '../controller/union';

动态绑定

不一样于CommonJS的拷贝，es6的模块使用动态绑定，即导入是导出的一个引用，详细内容见es6模块加载的实质