一路升级一路坑——两年前 Vue 项目升级血泪史

今天我们来聊聊两年前我负责的一次 Vue 项目升级之旅。从 Vue2 到 Vue3，从 Webpack4 到 Webpack5，从 Babel7 到 Babel8，再到 eslint 和 husky 的配置，一路走来真的是“一路升级一路坑”。

Vue 配置

Vue2 升级到 Vue3 最大的变化之一就是 composition API 的引入。composition API 是一种新的 API，它允许我们在组件中使用更具可读性和可重用性的代码。

我们项目中使用了大量的 mixin，在升级时需要将它们转换为 composition API 的形式。这花了一些时间，但也让我们的代码变得更加清晰和可维护。

Webpack 配置

Webpack4 升级到 Webpack5 最大的变化之一就是对 Tree Shaking 的改进。Tree Shaking 是一种优化技术，它可以移除代码中未使用的部分，从而减小 bundle 的大小。

Webpack5 中的 Tree Shaking 比 Webpack4 更加激进，这意味着它可以移除更多未使用的代码。这给我们带来了一个问题：一些我们认为会被使用的代码被移除了。

解决这个问题的办法是显式地将这些代码标记为“已使用”。我们可以通过在代码中添加 /*#__PURE__*/ 注释来实现这一点。

Babel 配置

Babel7 升级到 Babel8 最大的变化之一是对 preset-env 的改进。preset-env 是一个 Babel 预设，它可以自动检测目标浏览器的版本并使用相应的语法。

Babel8 中的 preset-env 更加智能，它可以检测到更多的浏览器版本，并且还可以使用更新的语法特性。这给我们带来了一个问题：一些我们使用的语法特性在某些浏览器版本中不受支持。

解决这个问题的办法是显式地指定目标浏览器的版本。我们可以通过在 .babelrc 文件中添加 targets 字段来实现这一点。

eslint 配置

eslint 是一个 JavaScript 代码检查工具，它可以帮助我们确保代码的风格和质量。

在升级到 eslint 最新版本时，我们遇到了一个问题：一些我们使用的规则不再被支持。这迫使我们更新我们的 .eslintrc 文件以使用新的规则。

husky 配置

husky 是一个 Git 钩子工具，它可以帮助我们在提交代码之前自动运行某些任务，例如 lint 和测试。

在升级到 husky 最新版本时，我们遇到了一个问题：一些我们使用的钩子不再被支持。这迫使我们更新我们的 .huskyrc 文件以使用新的钩子。

总结

Vue 项目的升级之旅虽然一路坎坷，但最终还是顺利完成了。升级过程中遇到的问题都得到了解决，我们的代码也变得更加现代化和可维护。

希望这篇文章对其他开发者有所帮助，祝大家升级顺利！