es6 export 与 import 的使用与理解

export 与import是es6中新增模块功能最主要的两个命令。我们要知道在es6中，实现了模块功能，而且相当简单，意在取代commonjs和AMD规范。成为一种模块化的通用解决方案。

其设计思想为尽量的静态化，我们可以理解为在加载之前就知道自己所需要依赖的是哪个文件，而非在运行的时候才知道依赖谁。es6的那模块不是对象，通过export输出指令，通过import输入。就目前来说 不用一些编译器的话 最新版的浏览器是不识别import这个关键字的

在es6模块中是自动采用严格模式的。具体条例我们可以参考阮一峰老师写的es6入门中的moule模块

最简单的使用：

我是在vue-cli脚手架中进行验证，因为其环境支持es6的语法

首先在src下面新建一个export文件夹 里面新建两个js 分别为a.js,b.js

a.js里面最简单的代码：

export var a = 'my name is xiaoming';

然后一定要在helloworld模板中import该js，这里的路径是我自己配置的一些模板，新建的vue-cli中应该是helloworld模板

import {a} from '../../export/a.js';

console.log(a)

from后面的路径要写对 然后不能写到app.vue或者main.js中因为是入口文件 里面import都是各种依赖包

其中{}是一定要有的

export多个文件

var a='my name is xiaoming',b='my name is xiaohong';

export {a,b}

import {a,b,} from '../../export/a.js';

console.log(a,b)

如果不想暴露变量的名称：使用as可以重命名关键字

var a='my name is xiaoming',b='my name is xiaohong';

export {a as x, b as y}

export default 的用法

export 之后加上default意指默认接口的意思，在一个文件里面默认的只能有一个 其区别就是{} 在export中 引入需要用{}来盛放

var a='my name is xiaoming'

export default a;

import a from '../../export/a.js';

要是多个变量

var a='my name is xiaoming',b='this is a bird';

export default {<br>　　a,b<br>};

在需要使用的js中

import anyoneword from '../../export/a.js'

console.log(anyoneword) //一个对象里面包含a,b两个变量。

总结 其中export和export default最大的区别就是export不限变量数 可以一直写，而export default 只输出一次 而且 export出的变量想要使用必须使用{}来盛放，而export default 不需要 只要import任意一个名字来接收对象即可。　

export default可以跟在非匿名函数之前，也可以跟在匿名函数之前，同时也可以是一个对象之前。

import

import '**' from 'vue'直接寻找的是依赖包里的文件

如果import '**' from './vue' 表示是同级文件下的js。