Saltar al contenido

Configurar Macbook M1 para desarrollo Web y React Native – Comunidad DEV

Recientemente actualicé de Macbook Air 2017 a Macbook Pro con un chip M1. Mi Macbook Air de cuatro años se estaba rindiendo. El rendimiento para ejecutar tareas pesadas como usar el simulador de iOS al desarrollar y trabajar en aplicaciones React Native estaba disminuyendo. Hace mucho que había dejado de usar el emulador de Android y he estado usando un dispositivo Android real para realizar pruebas. Diciembre de 2020 fue el momento en que decidí que era hora de actualizar.

Tuve una larga discusión interna conmigo mismo durante casi un mes sobre si debería actualizar a M1 o seguir con chips basados ​​en Intel y gastarlos. No me malinterpretes aquí, M1 tampoco es barato, ya que hice una actualización de RAM a los límites máximos, que actualmente es de 16 GB en el modelo base. El tipo de rendimiento que esperaba después de pasar por algunas revisiones e investigaciones en línea, ha valido la pena hasta ahora (es rápido, sin duda). Lo recibí hace dos semanas al momento de escribir esta publicación y desde entonces he instalado todas las herramientas y utilidades necesarias que me ayudan a trabajar en el desarrollo web y las aplicaciones React Native.

Mi entorno local incluye actualmente:

Otras aplicaciones:

Rosetta 2

Rosetta 2 es la línea de vida que le permite ejecutar aplicaciones diseñadas para chips basados ​​en Intel que utilizan x86 arquitectura en chips basados ​​en ARM (en este caso M1). Apple proporciona esta solución en forma de emulador y no viene preinstalada. Tienes que instalarlo manualmente. Inicie la aplicación Terminal que viene preinstalada en Big Sur y deje que su primer comando a ejecutar sea:

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

Si decides no poner la bandera --agree-to-license, se le solicitará la instalación interactiva de Apple y tendrá que aceptar sus términos y condiciones de licencia para poder utilizarlo.

Mi aplicación de terminal favorita que he estado usando durante años es iTerm. Actualmente estoy usando dos versiones de iTerm en mi configuración. Uno con Rosetta 2 habilitado y el predeterminado. De esta manera, solo puedo usar el emulador Rosetta 2 cuando sea necesario. No he encontrado problemas de rendimiento con el uso de iTerm con Rosetta 2 para aplicaciones basadas en ARM.

Si desea una configuración similar, vaya a la Applications carpeta en su Macbook y duplique el iTerm solicitud.

Puede cambiar el nombre de la aplicación iTerm duplicada. Lo he renombrado a iTerm_rosetta para diferenciar entre los dos. Haga clic con el botón derecho en la aplicación duplicada y haga clic en Conseguir información. En el General marque la casilla donde dice Abrir usando Rosetta.

Ahora, si abre la segunda terminal, usará el emulador Rosetta 2 de forma predeterminada.

Otras configuraciones de perfil de iTerm que uso:

Recientemente comencé a usar la fuente Jetbrains Mono.

Para el aspecto general y la apariencia, utilizo los ajustes preestablecidos de color Dracula Pro creados por Zen Rocha.

Y mi última cosa favorita es dividir el directorio de trabajo en dos pestañas más diferentes usando Command + D para paneles horizontales. Asegúrese de tener la siguiente configuración configurada desde General> Directorio de trabajo> seleccione Configuración avanzada> haga clic en el botón Editar…> seleccione Reutilizar el directorio de la sesión anterior en Directorio de trabajo para nuevos paneles divididos.

Para el indicador de terminal, utilizo Spaceship ZSH.

El 1 de diciembre de 2020, el equipo de Homebrew hizo un anuncio oficial en su sitio web sobre el lanzamiento de la versión. 2.6.0. Los cambios más significativos, entre otros que enumeraron, fueron el soporte para macOS Big Sur, utilizando brew comandos en lugar de brew cask y comenzando a admitir macOS M1 y chips Apple Silicon o basados ​​en ARM.

Ésta es la parte complicada. En el momento de escribir esta publicación, es posible que algunas fórmulas que le gusten usar no funcionen. Es mejor rastrear el problema de GitHub aquí en el repositorio oficial de Brew, que es mantenido por su equipo. Estoy agradecido con todo el equipo detrás de Homebrew por hacerlo accesible y aprecio su arduo trabajo para hacer que las cosas funcionen en tan poco tiempo.

Usando la terminal, puede instalar Homebrew ejecutando el comando predeterminado:

/bin/bash -c
"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Recientemente descubrí que se puede instalar de forma nativa en una Macbook. También puede ejecutar el comando anterior en un entorno de terminal nativo sin utilizar el entorno de terminal de Rosetta.

Instalé Git usando el comando brew: brew install git.

Para autenticar GitHub que se utilizará desde el entorno de la terminal, le recomiendo que consulte el documento oficial sobre la creación y el acceso a tokens personales.

Después de instalar Git, para mí, el siguiente paso es instalar la aplicación Xcode desde la App Store de Apple.

Después de instalarlo, asegúrese de abrirlo por primera vez, desde la barra de menú, abra Xcode> Preferencias> Ubicaciones y asegúrate de que Herramientas de línea de comandos apunte hacia la aplicación Xcode actual.

Node.js

En las computadoras portátiles basadas en silicona de Apple, no se admiten las versiones de Node.js a partir de la 14 e inferior. Tendrás que instalar la versión 15.x.x. o mayor (dependiendo de cuando estés leyendo esta publicación).

Al principio, instalé Node.js usando nvm sin usar Homebrew. Ejecute lo siguiente curl comando para instalar nvm primero:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

Después de instalarlo, agregue lo siguiente al .zshrc archivo y asegúrese de ponerlos después de obtener Oh My Zsh:

# after sourcing Oh My Zsh

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"

Para verificar eso nvm está instalado, reinicie la consola o la sesión zsh (ejecute: source .zshrc) y ejecute el siguiente comando para verificar su versión actual:

nvm --version

# output
0.37.2

Luego ejecuta el comando nvm install node.

Alternativamente, también puede instalar Node.js usando el instalador oficial para la versión actual a la que luego pasé.

ZSH y Oh My Zsh

ZSH es el shell predeterminado con el que viene macOS Big Sur. Me gusta usar Oh My Zsh para administrar la configuración de ZSH y algunos complementos y un tema para embellecer el terminal.

Para instalar, ejecute el siguiente comando:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/
robbyrussell/oh-my-zsh/master/tools/install.sh)"

Después de la instalación, asegúrese de que el archivo zshrc está exportando la siguiente ruta:

# Path to your oh-my-zsh installation.
export ZSH="/Users/<USERNAME>/.oh-my-zsh/oh-my-zsh.sh"

Lo primero que me gusta hacer después de configurar la configuración mínima de ZSH es instalar un complemento llamado
resaltado de sintaxis zsh. Proporciona resaltado de sintaxis para el shell ZSH. Ejecute la siguiente serie de comandos en la ventana de terminal:

cd $HOME/.oh-my-zsh/oh-my-zsh.sh/plugins

# OR depending on the /plugins folder in your local setup
cd $HOME/.oh-my-zsh/plugins

# then clone the git repository
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highligh
ting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

En pocas palabras, esta es mi configuración inicial de ZSH en el archivo ~/.zshrc expediente:

# Path to your oh-my-zsh installation.
export ZSH="/Users/amanhimself/.oh-my-zsh/oh-my-zsh.sh"

export PATH=/opt/homebrew/bin:$PATH

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

ZSH_THEME="spaceship"


plugins=(
  git
  node
  vscode
  zsh-syntax-highlighting
)

source $ZSH/oh-my-zsh.sh
source /Users/[USER_NAME]/.oh-my-zsh/oh-my-zsh.sh/plugins/
zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

Después de instalar el complemento de resaltado de sintaxis, comienza a reconocer los comandos:

VSCode aún no tiene compatibilidad nativa con M1. Sin embargo, la edición VS Code Insiders sí admite chips ARM. Descarga el instalador desde aquí.

Todavía estoy usando la misma configuración de VSCode de mi configuración anterior:

{
  "editor.tabSize": 2,
  "editor.fontSize": 13,
  "editor.fontFamily": "Jetbrains Mono, 'Courier New', monospace",
  "workbench.colorTheme": "morgan.codes",
  "workbench.iconTheme": "material-icon-theme",
  "editor.minimap.enabled": false,
  "editor.cursorBlinking": "expand",
  "editor.fontLigatures": false,
  "editor.wordWrap": "on",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.tabCompletion": "on",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "workbench.editor.enablePreview": false,
  "window.restoreFullscreen": true,
  "window.title": "${activeEditorShort}${separator}${rootName}",
  "search.exclude": {
    "**/node_modules": true,
    "**/*.code-search": true,
    "ios/": true,
    "android/": true,
    "dist/": true,
    "yarn.lock": true,
    "package-lock.json": true,
    ".gitignore": true,
    ".expo": true,
    ".vscode": true
  },
  "window.zoomLevel": 0.3,
  "explorer.confirmDelete": false,
  "workbench.editor.tabSizing": "shrink",
  "breadcrumbs.enabled": true,
  "explorer.openEditors.visible": 0,

  // Integrated Terminal
  "terminal.integrated.shell.osx": "zsh",
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.fontSize": 12,

  // Extensions
  "extensions.autoUpdate": false,
  "bracket-pair-colorizer-2.colors": ["#F72585", "#94b4a4", "#a3d8f4"],
  "highlight-matching-tag.styles": {
    "opening": {
      "name": {
        // surround is border
        "surround": "yellow"
      }
    }
  },
  "npm-intellisense.importES6": true,
  "typescript.suggest.paths": false,
  // Prettier
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.arrowParens": "avoid",
  "prettier.proseWrap": "preserve",
  "prettier.quoteProps": "as-needed",
  "prettier.jsxBracketSameLine": false,
  "prettier.bracketSpacing": true,
  "prettier.tabWidth": 2,

  // Macros
  "macros": {
    "collapseAndClose": [
      "workbench.files.action.collapseExplorerFolders",
      "workbench.action.closeAllEditors"
    ]
  },

  // Markdown
  "[markdown]": {
    "editor.quickSuggestions": true
  },

Paquetes de NPM globales que utilizo

Para el desarrollo nativo de React

Para obtener más instrucciones sobre cómo configurar el entorno de desarrollo para React Native, siga la documentación oficial aquí.

Para los sitios de Gatsby

Si tiene un proyecto paralelo que usa GatsbyJS, es probable que se enfrente al problema https://github.com/lovell/sharp/issues/2460. Gatsby usa una biblioteca basada en C llamada Sharp que debe compilarse bajo la arquitectura ARM. No funcionó para mí y la única forma que pude resolver fue instalar vips fórmulas de Homebrew como se menciona en el problema de GitHub.

Esa es la configuración que ahora uso para mi JavaScript, Node.js, React y React Native. Creo que es una buena máquina. Con suerte, M1 es solo el comienzo de una nueva era de computadoras potentes para el uso diario.

🤔 Lo único que me queda es encontrar una manera de transferir todos los botines / pegatinas de mi Macbook Air a Pro. Extraño tenerlos en este. Para mí son recuerdos y vivencias.

🥲 Si conoces una forma, ¡házmelo saber!

Es otro enlace útil que encontré en algún momento para comprobar qué es compatible para trabajar en chips Apple Silicon de forma nativa o usando Rosetta o no optimizado en absoluto.

Este contenido se publicó originalmente aquí.