想知道es6的导入导出吗？来，我来告诉你~

<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"]);
})