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'

猜你喜欢

转载自www.cnblogs.com/mufc/p/11504372.html