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

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时需要此插件
      }),
  	]
  })
  

• 打包出来的产物如下
  *在build包中多了一些以legacy为文件名称的文件
  
  *html中也新增了写脚本，可以很直观的看见type=“module”,type=“nomodule”,以此根据浏览器的支持度动态引入响应的脚本实现支持
  

• 在支持Native ESM的浏览器中，最终引入如下
  

• 在不支持本机 ESM 的旧版浏览器edg,.IE11