前端开发中兼容性问题汇总

本文将前端开发中常用工具&框架（Vite、Uniapp、钉钉微应用、Vue、React）兼容性情况进行汇总，同时也收集了andorid版本对应的chrome版本信息。

浏览器平台/发布年份

年份 Android Chrome Safari Firefox IE
2018 9.0 64 - 71 12(对应iOS12) 58 - 64
2017 8.0 - 8.1 56 - 63 11 51 - 57
2016 7.0- 7.12 48 - 55 10 44 - 50
2015 6.0 40 - 47 9 35 - 43
2014 5.0 - 5.1 32 - 39 8 27 - 34
2013 4.4 11
2012 10
2012 9

Nuxt.js

Nuxt 3.4~3.8版本
理论上兼容到chrome49

需要安装插件
Install:

1
npm install nuxt-vite-legacy --save-dev

Add nuxt-vite-legacy to the modules section of nuxt.config.ts:

1
2
3
4
5
6
7
8
9
10
11
export default defineNuxtConfig({
  modules: ["nuxt-vite-legacy"],
  // Optionally, provide @vitejs/plugin-legacy options.
  // For example, for Chrome 49 you could use:
  legacy: {
    targets: ["chrome 49"],
    additionalLegacyPolyfills: [
      "mdn-polyfills/Element.prototype.getAttributeNames",
    ],
  },
})

插件说明
https://github.com/IlyaSemenov/nuxt-vite-legacy

社区兼容方案:
https://github.com/nuxt/nuxt/issues/15464

Vue3

最新版本的 Vue (3.x) 只支持原生支持 ES2015 的浏览器。这并不包括 IE11。Vue 3.x 使用的 ES2015 功能无法在旧版本的浏览器中进行兼容，如果你需要支持旧版本的浏览器，请使用 Vue 2.x 替代。
https://cn.vuejs.org/about/faq.html#what-browsers-does-vue-support

浏览器兼容如下：

  • Chrome：51+；(import 兼容性 chrome63+, proxy 兼容性 49+。所以理论兼容性为 49+)

  • Edge：15+；

  • Safari：10+；

  • Firefox：54+；

  • Opera：38+；

  • IE：不支持

  • Safari on iOS：10+；

  • Android Browser：8+；(支持升级过webview内核的Android5、6、7)

详见：
https://caniuse.com/?search=ECMAScript%202015
https://cn.vuejs.org/about/faq.html#what-browsers-does-vue-support

React 18+

浏览器兼容如下：

  • Chrome：80+；(polyfills, 51+)

  • Safari：10+；

  • IE：不支持；(polyfills, IE 11+)

  • Safari on iOS: 10+；

  • Android Browser：8+；(支持升级过webview内核的Android5、6、7)

详见：
https://umijs.org/blog/legacy-browser

Vite

现代浏览器基准线变化
生产构建打包时会假定目标支持现代 JavaScript。默认情况下，Vite 的目标是支持 原生 ES 模块、原生 ESM 动态导入 以及 import.meta 的浏览器：

Chrome >=87
Firefox >=78
Safari >=13
Edge >=88

一小部分用户需要 @vitejs/plugin-legacy，它会自动生成兼容性 chunk 以及相应的 ES 语言功能的 polyfill。
https://cn.vitejs.dev/guide/migration-from-v2#modern-browser-baseline-change

使用@vitejs/plugin-legacy后最低支持 es2015，即 Chrome 51+

解决vite构架后报错 globalThis is not defined
https://github.com/vitejs/vite/discussions/7915

@vitejs/plugin-legacy

modernTargets
Default: ‘edge>=80, firefox>=72, chrome>=80, safari>=13.1, chromeAndroid>=80, iOS>=13.1’

常规配置
import legacy from ‘@vitejs/plugin-legacy’

1
2
3
4
5
6
7
8
9
vite: {
    plugins: [
        legacy({
            targets: ['chrome>=69', 'safari>=12'],
            renderLegacyChunks: false,      
            modernPolyfills: ['es.global-this', 'es/object', 'es/array'],
        })
    ]
}

https://www.npmjs.com/package/@vitejs/plugin-legacy

钉钉微应用

钉钉微应用（H5）chrome内核已经在2020年全量升级至69。
https://open.dingtalk.com/document/orgapp/micro-app-client-api-change-log-history

Uni-app

Uniapp Vue3版，兼容 chrome 63 以上版本（使用了script module 和 import），即 android 9 以上
https://caniuse.com/?search=import

Vue2

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
https://v2.cn.vuejs.org/v2/guide/installation.html#%E5%85%BC%E5%AE%B9%E6%80%A7

浏览器兼容如下：

  • Chrome：23+；(polyfills, Chrome 4+)

  • Edge：12+；

  • Safari：6+；

  • Firefox：21+；

  • Opera：15+；

  • IE：10+；(polyfills, IE 9+)

  • Safari on iOS：6+；

  • Android Browser：4.4+；(polyfills)

详见：https://caniuse.com/?search=ECMAScript%205

React 16+

react 16.x

浏览器兼容如下：

  • Chrome: 49+；

  • Edge: 13+；

  • Safari: 10+；

  • Firefox: 64+；

  • IE：9+；

  • Safari on iOS: 10+；

  • Android Browser：8+；(支持升级过webview内核的Android5、6、7)

详见：
https://v3.umijs.org/zh-CN/guide/boost-compile-speed

react 17.x

浏览器兼容如下：

  • Chrome：49+；

  • Safari：10+；

  • IE：11+；

  • Safari on iOS: 10+,

  • Android Browser：8+；(支持升级过webview内核的Android5、6、7)

Android版本及Webview内核

Android 版本WebView 内核版本发布日期
6.0 (API level 23)Chromium 472015-10
7.0 (API level 24)Chromium 532016-08
7.1 (API level 25)Chromium 562016-10
8.0 (API level 26)Chromium 632017-08
8.1 (API level 27)Chromium 682017-12
9.0 (API level 28)Chromium 692018-08
10 (API level 29)Chromium 752019-09
11 (API level 30)Chromium 812020-09
12 (API level 31)Chromium 932021-10
12L (API level 32)Chromium 932022-03
13 (API level 33)Chromium 1012022-08

2015年6月， ES2015（即 ECMAScript 6、ES6） 正式发布。ES2015 是该语言的一个显著更新，也是自 2009年 ES5 标准确定后的第一个重大更新。
ES6 提供了许多新特性，但并不是所有的浏览器都能够完美支持。好在目前各大浏览器自身也加快速度兼容 ES6 的新特性，其中对 ES6 新特性最友好的是 Chrome 和 Firefox 浏览器。
原文:JS - 各浏览器对ES2015/ES6的支持情况（桌面端、移动端、以及服务器）

一、桌面端浏览器对ES2015的支持情况

Chrome：51 版起便可以支持 97% 的 ES6 新特性。
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
Safari：10 版起便可以支持 99% 的 ES6 新特性。
IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

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

iOS：10.0 版起便可以支持 99% 的 ES6 新特性。
Android：8.0 支持 ES6 新特性

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

Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

#兼容
前端开发中兼容性问题汇总
http://example.com/20240314-前端开发中兼容性问题汇总/
作者
csorz
发布于
2024年3月14日
许可协议