在尝试Lit和Svelte框架之后，我更倾向于Svelte，其语法更友好。可使用Vite 进行初始化Svelte脚手架。
但测试之后，Svelte并不兼容IE11，但使用@vitejs/plugin-legacy 之后尝试可以兼容（暂时）。
由于此主题页面中，为突出文字内容及不改变原有SEO收录路径，所有有效内容（包括文章列表、文章内容、菜单、部分锚文本）还是采用PHP进行服务端渲染，所以，IE11中应该是会正常体现出这些内容。
当然页面样式可能需要使用CSS Hack或HTML Hack方式进行微调。
//只针对IE
@media screen\0 {
/*样式*/
}<!--[if IE]> 所有的IE可识别 <![endif]-->需要说明一下，我并无IE兼容的执念，虽然IE现在已经被微软放弃了，但由于在使用360极速浏览器时候，有一个极速模式和兼容模式，切换兼容模式时就是IE模式。这里有些同学的浏览器默认设置的是兼容模式，所以我是考虑这部分访客。
所以此次开发，我不会太考虑JS脚本的IE兼容性，毕竟现在没多少人用IE了。仅考虑其余低版本浏览器（如Chrome 60）。这里使用@vitejs/plugin-legacy 插件即可兼容，此插件会为低版本浏览器添加语法相对应的polyfill。
打包之后，polyfills文件可能会比较大，但编译结果是按需加载的，所以不用考虑加载效率。况且几百K之内的大小对于现在的网络和浏览器来说，完全不必担心。若想限制polyfills文件大小，可以配置仅需要的语法。
legacy({
// 版本兼容(如原生ESM在低版本浏览器中不兼容问题)
targets: [
"defaults",
"Chrome >= 52",
"Edge >= 15",
"Firefox >= 54",
"Android >= 40",
"Safari >= 10.1",
"iOS >= 10.3",
"IE >= 11",
],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 面向IE11时需要用的插件
renderLegacyChunks: true,
polyfills: [] // 这里配置仅需要转义的语法
})由于Svelte 在运行时无虚拟Dom中间层的性能损耗，这里用起来也较Vue更轻量。
需要用到响应式渲染的内容并不太多。这里也仅用到框架的模板引擎功能。
使用框架而不直接用模板引擎的原因是：
- 一些交互功能使用框架会便于开发，更便于后期主题的功能扩展
- 便于使用ESM引入一些额外的包
- 便于使用CSS预处理器（less/sass），这个很关键
- 便于组件化以及组件复用，这个也很关键
当然，此次开发使用到Svelte可能会有很多坑，比如：
- 多入口页打包配置
- 打包结果呈现WordPress主题的php文件结构（这里是否需要手动拆分）
待我慢慢探索。
经过长期开发探索，由于wordpress需考虑到SEO，无法全部使用响应式数据填充页面，而必须使用PHP文件进行开发。再者，Svelte 是编译时框架，种种原因导致无法更好的进行开发环境预览，故放弃Svelte ，还是使用 Vue 。（2024-02-06）
最终方案：
- 放弃Vite，使用原始开发方式
- 编译和实时预览使用Node开发预览和编译程序
- css预处理使用less，less是基于Javascript的，可以在node中使用其
render函数进行程序化编译 - 放弃TS，使用ES-Module方式开发JS
- 有需要的模块如vue\axios等使用cdn链接引入
- 放弃更好的兼容性，使用更新的js语法进行开发
本文固定连接：https://code.zuifengyun.com/2023/07/3461.html，转载须征得作者授权。