默认模版vite打包的polyfill兼容性配置建议?

[yoyo837]

通过 npm create quarkc@latest 创建的初始项目是 vite 的, 最低兼容是支持 Native ESM, native ESM dynamic import, and import.meta 的浏览器, 是大于61的, 且, quarkc 申明的兼容性是67也大于61,

那么, 如果想要支持到61, 是不是只能加 @vitejs/plugin-legacy? 是否推荐做法? 或者有更好的建议?

[yoyo837]

加了@vitejs/plugin-legacy 但 @vitejs/plugin-legacy does not support library mode, 我懵了, build 出来的 lib 预期是script 直接引用的吧? 难道再二次 build?

[sanqi-med]

那么, 如果想要支持到61, 是不是只能加 @vitejs/plugin-legacy? 是否推荐做法? 或者有更好的建议?

web components 的完全兼容是从67开始， 61部分能力不支持，所以你即使引入 plugin 也做不到完全支持 web componnets。只能做到语法上的降级支持

[yoyo837]

那重新假设: 比如我想兼容80+用户, 我使用了一个82才支持的API, 那么81的用户肯定用不了, 需要 polyfill, 那 @vitejs/plugin-legacy 又不支持 lib 模式, 有什么建议吗?

[dyf19118]

那实际上你需要的不是@vitejs/plugin-legacy插件，这插件是为应用模式打包（也就是默认模式）服务的——用到了你说的Native ESM等特性。而lib模式打出来的包因为没有HTML入口，所以自然不需要去处理legacy插件提供的原生ESM转SystemJS功能。当前模板lib模式打出来的包只是ES module和UMD module，你要做的事情仅仅是使用rollup的babel插件去做代码降级。消费这个包的应用理论上如果要支持ES5环境的话自身需要去做代码降级处理。

[yoyo837]

那实际上你需要的不是@vitejs/plugin-legacy插件，这插件是为应用模式打包（也就是默认模式）服务的——用到了你说的Native ESM等特性。而lib模式打出来的包因为没有HTML入口，所以自然不需要去处理legacy插件提供的原生ESM转SystemJS功能。当前模板lib模式打出来的包只是ES module和UMD module，你要做的事情仅仅是使用rollup的babel插件去做代码降级。消费这个包的应用理论上如果要支持ES5环境的话自身需要去做代码降级处理。

也就是说:

1. 如果我要在其他应用中依赖二次打包, 应该把lib包含进应用的编译范围;
2. 如果我要直接在html使用, 应该使用rollup的babel插件去做代码降级;

这样理解对吧?

我目前是第二种情况.

[dyf19118]

那实际上你需要的不是@vitejs/plugin-legacy插件，这插件是为应用模式打包（也就是默认模式）服务的——用到了你说的Native ESM等特性。而lib模式打出来的包因为没有HTML入口，所以自然不需要去处理legacy插件提供的原生ESM转SystemJS功能。当前模板lib模式打出来的包只是ES module和UMD module，你要做的事情仅仅是使用rollup的babel插件去做代码降级。消费这个包的应用理论上如果要支持ES5环境的话自身需要去做代码降级处理。

也就是说:

1. 如果我要在其他应用中依赖二次打包, 应该吧lib包含进应用的编译范围;
2. 如果我要直接在html使用, 应该使用rollup的babel插件去做代码降级;

这样理解对吧?

我目前是第二种情况.

✅ 你可以试试

针对case1. 在你的应用工程内配置babel并把node_modules包一并处理 针对case2. 在包工程内配置babel

[yoyo837]

好的, 我试试.