Quasar中的前端代码转译
使用 Quasar 时，如何完成浏览器兼容性的配置。
制定兼容范围
在进行实际配置前，首先必须确定要支持浏览器的版本，而确定浏览器版本则需要先明确业务对象的情况。
为什么不干脆把标准定的越高越好呢？比如支持100%的用户。这是因为支持率越高，可用的新语法越少，意味着更多的转译代码和 polyfill，这会带来额外的代码量，从而导致下载数据量增加，以及运行速度变慢的问题，为了0.01%影响99.99%用户的体验并增加他们的流量开销，是否合适呢？这就需要根据实际业务进行取舍和平衡。
比如我们的业务对象既有企业用户，也有公众用户，企业用户主要使用钉钉，并可对其PC浏览器进行要求，而公众用户主要使用微信。
确定常用浏览器版本
PC浏览器可以指定，那么对浏览器版本就不需要过多考虑，但是部分客户还有XP系统，那么也就确定了 Chrome 浏览内核的版本不可以超过 49；
微信用户可能在手机登录，也可能在PC登录，而PC中的微信内置是QQ浏览器9，其内核版本是 Chrome 53;
电脑端的钉钉内置浏览器已经是 Chrome 91；
手机端的话考虑到安卓手机使用寿命比苹果要短，且微信和钉钉都可以内置新版本的引擎，而苹果手机必须使用系统自带的 Safari 浏览器内核，因此手机端的版本以支持 Safari 为目标，目前苹果官方支持的最老的设备是2015年发布的 iPhone 6s，如果用户从来没有升级过系统，那么自带的就是 Safari 9；
因此主要的浏览器版本支持就是 Chrome 49 与 Safari 9。
通过 browserslist 完成浏览器版本配置
在 package.json 中添加 browserslist，保持其他配置为默认值，修改 Chrome 和 ios_saf 的版本：
"browserslist": [
"ie 11",
"Chrome >= 43",
"ios_saf >= 9",
"last 10 Firefox versions",
"last 4 Edge versions",
"last 7 Safari versions",
"last 8 Android versions",
"last 8 ChromeAndroid versions",
"last 8 FirefoxAndroid versions",
"last 10 iOS versions",
"last 5 Opera versions"
],
处理第三方库
采用上述配置会使 Quasar 在转译时调用 babel ，并根据指定的目标浏览器转换用户编写的代码，使其能在上述浏览器中运行。但是对于通过 npm install 安装的第三方库，并不会进行转译。比如函数式编程工具库 rambda 会用到 Object.values 这个方法，但 Chrome 49 并不支持这个方法，不对其进行处理就会报找不到方法的运行时错误。
处理方式也很简单，通过 quasar.conf.js 的配置告诉 babel 哪些第三方库需要被转译即可。
将 build 中的 transpile 设为 true，并在 transpileDependencies 中添加 rambda 选项。
build: {
...
transpile: true,
transpileDependencies: ['rambda'],
...
}
持续改进
完成上面的配置，可以初步估算我们的程序至少可以支持99.5%以上的用户。根据 caniuse.com 中的统计，国内大约还有 0.1% 的用户在使用 iOS 9 之前的版本以及 0.36% 的用户在使用 Android 5 之前的版本，但考虑到我们的程序未必一定使用了某些不被支持的特性，以及微信和钉钉自带浏览器也会采用比原始系统更新的内核，所以实际的支持率可以更乐观一些。
回到实际生产环境，上述都是理论推断，最终还是需要以实际情况为准。
比如 iOS 9 理论上支持 const 但不能在 use strict 模式中使用，这会导致 babel 7 编译的代码无法在早期的 iPhone 中使用，最终我们通过添加 ios_saf >= 8 将版本进一步降低才解决了这个问题。这类问题都是在实际使用过程中才能发现的，因此需要不断的根据现实反馈才能正确支持目标用户，并控制好生成出来的最终代码量。
而随着时间推移，旧手机的用户比例会进一步降低，到时候又可以将支持的浏览器版本往前推移，使编译结果能使用更多新语法，从而提升大多数用户的体验。
