<center>es6的导入导出

我们今天来讲讲es6的导入导出，es6的导入导出是什么呢？它有哪些方便之处呢？其实啊，现在的ES6自带了模块化，我们可以直接作用import和export在浏览器中导入和导出各个模块了， 一个js文件代表一个js模块；首先我们来具体了解了解es6模块化：

ES6的模块化的基本规则或特点：

1. 每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2. 每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3. 模块内部的变量或者函数可以通过export导出；
4. 一个模块可以导入别的模块
5. 使用export关键词导出对象。这个关键字可以无限次使用；
6. 使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块；
7. 支持模块的异步加载；
8. 为加载模块提供编程支持。

ES6模块主要有两个功能：export和import
export用于对外输出本模块变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量：
/Pb.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
`export function square(x) {

return x * x;

}`
//导出函数
`export function diag(x, y) {

return sqrt(square(x) + square(y));

}`

//main.js
import { square, diag } From '.Pb';
console.LOG(square(11)); // 121
console.log(diag(4, 3)); // 5

这个例子意思就是在lib.js文件中， 使用 export{接口} 导出接口， 大括号中的接口名字为上面定义的变量，直接在export的地方定义导出的函数，或者变量。

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import { lastName as surname } from '.Pb';

import命令具有提升效果，会提升到整个模块的头部，首先执行。
foo();
import { foo } from 'my_module';

还有一种导出方法： 默认导出
这种导出的方式不需要知道变量的名字， 相当于是匿名的， 直接把开发的接口给export；
如果一个js模块文件就只有一个功能， 那么就可以使用export default导出；

import实际都做了些什么？

ES6将模块加载过程的细节完全交由最终的实现来定义，模块执行的其它部分倒是在规范中有详细定义。当你通知JS引擎运行一个模块时，它一定会按照以下四个步骤执行下去：

1. 语法解析：阅读模块源代码，检查语法错误。
2. 加载：递归地加载所有被导入的模块。这也正是没被标准化的部分。
3. 连接：每遇到一个新加载的模块，为其创建作用域并将模块内声明的所有绑定填充到该作用域中，其中包括由其它模块导入的内容。
4. 如果你的代码中有import {cake} from "paleo"这样的语句，而此时“paleo”模块并没有导出任何“cake”，你就会触发一个错误。这实在是太糟糕了，你都快要运行模块中的代码了，都是cake惹的祸！
5. 运行时：最终，在每一个新加载的模块体内执行所有语句。此时，导入的过程就已经结束了，所以当执行到达有一行import声明的代码的时候……什么都没发生！

静态vs动态：论规则及破例之法

JavaScript作为一门动态语言已经得到了一个令人惊讶的静态模块系统。

1. 你只可以在模块的最外层作用域使用import和export，不可在条件语句中使用，也不能在函数作用域中使用import。
2. 所有导出的标识符一定要在源代码中明确地导出它们的名称，你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。
3. 模块对象被冻结了，所以你无法hack模块对象并为其添加polyfill风格的新特性。
4. 一个模块的所有依赖必须在模块代码运行前完全加载、解析并且及早连接，不存在一种通过import来按需懒加载的语法。
5. import模块产生的错误没有错误恢复机制。一个app可能囊括了上百个模块，一旦有一个模块无法加载或连接，所有的模块都不会运行，而且你不能在try/catch代码块中捕捉import的错误信息。（上面这些描述的本意是说：系统是静态的，webpack可在编译时为你检测那些错误。）
6. 不支持在模块加载依赖前运行其它代码的钩子，这也意味着无法控制模块的依赖加载过程。

现在我们用编辑器编写es6浏览器不支持，可以转译成es5再用node实现效果

VAR gulp=require("gulp");
var watch=require("gulp-watch");
var babel=require("gulp-babel");
gulp.task("babel",function(){
   gulp.src("./js/*.js")
   .piPE(babel({
       PResets:["es2015"]
   }))
   .pipe(gulp.dest("./dist/js"));
});
gulp.task("watch",function(){
gulp.watch("./js/*.js",["babel"]);
})