跳至主要内容

借助 Git 简化升级

·阅读时长 4 分钟
Nicolas Cuillery
Zenika 的 JavaScript 顾问和培训师

升级到 React Native 的新版本一直很困难。您可能之前见过类似的情况

这些选项都不理想。覆盖文件会导致我们丢失本地更改。不覆盖则无法获取最新更新。

今天,我自豪地介绍一个帮助解决此问题的全新工具。该工具名为 react-native-git-upgrade,它在后台使用 Git,并在尽可能的情况下自动解决冲突。

用法

**要求**:Git 必须在 PATH 中可用。您的项目不必由 Git 管理。

全局安装 react-native-git-upgrade

$ npm install -g react-native-git-upgrade

或者,使用 Yarn

$ yarn global add react-native-git-upgrade

然后,在您的项目目录中运行它

$ cd MyProject
$ react-native-git-upgrade 0.38.0

注意:请勿运行“npm install”来安装 react-native 的新版本。该工具需要能够比较旧版和新版项目模板才能正常工作。只需在您的应用文件夹中运行它(如上所示),同时保留旧版本。

示例输出

您也可以在不带任何参数的情况下运行 react-native-git-upgrade 以升级到 React Native 的最新版本。

我们尝试保留您在 Android 和 iOS 构建文件中的更改,因此您无需在升级后运行 react-native link

我们设计的实现尽可能减少侵入性。它完全基于在临时目录中即时创建的本地 Git 存储库。它不会干扰您的项目存储库(无论您使用什么 VCS:Git、SVN、Mercurial……或无)。如果出现意外错误,您的源代码将被恢复。

它是如何工作的?

关键步骤是生成一个 Git 补丁。该补丁包含 React Native 模板在您的应用使用的版本和新版本之间所做的所有更改。

为了获取此补丁,我们需要从 node_modules 目录中 react-native 包中嵌入的模板生成一个应用(这些是 react-native init 命令使用的相同模板)。然后,在从当前版本和新版本的模板生成本地应用后,Git 能够生成一个适用于您的项目的补丁(即包含您的应用名称)。

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
- <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+ <key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]

现在我们需要做的就是将此补丁应用于您的源文件。虽然旧的 react-native upgrade 过程会提示您进行任何细微差异的处理,但 Git 能够使用其三方合并算法自动合并大部分更改,并最终留下我们熟悉的冲突分隔符。

    13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);

这些冲突通常易于理解。分隔符 **ours** 代表“您的团队”,而 **theirs** 可以视为“React Native 团队”。

为什么要引入一个新的全局包?

React Native 带有一个全局 CLI(react-native-cli 包),它将命令委派给嵌入在 node_modules/react-native/local-cli 目录中的本地 CLI。

如上所述,该过程必须从您当前的 React Native 版本开始。如果我们将实现嵌入到 local-cli 中,那么在使用旧版 React Native 时将无法使用此功能。例如,如果此新升级代码仅在 0.38.0 中发布,则您将无法从 0.29.2 升级到 0.38.0。

基于 Git 的升级是开发者体验的一大改进,并且让每个人都能使用它非常重要。通过使用单独的包 react-native-git-upgrade(全局安装),无论您的项目使用哪个版本的 React Native,您今天都可以使用此新代码。

另一个原因是 Martin Konicek 最近对 Yeoman wipeout 的处理。我们不想将这些 Yeoman 依赖项放回 react-native 包中,以便能够评估旧版模板以创建补丁。

试用并提供反馈

总之,我想说,享受此功能,并随时 提出改进建议、报告问题,尤其是 发送拉取请求。每个环境都略有不同,每个 React Native 项目也都不同,我们需要您的反馈才能让它对每个人都发挥作用。

感谢您!

我要感谢优秀的公司 ZenikaM6 Web(已归档),如果没有它们,这一切都将是不可能的!