ES6的模块功能

因为看到现在招聘要求都需要掌握一个MVC框架，并能够用其制作富应用。而之前又学过React(虽然它不是完整的MVC框架)，所以就来重新研究，并学习一下react-router，来完成一个SPA。
再看了别人的DEMO之后，发现别人的components里面有许多个文件。而之前的视频教程中只用了一个JS文件并且所有的react组件都写在一个JS文件里面。于是就想着模仿着把自检分开来写。全部像搭积木一样写在一个JS文件里真的很不方便阅读。

但是在用ES6的模块功能的时候发现问题了！import 的模块无法被利用！而且之前的一个问题也没有解决，原始文件中明明声明的class 的名称是AppComponent,但是写的时候确是：
import App from ‘./components/main’。
名称不对应。
在纠结了很久很久之后查了一下ES6模块化的使用方法，发现了问题所在。
export default命令可以指定模块的默认输出。一个模块只有一个默认的输出，这个命令只可以用一次！所以import命令后面才不需要跟大括号。相反其他的export输出可以有很多个，且 import的时候必须要跟大括号！

//a.js
function add(a,b){
       return a+b
}
export { add as default};
//等同于 export default add;
//app.js
import {default as XXX} from 'a'
//等同于 import xxx from 'a'

正是因为这个命令只输出了一个叫default的变量，所以后面不可以跟声明语句！
我们只能

export var a=1;
//或者var a=1;
//export default a;
//export {a}

再就是关于路径的问题了！
本新手就是在这里踩得坑。。。
如果import * as obj from ‘exports’
//那么node会试着去寻找node_modules中的exports模块
就算在同一个文件夹内，也要加上./才能引入正确的模块。不是用相对或绝对路径就会去依赖包文件夹里去找！
(上面通配符的写法是把所有的输出包裹在obj这个对象里。)

结语

这几天用webpack打包react-router demo的时候遇到数不尽的坑。。。路径完全搞不懂是怎么回事。。下两篇会总结HTTP相关的知识，以及关于JS里引用对象的完全复制问题！