如何优雅地升级一个Creator 2.x 项目到 3.6.2 ？

最近，我将之前用 Cocos Creator 2.x 写的一个微信小游戏《球球要回家》移植到了 Cocos Creator 3.6.2 上。

编程语言也从 JavaScript 迁移到了 TypeScript，并成功上线微信小游戏。

不过在升级过程中，也踩到不少坑。

一是如何将 JS 代码高效地翻译成 TS 代码。

另外是，我在使用 Creator 3.6.2 自带的 2.x 项目升级工具存在 BUG，差点让我放弃升级。

不过还好，遇到的问题通过 Cocos 论坛、文档都能解决，在此做个记录，希望对你也有所帮助。

1. 升级项目到 2.4.x 引擎版本

因为 Creator 3.x 已经不在支持 JavaScript 语言，而且 2.4.x 最新版本的 API 接口与 3.x相近。

所以，我的策略是首将代码移植到 2.4.x TypeScript 上。

这一步，主要是解决一些废弃 API 的问题。

在 2.4.10 上，废弃 API 它不会报错，但会以警告的方式提示你。

据了解 95% 的 2.4.x 以下的项目，升 2.4.5+ 是可以平滑升级的。

2. JS转TS脚本

这一步是个体力活，一是对将 JS 脚本翻译为 TS 脚本，二是将新的 TS 脚本重新挂载节点。

我的做法是，比如：看到有个脚本为：GameScene.js，先在它旁边生成一个 GameSceneTS.ts 照着 JS 代码逻辑，按 TS 语法重写一遍代码。

虽然这是个体力活，但是在 VSCode 中写 TS 代码还是很享受的，智能提示非常的方便。

3. 升级项目引擎到 3.6.x

重点来了，这一步需要使用 Creator 3.x 提供的升级工具来升级项目。

使用升级工具，我们可以不必重新去编辑游戏场景和预制体，重新去挂载脚本，能省去不少时间。

新建一个 Creator 3.x 工程，从编辑器主菜单上文件→导入 Cocos Creator 2.x 项目，看下图：

浏览需要升级的 2.x 工程目录，会弹出下面这样一个面板：

注意：这里有一个坑点！我最初在导入球球要回家 2.4.10 工程后发现，场景中的 Button 按钮点不动。

为了排除是因为脚本引起的问题，我使用 2.4.10 重新建了一个 Hello World 工程，添加上 Button 按钮，再导入 3.6.2 依然有这个问题，

试了多次无解，我再停下来看导入面板上的说明，打开一个 Github 仓库，是这个 2.x 导入工具的插件最新版本。

看 README 中的更新说明，正好解决了按钮不能点击的问题，以及其他 BUG 的修复。

果断下载插件安装上，再次尝试使用 Hellow World 工程导入 3.x 引擎 Button 点击问题解决！

4. 升级 3.x 脚本代码

UI 完美再现......OK

组件脚本节点绑定在......OK

组件属性、节点引用、组件方法调用一切 OK！

但是，这时点击游戏中的按钮是没有反应的，看代码如下：

从上图可以看到，升级工具将所有代码函数体全部注释起来了，现在要做的就是将所有函数体一个个地放开。

在 2.x 时使用的 cc.xxx 这种写法不能再用了，必须在脚本顶部做导入模块导入：

//从 cc 模块中解构出 Node、Sprite 变量

import { Node, Sprite } from 'cc'

在使用 VSCode 编写代码时，并不需要我们手动一个个敲 import 引入的模块，编辑器会自动添加，看下面：

小结

从 Creator 2.x 移植 3.x 的整体过程，主要为下面四步：

升级项目到 2.4.10 或最新版；
移植脚本到 TypeScript；
在 Creator 3.x 中使用 2.x 项目导入工具（注意使用github上的最新版本）；
修改 3.x 项目中不兼容 2.x 的相关接口代码。

后续我还会有更多 Creator 2.x 升级 3.x 的经验分享，如果本文对你有用，感谢点赞留言！

更多精彩请关注Creator星球游戏开发社区