喵.png

前言：卖报卖报，热腾腾新鲜出炉的~👻，据悉，11月16日，Vite发布了5.0版本，并且使用了rollup 4 ，npm 下载量也日益翻倍增长，一直以来，webpack位列老大之位，经过千锤百炼的版本迭代，拥有（后宫佳丽三千🤔，呸，跑题了）丰富的plugin，应对不同的场景基本都有相应的解决方案，为什么大家还会去选择Vite呢？

更新了哪些呢

• Vite

  1. Node.js 支持
     💫 Vite 不再支持 Node.js 14 / 16 / 17 / 19，因为它们已经到了 EOL。现在需要 Node.js 18 / 20+。

  2. Rollup 4
     💫 导入断言（assertions 属性）已被重命名为导入属性（attributes 属性）。
💫 不再支持 Acorn 插件。
💫 对于 Vite 插件，this.resolve 的 skipSelf 选项现在默认为 true。
💫 对于 Vite 插件，this.parse 现在只支持 allowReturnOutsideFunction 选项。
💦 如果你正在使用 TypeScript，请确保将 moduleResolution: 'bundler'（或 node16/nodenext）设置为 Rollup 4 需要它。或者你可以设置 skipLibCheck: true。

  3. 废弃 CJS Node API
     💦 CJS 的 Node API 已经被废弃。当调用 require('vite') 时，将会记录一个废弃警告。你应该更新你的文件或框架来导入 Vite 的 ESM 构建。

     • 在一个基础的 Vite 项目中，请确保：
       💫 vite.config.js 配置文件的内容使用 ESM 语法。
💫 最近的 package.json 文件中有 "type": "module"，或者使用 .mjs/.mts 扩展名，例如 vite.config.mjs 或者 .vite.config.mts。
     • 对于其他项目，有几种常见的方法：
       💫 配置 ESM 为默认，如果需要则选择 CJS： 在项目 package.json 中添加 "type": "module"。所有 *.js 文件现在都被解释为 ESM，并且需要使用 ESM 语法。你可以将一个文件重命名为 .cjs 扩展名来继续使用 CJS。
💫 保持 CJS 为默认，如果需要则选择 ESM： 如果项目 package.json 没有 "type": "module"，所有 *.js 文件都被解释为 CJS。你可以将一个文件重命名为 .mjs 扩展名来使用 ESM。
💫 动态导入 Vite： 如果你需要继续使用 CJS，你可以使用 import('vite') 动态导入 Vite。这要求你的代码必须在一个 async 上下文中编写，但是由于 Vite 的 API 大多是异步的，所以应该还是可以管理的。

未完待续...