vite打包后的文件提供传统浏览器兼容性支持

最新推荐文章于 2024-08-08 15:35:59 发布

fighting_sunnyGirl

最新推荐文章于 2024-08-08 15:35:59 发布

阅读量1.1w

点赞数 2

分类专栏： vite @vitejs/plugin-legacy 文章标签：前端框架

本文链接：https://blog.csdn.net/fighting_sunnyGirl/article/details/119727647

版权

本文介绍了如何使用Vite插件为不支持Native ESM的旧版浏览器提供兼容性支持。通过配置vite.config.js并安装特定插件，打包后的文件将包含以'legacy'命名的文件，并在HTML中利用'type="module"'和'type="nomodule"'特性，动态引入适合不同浏览器的脚本，确保在Edge和IE11等传统浏览器中正常运行。

摘要由CSDN通过智能技术生成

vite 为打包后的文件提供传统浏览器兼容性支持

安装主要插件
```
yarn add @vitejs/plugin-legacy -D
```

Vite 的默认浏览器支持基线是Native ESM。此插件为不支持本机 ESM 的旧版浏览器提供支持。

*默认情况下，此插件将：

 *为最终包中的每个块生成相应的遗留块，使用@babel/preset-env 转换并作为SystemJS 模块发出（仍然支持代码拆分！）。

 *生成一个包含 SystemJS 运行时的 polyfill 块，以及由指定的浏览器目标和包中的实际使用情况确定的任何必要的 polyfill 。

 *将<script nomodule>标签注入生成的 HTML 以有条件地仅在没有原生 ESM 支持的浏览器中加载 polyfills 和遗留包。

 *注入import.meta.env.LEGACYenv 变量，它只会出现true在旧版生产版本中，以及false在所有其他情况下。

配置vite.config.js

export default defineConfig({
	plugins:[
	  legacy({
      targets: ['> 1%, last 1 version, ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
    }),
	]
})