Mise à niveau de babel 6 à babel 7 pour React native

Question

Quelles sont les étapes à suivre pour mettre à niveau de babel 6 à babel 7 un projet react-native existant ?

Ce sont les anciennes dépendances :

 "dependencies": {
    .........
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "prop-types": "^15.5.10",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-redux": "5.0.7",
    "redux": "^4.0.0",
    "redux-actions": "^2.6.1",
    "redux-mock-store": "^1.5.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.1.0",
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-flowtype": "^2.46.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "^7.4.0",
    "gulp": "^3.9.0",
    "gulp-eslint": "4.0.2",
    "gulp-mocha": "6.0.0",
    "jest": "^23.5.0",
    .....
  },

Quelles sont les étapes à suivre pour effectuer cette mise à jour ? A quoi doivent ressembler les nouvelles dépendances ?

Il n'est pas très clair pour moi (après avoir lu la doc babel) ce que je dois faire pour faire cette mise à jour, les commandes à exécuter et ce qui doit être ajouté dans les dépendances et ce qui dans devDependencies.

De plus, je ne vois pas très bien quelle est la différence entre babel 6 et babel 7 en ce qui concerne ce qui se passe avec le code JS dans un projet react-native.

S'il vous plaît, ne répondez pas seulement avec des liens vers la doc de babel ou vers le journal des changements de react-native 0.57.

J'aurais besoin d'au moins quelques étapes de base pour effectuer cette mise à niveau et d'un exemple de package.json d'un projet RN basé sur babel 7.

Answer 1

Réponse courte :

run npx babel-upgrade

(alors vous pouvez jeter un coup d'œil dans package.json pour vérifier ce qui a changé)

Réponse longue :

Pour RN 0.57.x, après avoir lu les docs babel et babel-upgrade, j'ai réalisé qu'il était suffisant d'avoir toutes les anciennes dépendances de babel dans devDependencies pour mon projet :

"dependencies": {
    .........
    "react": "16.3.1",
    "react-native": "0.55.4",
 },

"devDependencies": {
   "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "react-native": "0.55.4",
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",        
    .....
  },

1) J'ai utilisé npx y babel-upgrade ( npx est déjà inclus dans npm versions >= 5.2.0) Si vous avez des versions plus anciennes npm vous devez installer npx globalement.

npx vous permet d'exécuter babel-upgrade sans l'installer localement.

2) J'ai couru npx babel-upgrade ( sans le --write option ) pour voir comment la mise à niveau affectera mon paquet.json deps)

3) J'ai couru npx babel-upgrade --write

4) J'ai mis la version RN à 0.57.1 et changé la dépendance de babel-preset de "babel-preset-react-native": "^5" à "metro-react-native-babel-preset": "^0.45.0" et .babelrc configuration à :

{
    "presets": ["module:metro-react-native-babel-preset"]
}

comme indiqué dans les instructions du journal des modifications RN.

Ahora package.json ressemble à ça :

  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.1",
    .......
  }

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    .....

}

Je ne suis pas sûr que toutes les nouvelles dépendances ajoutées par le programme gradle-upgrade sont nécessaires mais le projet se construit et fonctionne correctement pour Android et ios.

Si vous trouvez une meilleure solution ou des améliorations pour cette mise à jour de babel, veuillez ajouter un commentaire ou une nouvelle réponse, je serai heureux de mettre à jour ma réponse ou d'en accepter une nouvelle meilleure.

Sources :

https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057

https://github.com/babel/babel-upgrade

Pour RN 0.58.6 J'ai remarqué que je n'ai pas besoin d'autant de deps babel. J'ai remarqué cela en créant un nouveau projet avec un react-native init commandement.

Mon paquet.json ressemble maintenant à ceci :

{
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.6",
    // ....

  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.6.3",
    // .... 

  },
  "jest": {
    "preset": "react-native", 
   // ...
  }

}

NOTE : Pour IOS : J'ai pu le construire dans IOS sans aucun problème. react/react-native deps dans le fichier pod. Je les ai ajoutés/réajoutés dans Cadres et bibliothèques liés section

Answer 2

Utilisez babel-upgrade .

Vous pouvez essayer d'utiliser babel-upgrade afin de mettre automatiquement à jour vos dépendances Babel.

Il est très facile à utiliser, même sans l'installer globalement.

Je recommande d'avoir un répertoire de travail propre (pas de changements non indexés) et d'exécuter simplement la commande suivante :

npx babel-upgrade --write

Cela mettra à jour votre package.json et votre .babelrc avec les versions et les paquets Babel corrects.

El --write indique simplement à l'outil d'enregistrer les modifications sur le disque. C'est pourquoi j'ai suggéré d'avoir un répertoire de travail propre afin de pouvoir revoir les changements avec la commande git diff . Si vous omettez --write cela ne fera qu'afficher les changements souhaités dans la console.

Vous pouvez trouver plus d'informations à l'adresse suivante https://github.com/babel/babel-upgrade .

Answer 3

Pour tous ceux qui rencontrent ce problème en 2021 : npm install --save-dev @babel/core @babel/cli