这是lit框架的系列学习文章,跳转查看其他章节
- 不用vdom的lit框架学习1:安装和编译
- 不用vdom的lit框架学习2:挠头的web component(兼容性说明,必看)
- 不用vdom的lit框架学习3:代码结构初步解析
- 不用vdom的lit框架学习4:properties详细定义
上周我们提到,因为vuepress和golang后台关于渲染的兼容性问题,我们在部分页面使用了一个单独的页面框架来建设,就是lit框架,因为lit框架是基于web component的,而web component因为是一个比较新的标准,有兼容性要求,学习其他lit框架介绍文章,也有文章提到有兼容性要求,不能作为生产库使用,所以在大家查看这个系列的文章之前,我们觉得了解他的兼容性要求是有必要的,正好我们自己也要做一个全面的评估,才能知道是否要继续用下去
本篇文章主要内容翻译自Requirements – Lit
这篇文章主要结论如下,填写过程在后续文章中
主要需求点 | 兼容下限 | 不兼容解决方案 |
ES2019 | IE11 | |
全局模块标识(bare module specifiers) | 通过打包工具解决 | |
“现代” web API(template等web component)需要的特性 | 大部分2018年以后的浏览器都可以 (国产操作系统要按版本确认) | 引用polyfills |
ES2019的浏览器兼容性
ECMAScript 2016+ compatibility table (kangax.github.io)
ES2019实际就是ES6 2019版本的意思,根据上面这篇文章的介绍,浏览器情况如下:
才发现我经常用的Object.fromEntries也是ES2019……,这么看的话,问题应该仅限IE11。
Web Component兼容性
Lit自己在网页上给出的兼容列表大概版本如下:
Browser | Supports ES2019 & web components | 不需要编译支持(可直接作为模块引用) | 大致发布时间 |
---|---|---|---|
Chrome | >=73 | >79 | 2019年 |
Safari | >=12.1 | >12 | 2018年 |
Firefox | >=63 | >71 | 2018年 |
Edge | >=79 | >79 | 2020年 |
两点说明:
- 国内可能要稍微注意几个国产操作系统的默认浏览器的版本问题,搜索了一些网友的情况,麒麟系统的Firefox默认似乎还在52版本徘徊,那么可能会有兼容性问题。
- 上面表格第三列是一个最好的情况,就是我们用lit写的模块不需要任何额外编译工作,就可以直接在浏览器引用使用,鉴于我们目前仍然常用vite/rollup编译打包的情况,这列的参考意义不大,我们主要看第二列即可。(需要改默认build方式,见第一章)
polyfills
如果是老的浏览器,需要使用polyfills引入相关的功能,会包含以下的几类:
- core-js标准库增强
- regenerator-runtime async/await等
- import/require支持,取决于编译设置,可能需要以下两种中的一种
- @webcomponents/webcomponentsjs - web component需要的支撑库
lit/polyfill-support.js
- lit项目的支撑库
因为上面几种要根据开发环境配置,所以官方文档的写法如下
<script src="按上面要求加入需要的文件.js"></script>
<script src="node_modules/lit/polyfill-support.js"></script>
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- 再跟具体的应用程序代码 -->
另外,官方文档还详细说明了polyfills按需引用等加速应用的方法,这里就不多说了。
总的看下来,我觉得polyfills仅会在部分的环境下才会被需要(国产环境请着重注意),同时也基本可以认为是一个可以被解决的问题,总体来讲,对于一个现代网站应该已经是一个可以选择的方案了,因此我们将继续使用lit进行后续编程,让我们先来试试水吧。