es6 對瀏覽器的兼容

　　由於有些瀏覽器版本的發布是在 es6 定稿和發布之前的，因此對於老版本的瀏覽器是沒有對 es6 的特性進行兼容的，針對 es6 的兼容問題，許多團隊也做出了相應的開發，將 es6 的語法轉換成針對瀏覽器可以識別的 es5 語法，充當一個翻譯官的角色；比較通用的工具有：babel、jsx、traceur、es6-shim 等。

 Babel

　　關於 babel 其實它只默認的去轉換各種的 es5 語法，對於 API 是不會轉換更新的，比如 Promise、Object.assign、Array.from 這些新的方法，這時候就需要提供 ployfill 來模擬出這樣一個提供原生支持功能的瀏覽器環境；主要的方式有兩種：babel-runtime 和 babel-polyfill；

Babel-runtime

　　babel-runtime 的作用是模擬 es5 的環境，包含各種分散的 polyfill 模塊，我們可以在自己的模塊中單獨引入，比如 promise： import 'babel-runtime/core-js/promise'；

　　這樣不會再全局環境添加未實現的方法，但是這種手動的引入每個 polyfill 會非常的低效，我們可以借助 runtime transform 插件來自動話處理這一切；

首先使用 npm 安裝：
npm install babel-plugin-transform-runtime --save-dev

然后在 webpack 配置文件的 babel-loader 增加選項：
loader: ["babel-loader"],
query: {
  plugins: [
    "transform-runtime"
  ],
  presets: ['es2015', 'stage-0']
}

 Babel-polufill

　　babel-polyfill 是針對全局環境的，引入它瀏覽器會具備規范里定義的完整的特性，一旦引入，就會運行一個 babel-polyfill 實例；用法：

1.安裝 babel-polyfill
npm install babel-polyfill --save

2.在入口文件中引用：
import 'babel-polyfill'

 

 

 　　在項目開發中，有時候會遇到這樣的問題：vue-cli創建的項目，run 正常，build報錯：Unexpected token name «i», expected punc «;»

　　這是在 babel 轉換的時候發生的問題，解決檔案可以

在package.json文件里修改

"devDependencies": {
    "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
    "uglifyjs-webpack-plugin": "0.4.3",
在webpack.config.js里面使用

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
new UglifyJSPlugin()
以替換webpack自帶的UglifyJsPlugin插件可以解決問題。

 參見：https://www.jianshu.com/p/b703b1b91548