es6规范

在ES6中，我们可以使用 import 关键字引入模块，通过 export 关键字导出模块，功能较之于前几个方案更为强大，也是我们所推崇的，但是由于ES6目前无法在浏览器中执行，所以，我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。

// 使用方法

-npm install babel-cli browserify -g

-npm install babel-preset-es2015 --save-dev

CommonJS和AMD都是运行时加载。ES6在语言规格层面上实现了模块功能，是编译时加载，完全可以取代现有的CommonJS和AMD规范，可以成为浏览器和服务器通用的模块解决方案。

ES6模块使用——export

1）导出一个变量

export var name = 'pengpeng';

（2）导出一个函数

export function foo(x, y){}

3）常用导出方式（推荐）

// person.js
const name = 'dingman';
const age = '18';
const addr = '卡尔斯特森林';

export { firstName, lastName, year };

4）As用法

const s = 1;
export {
  s as t,
  s as m, 
}

可以利用as将模块输出多次

ES6模块使用——import

（1）一般用法

import { name, age } from './person.js';

（2）As用法

import { name as personName } from './person.js';

import命令具有提升效果，会提升到整个模块的头部，首先执行，如下也不会报错：

getName();

import { getName } from 'person_module';

（3）整体模块加载 *

//person.js
export name = 'xixi';
export age = 23;

//逐一加载
import { age, name } from './person.js';

//整体加载
import * as person from './person.js';
console.log(person.name);
console.log(person.age);

ES6模块使用——export default

其实export default，在项目里用的非常多，一般一个Vue组件或者React组件我们都是使用export default命令，需要注意的是使用export default命令时，import是不需要加{}的。而不使用export default时，import是必须加{}，示例如下：

//person.js
export function getName() {
 ...
}
//my_module
import {getName} from './person.js';

-----------------对比---------------------

//person.js
export default function getName(){
 ...
}
//my_module
import getName from './person.js';

export default其实是导出一个叫做default的变量，所以其后面不能跟变量声明语句。

//错误
export default var a = 1;

值得注意的是我们可以同时使用export 和export default

//person.js
export name = 'dingman';
export default function getName(){
  ...
}

//my_module
import getName, { name } from './person.js';

前面一直提到，CommonJS是运行时加载，ES6时编译时加载

*preset 预设，将es6转成es5的所有插件打包

1. 定义.baberc文件（路径同package.json）

    {"presets":["es2015"]}

2.1 // 分别module1.js

export function foo(){

    console.log("foo()");

}

export function bar(){

    console.log("bar()");

}

2.2  // 一起暴露module2.js

function foo(){

    console.log("foo()");

}     

function bar(){

    console.log("bar()");

}

export{foo,bar}

2.3  // 默认暴露，可以暴露任意数据类型

export default value ;

3. 定义main.js

import {foo,bar} from "./module1";

import {foo1,bar2} from "./module2";

4. 编译

将es6 —> es5

babel js/src -d js/bundle

// 浏览器端编译

browserify js/build/main.js -o js/dist/main.js