學習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多搞一下？也行還有其餘更好的解決方法。