• 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

  • 相关阅读:
    介绍几个在线画流程图的工具[转]
    年轻人一定要奋斗吗?
    彻底搞懂字符编码(unicode,mbcs,utf-8,utf-16,utf-32,big endian,little endian...)[转]
    Once you eliminate all the other factors,the only thing remaining must be the truth.
    每天一个linux命令(3):pwd命令
    浏览器访问网页的详细内部过程(转)
    [OutLook]关闭Outlook时最小化
    [Notepad++]Notepad++怎么实现双视图/双窗口?
    [SQL]事务回滚详解及示例
    [EasyUI]确认删除
  • 原文地址:https://www.cnblogs.com/mufc/p/11504372.html
Copyright © 2020-2023  润新知