19、ES6中的import from和export

ES6自带了CMD规则的语句，但是语句不是require、exports、module几个词语，而是import from、export（没有s）。

所以，流程是：

1.我们创建一个app文件夹，放入main.js和a.js两个文件

\app\main.js：

import {sum , pingfang , sancifang} from "a.js";  //引包，并且自动解构

console.log(sum(3,4));

console.log(pingfang(3));

console.log(sancifang(3));

\app\a.js

let sum = (a,b) => {
	return a + b;
}

let pingfang = (a) => {
	return a * a;
}

let sancifang = (a) =>{
	return a * a * a;
}

export {sum , pingfang , sancifang }  //用export（没有s）暴露一个JSON，这个JSON是kv一致的，所以可以省略v

然后使用babel翻译整个文件夹

$ babel app --out-dir dist

2.如果我们只想暴露一个东西，比如一个类

app文件夹下：People.js:

class People{
	constructor(name){
		this.name = name;
	}

	haha(){
		console.log(`我是${this.name}我哈哈`);
	}
}
export default People;

2.main.js文件：

import People from "./People.js";
var xiaoming=new People("小明");
xiaoming.haha();

然后babel和上面一样

需要注意的是，ES6中的export完全和标准CMD规范的exports.** = ** 不一样！！

标准CMD中exports可以暴露很多东西，

exports.showIndex = function(){

}

exports.doPost = function(){

}

引入：

var mainCtrl = require("./controller/mainctrl.js");

mainCtrl.showIndex();

但是ES6中的export语法只能暴露一个东西，只能暴露JSON。如果只暴露一个别的东西（通常是构造函数）就要用export default。

export {sum , pingfang , sancifang};

React、Vue两个项目将使用import、export进行模块化开发书写，使用babel编译，然后用webpack构建。