精华内容
下载资源
问答
  • 浏览器兼容性和 Transpilation 你的web浏览器可能每隔几个月就会提示你去更新,你知道为什么吗,主要是一些安全漏洞,新特性,以及支持新的 HTML、CSS 和JavaScript语法。 也就是说,在一个浏览器发布新版之前会有...

     浏览器兼容性 和 Transpilation

    你的 web 浏览器可能每隔几个月就会提示你去更新,你知道为什么吗,主要是一些安全漏洞,新特性,以及支持新的 HTML、CSS 和 JavaScript 语法。

    也就是说,在一个浏览器发布新版之前会有一段时间,存在安全漏洞和不支持的新语法。

     这已经是 Web 开发人员普遍关注的一个问题,2015 年,标准化组织发布了 ECMAScript2015,通常被称为 ES6,上一个版本是 ES5。

    发布之后,开发者们都很快采用了新的语法,因为它可以提高开发效率和可读性。但是当时大多数浏览器都不支持 ES6,所以就存在这种兼容性问题。

    两个解决浏览器兼容问题的重要工具:

    caniuse.com——提供最新的各种 PC 和 移动设备浏览器对前端 web 技术的支持情况

    Bable—是一个 JavaScript 库,可以用它将 ES6 转成 ES5,从而运行在大部分浏览器上

    因为浏览器对 ES6 的新特性是逐渐添加进去的,所以需要自己去查找这些浏览器的兼容情况。

     

    Why ES6? 为什么用 ES6?

    和其他语言更相似的语法——语义上更接近其它面向对象编程对象,当有经验的非 JavaScript 开发者想学习 JavaScript 时会更容易。

    可读性和经济性——新语法更容易理解,实现同样的功能需要更少的代码

    解决了一些 ES5 的 bug——ES5 的一些语法导致的常见的bug,ES6 的新语法可以减少一些常见的错误

    所以 Web 开发者很快开始使用 ES6,但浏览器的支持却是滞后的。

    因此 ES6 的新语法是向后兼容的,你可以将 ES6 代码映射成 ES5 版本的。

     

    使用 Babel 进行 Transpilation

    Transpilation 就是把一种语言的代码转换成另一种语言的过程。

    npm init // 根目录创建 package.json
    npm install babel-cli -D // -D表示将 package 添加到 package.json 中的 devDependencies 属性中
    npm install babel-preset-env -D
    npm run build

     

    .babelrc

    通过根目录创建一个 .babelrc 文件,你就可以指定源 JavaScript 的版本

    touch .babelrc

     

    在文件中添加下面这个对象,["env"] 表示要从 ES6+ 的版本转换代码

    {
      "presets": ["env"]
    }

     

    Babel Source Lib

    在运行 npm run build 之前,还需要一个操作——在 package.json 中的 scripts 属性中,有一个 test 属性,在 test 属性下面,添加一个 build 属性,如下:

    ...
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "babel src -d lib"
    }

    "babel src -d lid" 命令行参数

    babel——Babel 命令

    src——指示转换 src 目录中的所有 JavaScript 代码

    -d——表示将转换后的代码写入一个目录下

    lib——转换后的代码存放路径

     

    Review 小结

    ES5——所有现代浏览器都支持的旧的 JavaScript 版本

    ES6——JavaScript 新版本

    caniuse.com——可以查看浏览器兼容情况的网站

    Babel——能将 ES6+ 版本的代码转译为 ES5

    npm init——创建 package.json 文件

    package.json——包含 JavaScript 项目信息的文件

    npm install——安装项目依赖的 Node 包

    babel-cli——包含Babel 命令行工具的 Node 包

    babel-preset-env——包含 ES6+ 到 ES5 的语法映射信息的 Node 包

    .babelrc——指定 JavaScript 源代码的版本

    转载于:https://www.cnblogs.com/xiyouchen/p/10303292.html

    展开全文
  • http://kangax.github.io/compat-table/es6/
    展开全文
  • ES5、ES6浏览器兼容性

    万次阅读 2019-03-05 10:54:51
    从https://www.caniuse.com上面可以查询到,ES的兼容性概览。 下面就主要浏览器进行说明:IE:可以看到IE6,IE7是完全不支持的。而IE8是只支持一些内容,参考引用4,IE9是大部分支持,支持度参考引用2。Chrome:...

    https://www.caniuse.com上面可以查询到,ES的兼容性概览

    下面就主要浏览器进行说明: 
    IE:可以看到IE6,IE7是完全不支持的。而IE8是只支持一些内容,参考引用4,IE9是大部分支持,支持度参考引用2。 
    Chrome:Chrome 23版本之后就是完全支持的了。19~22版本有不兼容的地方,参考引用1。 
    Firefox:Firefox 21版本之后就是完全支持的了。4~20版本有不兼容的地方,参考引用1。 

    ES5的具体兼容性可查看http://kangax.github.io/compat-table/es5/

    ES6的具体兼容性可查看http://kangax.github.io/compat-table/es6/

    最新浏览器版本对ES的支持如下

    一、pc端浏览器对ES的支持情况

    1.chrome:51版起,可支持97%的ES6新特性

    2.firefox:53版起,可支持97%的ES6新特性

    3.safari:10版起,可支持99%的ES6新特性

    4.ie:Edge 15可支持96%的ES6新特性。Edge14可支持93%。(IE7~11基本不支持ES6)

    二、移动端浏览器对ES的支持情况

    1.ios:10.0版起,可支持99%的ES6新特性

    2.android:基本不支持ES6新特性(5.1仅支持25%)

    三、服务器对ES的支持情况

    1.node.js:6.5版起,可支持97%的ES6新特性

    各浏览器兼容ES6的解决方法:

    把ES6转换为ES5,比较通用的工具有babel、jsx、traceur、es6-shim等

    展开全文
  • 以前对浏览器兼容性问题只是大概知道一些点,没想到这次真正着手去做的时候,还是碰到了很多问题。刚开始的时候一边解决问题,一边想着:用 IE8 的都是神经病,到后来,我发现完了,I LOVE IE。 0x00 起源 在这次...

    以前对浏览器兼容性问题只是大概知道一些点,没想到这次真正着手去做的时候,还是碰到了很多问题。刚开始的时候一边解决问题,一边想着:用 IE8 的都是神经病,到后来,我发现完了,I LOVE IE。

    0x00 起源

    在这次做小蜜 PC 版的时候,由于早于 PC 版,无线版已经重新设计了全新版,做了很多架构上的优化调整。所以在做的时候把无线版的前端架构拿了过来,主要的考虑就是品牌和功能保持跟无线版统一的同时,技术上也可相互支持以及组件复用。

    无线版技术上主要采用 ES6 + Webpack + Babel 的方式,由于项目的独特性和特殊需求,并没有使用任何框架,只引入 zepto 作为一个标准支撑库。

    而 PC 版的架构跟无线版基本保持一致,主要是把 zepto 换成了 jQuery。

    下面是一些基本的开发依赖:

    {
      "devDependencies": {
        "babel-core": "~6.3.15",
        "babel-loader": "~6.2.0",
        "babel-preset-es2015": "~6.3.13",
        "babel-preset-stage-0": "~6.3.13",
        "babel-runtime": "~6.3.13",
        "extract-text-webpack-plugin": "~0.9.1",
        "less-loader": "~2.2.1",
        "nunjucks-loader": "~1.0.7",
        "style-loader": "~0.10.2",
        "webpack": "~1.12.9",
        "webpack-dev-server": "^1.10.1"
      }
    }

    0x01 polyfill

    由于 Babel 默认只转换转各种 ES2015 语法,而不转换新的 API,比如 Promise,以及 Object.assign、Array.from 这些新方法,这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。

    主要有两种方式:babel-runtime 和 babel-polyfill

    babel-runtime

    babel-runtime 的作用是模拟 ES2015 环境,包含各种分散的 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-polyfill

    而 babel-polyfill 是针对全局环境的,引入它浏览器就好像具备了规范里定义的完整的特性,一旦引入,就会跑一个 babel-polyfill 实例。用法如下:

    1.安装 babel-polyfill

    npm install babel-polyfill --save

    2.在入口文件中引用:

    import 'babel-polyfill'

    小结

    其实做到这些,在大部分浏览器就可以正常跑了,但我们做的是一个用户环境很不确定的产品,对一些年代久远但又不容忽视的运行环境,比如 IE8,我们做的还不够。

    接下来将开始讲述我们在兼容性方面遇到的一些问题,和解决方法。

    0x02 开始在 IE8 运行

    最开始做的时候并没有针对 IE 做一些兼容性方面的处理,结果在 IE8 上一跑一堆问题。

    第一步,我们把 jQuery 换成 1.12.1 ,因为 2.X 已经不再支持 IE8。

    但并没有像我们想象中的那样,只是简单换一下 jQuery 版本就可以正常运行了。

    0x03 default or catch

    这是遇到的第一个问题。在兼容性测试过程中,对下面的代码:

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    或者这种:

    module.exports = _main2.default;

    在 IE8 下会直接报”缺少标识符、字符串或数字”的错。

    我们得在对象的属性上加 '' 才可以。就像下面这样:

    function _interopRequireDefault(obj) {
      return obj && obj.__esModule ? obj : { ‘default’: obj };
    }
    
    module.exports = _main2['default'];

    至于原因,并不是 IE8 下对象的属性必须得加 '' 才行,而是 default 的问题,作为一个关键字,同样的问题还包括 catch

    这两种情况,可以通过使用 transform-es3-property-literals 和 transform-es3-member-expression-literals 这两个插件搞定。

    总之,在平时写代码的时候避免使用关键字,或者保留字作为对象的属性值,尤其是在习惯不加引号的情况下。相关讨论:Allow reserved words for properties

    0x04 es5-shim、es5-sham

    为了兼容像 IE8 这样的老版本浏览器,我们引入 es5-shim 作为 polyfill。

    但在遇到 Object.defineProperty 仍提示 "对象不支持此操作"

    As currently implemented, the Object.defineProperty shim will not install on IE8 because IE8 already has such a method. However, the built-in IE8 method only works when applied to DOM objects.

    其实 es5-shim 明确说明,这个方法的 polyfill 在 IE8 会失败,因为 IE8 已经有个同名的方法,但只是用于 DOM 对象。

    同样的问题还包括 Object.create,上述问题可以再引入 es5-sham 解决.

    0x05 addEventListener

    项目中有部分代码直接使用 addEventListener 这个 API,但在 IE8 下的事件绑定并不是这个方法。

    这个问题很容易解决,也无需去写额外的 polyfill。我们已经把 jQuery 换成 1.x,所以只需把代码中 addEventListener 换成 jQuery的写法就 Okay 了。

    jQuery 其实为我们封装了很多 API,并做了很多兼容性的封装,类似的只要使用封装好的就可以了。

    0x06 无法获取未定义或 null 引用的属性

    这个问题是在特定场景下【转人工】出现的,出现问题的不是 IE8,而是 IE9 和 IE10。

    原因是 ocs 实例创建失败,因为没有调用父类的构造函数。

    通过安装 transform-es2015-classes 和 transform-proto-to-assign 解决。

    在配置项加上这两个插件的配置:

    {
      "plugins": [
          ["transform-es2015-classes", { "loose": true }],
          "transform-proto-to-assign"
    
      ]
    }

    0x07 postMessage

    虽然 postMessage 是 HTML5 的特性,但 IE8 和 Firefox3 很早就实现了这个 API,当然,跟后来的标准并不一致。这其实也不能怪 IE8。

    The postMessage method is supported in Internet Explorer from version 8, Firefox from version 3 and Opera from version 9.5.

    我们可能会这样去使用:

    parent.postMessage({success: 'ok', name: ‘mirreal’}, ‘*’);

    但是为了兼容 IE8,我们得转成字符串:

    parent.postMessage(JSON.stringify({success: 'ok', name: "mirreal"}), ‘*’);

    另外一个需要注意的点是:在 IE8 下 window.postMessage 是同步的。

    window.postMessage is syncronouse in IE 8

    var syncronouse = true;
    window.onmessage = function () {
      console.log(syncronouse); // 在 IE8 下会在控制台打印 true
    };
    window.postMessage('test', '*');
    syncronouse = false;

    0x08 IE8/IE9 的控制台

    遇到一个奇怪的问题,在刚开始遇到的时候(其实搞清楚原因,好像也挺正常的),小蜜在 IE8 IE9 无法加载。在 IE8 那个古老浏览器的左下角,好像也是唯一会在页面提示脚本错误的浏览器,提示 script error

    第一反应就是应该又是某个函数在 IE 下不支持,准备打开控制台看看到底哪里报错,结果却什么事都没有了,页面竟然顺畅地加载出来了,这下该怎么调试好呢?

    开始思考:什么东西是依赖控制台而存在的,到底会是什么呢。。。其实就是控制台本身。

    原因就是我们在代码中添加了一些控制信息会打印在控制台,而 IE8/IE9 要开启 IE Dev Tools 才能使用 console 对象。

    切忌把 IE8/9 想成 Chrome/Firefox,以为永远有 window.console 可用.终于,IE10 改邪归正,console 不再像段誉的六脉神剑时有时无。

    console.log is there in IE8, but the console object isn't created until you open DevTools. Therefore, a call to console.log may result in an error, for example if it occurs on page load before you have a chance to open the dev tools.

    但只要 IE8/9 还在一天,console 检查还是不能少的

    事实上,IE8/9 从未死去,所以

    就像这样:

    
    if (window.console) {
      console.log('log here');
    }

    要是有一堆 console.logconsole.countconsole.errorconsole.timeconsole.profile,... 这样去写,那还不把人写到恶心死。

    写个简单的 console polyfill 吧,检测是否存在 console,不存在可以常见一个同名的空方法达到不报错的目的。当然,生产环境的代码其实也不会有那么多奇奇怪怪的 console

    0x09 定义文档兼容性

    X-UA-Compatible 当初是针对 IE8 新加的一个配置。用于为 IE8 指定不同的页面渲染模式,比如使用 IE7 兼容模式,或者是采用最新的引擎。

    现在基本也不需要前者的降级模式,更多的是写入 IE=edge 支持最新特性。而 chrome=1 则会激活 Google Chrome Frame,前提是你的 IE 安装过这个插件。

    有什么用呢,当然有用,有些 API 是作为新特性存在于 IE8 中的,比如 JSON,不开启的话就用不了。

    为什么要用 X-UA-Compatible?

    在 IE8 刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用 X-UA-Compatible 强制 IE8 采用低版本方式渲染。

    比如:使用下面这段代码后,开发者无需考虑网页是否兼容 IE8 浏览器,只要确保网页在 IE6、IE7 下的表现就可以了。

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    而这段代码:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    IE=edge 告诉 IE 使用最新的引擎渲染网页,chrome=1 则可以激活 Chrome Frame[1]。

    0x0a 条件注释 or 条件编译

    最后说说 IE 的条件注释,用法如下:

    !    [if !IE]    The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
    
    lt    [if lt IE 5.5]    The less-than operator. Returns true if the first argument is less than the second argument.
    
    lte    [if lte IE 6]    The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
    
    gt    [if gt IE 5]    The greater-than operator. Returns true if the first argument is greater than the second argument.
    
    gte    [if gte IE 7]    The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
    
    ( )    [if !(IE 7)]    Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
    
    &    [if (gt IE 5)&(lt IE 7)]    The AND operator. Returns true if all subexpressions evaluate to true
    
    |    [if (IE 6)|(IE 7)]    The OR operator. Returns true if any of the subexpressions evaluates to true.
    

    另外一个类似的东西是在 Javascript 中的条件编译(conditional compilation)。我们可以使用这段简单的代码来做浏览器嗅探:

    var isIE = /*@cc_on!@*/false

    在其他浏览器中,false 前的被视为注释,而在 IE 中,/*@cc_on .... @*/ 之间的部分可以被 IE 识别并作为程序执行,同时启用 IE 的条件编译。

    常用变量如下:

    * @_win32 如果在 Win32 系统上运行,则为 true。
    * @_win16 如果在 Win16 系统上运行,则为 true。
    * @_mac 如果在 Apple Macintosh 系统上运行,则为 true。
    * @_alpha 如果在 DEC Alpha 处理器上运行,则为 true。
    * @_x86 如果在 Intel 处理器上运行,则为 true。
    * @_mc680x0 如果在 Motorola 680x0 处理器上运行,则为 true。
    * @_PowerPC 如果在 Motorola PowerPC 处理器上运行,则为 true。
    * @_jscript 始终为 true。
    * @_jscript_build 包含 JavaScript 脚本引擎的生成号。
    * @_jscript_version 包含 major.minor 格式的 JavaScript 版本号。

    Internet Explorer 11 之前的所有版本的 Internet Explorer 都支持条件编译。 从 Internet Explorer 11 标准模式开始,Windows 8.x 应用商店应用不支持条件编译。

    之前一直在做移动端的开发,没想到做 PC 端也会遇到这么多的兼容性问题。不同于移动端设备的繁杂和不确定性,PC 版的兼容更侧重于对特定浏览器的特性的了解,相比而言更为明确,而非因为某一款手机的诡异表现。

    参考文档

    转载于:https://www.cnblogs.com/godghdai/p/7657695.html

    展开全文
  • 关于es6兼容性问题

    2018-10-08 09:53:00
    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的...这就是浏览器ES6兼容性问题。 如何解决浏览器的兼容问题 &l...
  • vue cli es6转es5 保证浏览器兼容性安装在根目录下创建.babelrc文件IE报vuex requires a Promise polyfill in this browser问题解决 开发过程中,由于需要使用了async await,只有少数的浏览器支持,极大多数的...
  • 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器...这就是浏览器ES6兼容性问题。 如何解决浏览器的兼容问题 <script> ...
  • 1、es6 (ES2015)兼容性 ...因为 es6兼容性问题,在低版本浏览器使用时,需要编译成浏览器能懂的 js 语言。 目前有两种常见的编译方式:在线转换、提前编译(推荐) (1)在线转换:是通过 babel(browse...
  • ES6+ 兼容性列表

    千次阅读 2019-07-09 18:15:24
    检查在各个浏览器中哪些特性可用: ES2015(ES6) : http://kangax.github.io/compat-table/es6/ ES2016+ : http://kangax.github.io/compat-table/es2016plus/
  • vue cli es6转es5 保证浏览器兼容性

    千次阅读 2018-03-08 17:10:00
    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝试成功,以下...
  • 为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用...这就是浏览器ES6兼容性问题。 好消息 哪里有灾难,哪里就有勇士和救兵,...
  • 为什么ES6会有兼容性问题?由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果...这就是浏览器ES6兼容性问题。好消息哪里有灾难,哪里就有勇士和救兵,针对ES6的...
  • vue-cli2下 解决浏览器兼容性问题 1. 安装babel-polyfill 执行以下命令,重启服务器: npm install --save babel-polyfill 2.在main.js引入 import 'babel-polyfill' 3.在webpack.base.conf.js中配置: entry: { ...
  • 1. 安装npm install --save-dev babel-preset-es2015 ...3.在项目根目录创建一个.babelrc文件(ES6转ES5配置) 里面内容 最基本配置是: { // 此项指明,转码的规则  "presets": [  // env项...
  • 怎么使浏览器兼容ES6语法

    千次阅读 2019-05-08 11:07:23
    哪里有灾难,哪里就有勇士和救兵,针对ES6兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于在ES6浏览器之间做了一个翻译官。比较通用的工具方案有babel,jsx,trac.....
  • 写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6兼容性如何,如何在浏览器兼容ES6的特性,这节会介绍一个抱砖引玉的操作案例。 为什么ES6会有兼容性问题? ​ 由于广大用户使用的浏览器...
  • 哪里有灾难,哪里就有勇士和救兵,针对ES6兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于在ES6浏览器之间做了一个翻译官。比较通用的工具方案有babel,jsx,...
  • 写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例。 为什么ES6会有兼容性问题? 由于广大用户使用的...
  • 怎么让浏览器兼容你的ES6写法

    千次阅读 2018-11-18 19:30:16
    一:ES6目前(2018.03)在快速推广使用,但是尚且存在兼容性问题 由于用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,如果使用了ES6的新...这就是浏览器ES6兼容性问题。 二:常用解决...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 439
精华内容 175
关键字:

es6浏览器兼容性