学习ES6模块化过程当中的坑

后端模块化采用commonJS规范，而浏览器端的模块化采用AMD规范（异步方式），主要的库有require.js、curl.js和sea.js。

可是ES6让js自己就具有模块化的功能，不须要依赖第三方库。语法实现就是import+export模式。

主js文件（main.js ) 引入模块（module.js）的代码以下，在前者里用import引入模块，在后者中导出模块（具体语法看阮大神的网址 http://es6.ruanyifeng.com/#docs/module）：

// main.js
	import {add} from "./module.js";
	let adds = add;
	const he = adds(2,2);
	alert(he);

// module.js
function add(a,b){
	return a+b;
}
export {add};

而后我就能够在咱们的html结构中script入咱们的主js文件main.js：

<script src="./main.js"></script>

用浏览器打开，没反应，F12发现报错了：

Uncaught SyntaxError: Unexpected token import

这是由于须要在script中加上type=“module”，告知浏览器这是一个ES6模块：

<script src="./main.js" type="module"></script>

再刷新浏览器，仍是没反应，F12也不报错，就是由于目前的浏览器都还不支持ES6的模块化。

因而咱们须要将ES6转成ES5语法。babel编辑器能够帮助咱们完成这个使命。 babel的安装和用法参考 https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

若是你只安装了babel-cli你会发现编译转化后输出的仍是原内容，这是由于咱们没告诉babel转换成什么，因此还须要一些配置， 还需安装babel-preset-es2015，安装方法上面连接中也有，须要提醒的是在根目录下新建名为.babelrc的文件能够经过命令行新建：cd> .babelrc，由于window下的图文操做没法完成。

坑又来了，将ES6转成ES5后在浏览器中打开html仍是会有报错：

require is not defined

因此咱们还需将js文件转换成浏览器支持的格式，需安装browserify，参考阮大神的文章http://www.ruanyifeng.com/blog/2014/09/package-management.html

而后再script编译完成后的script文件。

大功告成啦，浏览器alert(4)，咱们就成功的使用了ES6的模块功能了，太不容易了。

可是我有个困惑，为何使用babel不能直接转换成浏览器支持的语法格式，却还须要用browserify多搞一下？也行还有其余更好的解决方法。