export and import 一篇让你彻底立即ES6Model的语法。

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再 用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require 、Python 的 import ，甚至就连 CSS 都有 @import ，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。在这里插入代码片

上边都是一些历史，了解一下就好。下边直接罗列出不同的导入和导出方式。

export const name="value"
import {name} from "...'
以上是一个文件可以输出多个变量名称，引入时需要大括号

export default "value"
import Name from '...'
以上是默认输出，一个文件之中只能使用一次，如果还有输出可以看下变得结合款式

export const name='value'
export default 'value'

import  myname {name} from './...'

默认值和名称混合使用

以上是基础引入和导出的方式。

那么一个文件有多个导出和引入怎么办？
弄个列表一起导入导出呗

const name="value";
const name1="value2";
export {name,name2} 
import {name，name2} from "...'
console.log(name,name2)//"value","value2"

这里注意的是上边的列表不是对象。

最后一种重命名和全部导入导出。

这里使用到as关键字进行重命名

const name ='value'
export { name as myLiveName}

现在你文件引入就要换成myLiveName了，之前的名字就消失了

import { myLiveName } from './..';
console.log(myLiveName) //'value'

console.log(name)  //undefined
已经不能用了

重命名可以用到多项导入和导出
const name="value";
const name1="value2";
export { 
		 name,
		 name2 as myLiveName
} 
import { 
		 name as myLiveName2，
		 myLiveName
} from "...'
console.log(myLiveName2) //'value'
console.log(name2) //'value2'

console.log(name) //undefined
console.log(name2) //undefined

全部导入

import * as newName from './..'

现在就可以完全使用newName了
console.log(newName.name) //'value'
console.log(newName.myLiveName)  //'value2

注意如果文件中含有一个默认导出
export default 'value3'
console.log(newName.default)  //'value3'

本文阐述ES6导入和导出方式，如有不足敬请谅解！有学到的同学留下你的赞吧！谢谢！