“最近在學習ES6”，但是在chrome中新建了js通過ES6語法(import,export)無法引入外部JS，報錯：
Uncaught SyntaxError:Unexpected token {
b.js
import {sex,echo} from "./a.js";
console.log(sex);
echo(sex)
a.js
var sex="boy";
var echo=function(value){
console.log(value)
}
export {sex,echo}
inde.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./b.js"></script> </head> <body> </body> </html>
我們都知道現在瀏覽器對於ES2015(ES6)的語法支持還不是很強, 即便是使用Firefox和Chrome瀏覽器, 如果版本比較低的話, 可能還只能支持一部分語法, 因此想要使得開發人員編寫出來的ES6語法能夠正常地在各個瀏覽器運行的話, 還是需要將編寫的JS文件通過一些工具編譯成ES5語法才行, 那么這個工具就是babel. 如何使用babel來進行語法的編譯在這里可以看得到:
http://www.ruanyifeng.com/blog/2016/01/babel.html
這里就不贅述了.
然而, Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。而且像import和export這兩個命令現在在任何瀏覽器中都是不支持的, 同時babel也無法將其轉換為瀏覽器支持的ES5, 原因在於:
babel只是個翻譯，假設a.js 里 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，並不會把b.js的內容給讀取合並進來, 如果想在最終的某一個js里，包含 a.js，b.js 的代碼，那就需要用到打包工具
所以我在這里講解一下如何使用webpack工具將帶有import和export語法的JS文件, 通過打包工具生成所有瀏覽器都支持的單個JS文件.
1. 下載node.js和webpack
Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴展的網絡應用。可以說就是服務器端的JS. webpack是一個打包工具, 而它是依賴於node.js運行的.
下載node.js可以通過官網: http://nodejs.cn/download/
具體的安裝步驟網上可以搜到很多, 這里不再贅述. 安裝完畢后打開node.js自帶的命令行工具 
然后輸入如下命令全局安裝webpack工具
npm install -g webpack- 1
接着通過命令行工具定位到你的工程文件的根目錄下, 再次安裝webpack到你的工程中
npm install webpack- 1
2. 編寫webpack.config.js文件
在根目錄下創建webpack.config.js, 這個文件是用來描述一些要使用webpack工具進行打包的配置信息, 文件內容如下: 
通過該文件可以使用webpack打包工具, webpack會從import.js進入, 對該文件中的內容進行編譯並打包, 最終會在dist目錄下生成打包好的文件bundle.js, 編譯打包過程中用到的工具在module對象的loaders中聲明, 這里使用了babel-loader來對JS文件進行編譯(包括從ES6轉換為ES5以及打包)
3. 創建import.js
創建一個import.js, 內容如下: 
在該文件中通過ES6語法import從export.js中引入firstName和lastName變量. 並且通過console.log將引入的兩個變量打印到控制台.
4. 創建export.js
在該文件中通過ES6語法export將文件中的幾個變量作為模塊輸出給別的文件引用.
5. 創建HTML文件
在HTML文件中直接將webpack最終打包生成的bundle.js文件引入即可, 因為通過webpack工具已經將export.js和import.js的所有內容都打包到一個文件bundle.js中了, 因此在HTML文件中引入該文件即可以將兩個JS文件中的代碼都執行. 
6. 配置.babelrc文件
在工程文件的根目錄下創建一個.babelrc文件(注意前面有個點), 這個文件是用來描述我要根據什么樣的規則、或者是將JS文件編譯成什么版本的文件(比如說ES5). 該文件的內容如下: 
7. 下載相關依賴模塊
方式1: 可以像下面這樣, 直接在項目根目錄下創建一個package.json文件, 並且在文件中指定devDependencies對象, 在該對象中寫上我編譯及打包中所要使用到的依賴模塊, 圖片中的webpack就是用於打包的工具, 而其他的以babel開頭的選項都是編譯JS文件並打包所需要用到的依賴模塊. 
創建好package.json文件后, 在命令行中輸入
npm install- 1
npm工具就會根據該文件中devDependencies選項下載對應的依賴模塊.
方式2(推薦): Ctrl+R打開運行, 然后輸入cmd打開命令行工具, 通過命令行工具一個個安裝, 這樣可以直接通過npm去下載依賴模塊最新的穩定的版本, 同時也不需要自己去記這些模塊的版本號
npm install babel npm install babel-cli npm install babel-core npm install babel-loader npm install babel-preset-es2015- 1
- 2
- 3
- 4
- 5
8. 使用 webpack打包
使用命令行工具定位到項目的根目錄下, 然后輸入如下指令
webpack- 1
等待一會兒就會發現工程文件的目錄下多了一個dist文件夾, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通過下面的代碼引入js文件
<script src="dist/bundle.js"></script>- 1
然后在瀏覽器上運行html文件, 使用F12打開開發者工具, 就可以看到console選項中輸出兩行記錄”Micheal”, “Jackson”