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