Actualizaciones más sencillas gracias a Git

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Actualizar a nuevas versiones de React Native siempre ha sido complicado. Probablemente te has encontrado con algo así antes:

Ninguna de estas opciones es ideal. Si sobrescribimos el archivo, perdemos nuestros cambios locales. Si no sobrescribimos, no obtenemos las últimas actualizaciones.

Hoy me complace presentar una nueva herramienta que ayuda a resolver este problema. Se llama react-native-git-upgrade y utiliza Git en segundo plano para resolver conflictos automáticamente siempre que sea posible.

Uso

Requisito: Git debe estar disponible en el PATH. Tu proyecto no necesita estar gestionado por Git.

Instala react-native-git-upgrade globalmente:

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

o usando Yarn:

$ yarn global add react-native-git-upgrade

Luego, ejecútalo dentro del directorio de tu proyecto:

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

Nota: No ejecutes 'npm install' para instalar una nueva versión de react-native. La herramienta necesita poder comparar la plantilla de proyecto antigua y la nueva para funcionar correctamente. Simplemente ejecútala dentro de la carpeta de tu aplicación como se muestra arriba, manteniéndote en la versión anterior.

Ejemplo de salida:

También puedes ejecutar react-native-git-upgrade sin argumentos para actualizar a la última versión de React Native.

Intentamos preservar tus cambios en los archivos de compilación de Android e iOS, por lo que no necesitas ejecutar react-native link después de una actualización.

Hemos diseñado la implementación para que sea lo menos intrusiva posible. Se basa completamente en un repositorio Git local creado sobre la marcha en un directorio temporal. No interferirá con tu repositorio de proyecto (sin importar qué VCS uses: Git, SVN, Mercurial... o ninguno). Tus fuentes se restauran en caso de errores inesperados.

¿Cómo funciona?

El paso clave es generar un parche de Git. Este parche contiene todos los cambios realizados en las plantillas de React Native entre la versión que usa tu aplicación y la nueva versión.

Para obtener este parche, necesitamos generar una aplicación a partir de las plantillas incluidas en el paquete react-native dentro de tu directorio node_modules (estas son las mismas plantillas que usa el comando react-native init). Luego, después de generar las aplicaciones nativas desde las plantillas tanto en la versión actual como en la nueva, Git puede producir un parche adaptado a tu proyecto (es decir, que incluye el nombre de tu aplicación):

[...]

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>
[...]

Ahora solo necesitamos aplicar este parche a tus archivos fuente. Mientras que el antiguo proceso react-native upgrade te pedía confirmación para cada pequeña diferencia, Git puede fusionar automáticamente la mayoría de los cambios usando su algoritmo de fusión de 3 vías, dejándonos eventualmente con delimitadores de conflicto familiares:

    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/**",
        );

Estos conflictos suelen ser fáciles de entender. El delimitador ours representa a "tu equipo" mientras que theirs puede verse como "el equipo de React Native".

¿Por qué introducir un nuevo paquete global?

React Native incluye una CLI global (el paquete react-native-cli) que delega comandos en la CLI local integrada en el directorio node_modules/react-native/local-cli.

Como mencionamos anteriormente, el proceso debe iniciarse desde tu versión actual de React Native. Si hubiéramos integrado la implementación en la CLI local, no podrías disfrutar de esta característica al usar versiones antiguas de React Native. Por ejemplo, no podrías actualizar de la versión 0.29.2 a la 0.38.0 si este nuevo código de actualización solo se hubiera lanzado en la 0.38.0.

La actualización basada en Git es una gran mejora en la experiencia del desarrollador y es importante ponerla a disposición de todos. Al usar un paquete separado react-native-git-upgrade instalado globalmente, puedes utilizar este nuevo código hoy sin importar qué versión de React Native esté utilizando tu proyecto.

Otra razón es la reciente eliminación de Yeoman por Martin Konicek. No queríamos volver a incluir esas dependencias de Yeoman en el paquete de react-native para poder evaluar la plantilla antigua y así crear el parche.

Pruébalo y danos tu opinión

Para concluir, me gustaría decir: disfruta de esta característica y no dudes en sugerir mejoras, informar sobre problemas y especialmente enviar pull requests. Cada entorno es un poco diferente y cada proyecto de React Native es único, por lo que necesitamos tu opinión para que esto funcione bien para todos.

¡Gracias!

Me gustaría agradecer a las increíbles empresas Zenika y M6 Web (archivado) sin las cuales nada de esto habría sido posible!