web-dev-qa-db-fra.com

React mise à niveau native de babel 6 vers babel 7

Quelles seraient les étapes pour passer de babel 6 à babel 7 un projet réactif natif 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 étapes devez-vous suivre pour effectuer cette mise à jour? À quoi devraient ressembler les nouvelles dépendances?

Il n'est pas très clair pour moi (après avoir lu le 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 que dans devDependencies.

De plus, il n'est pas très clair pour moi quelle est la différence entre babel 6 et babel 7 concernant ce qui se passe avec le code JS dans un projet réactif.

Veuillez ne pas répondre avec seulement des liens vers babel doc ou vers le journal des modifications 0.57 natif.

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.

react-nativebabeljs
12
Florin Dobre

Réponse courte:

run npx babel-upgrade

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

Réponse longue :

Pour RN 0.57.x après avoir lu les documents babel et babel-upgrade, j'ai réalisé qu'il suffisait d'avoir toutes les anciennes dépendances 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 et babel-upgrade (npx est déjà inclus dans les versions npm> = 5.2.0) Si vous avez des versions npm plus anciennes, vous devez installer npx globalement.

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

2) J'ai exécuté npx babel-upgrade ( sans le --write option) pour voir comment la mise à niveau affectera mes packages.json deps)

3) J'ai exécuté npx babel-upgrade --write

4) J'ai défini la version RN sur 0.57.1 ​​et changé la dépendance 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.

À présent 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 sais pas si toutes les nouvelles dépendances ajoutées par gradle-upgrade sont nécessaires mais le projet se construit et fonctionne correctement pour les deux Android et ios.

Si vous trouvez une meilleure solution ou des améliorations pour cette mise à jour de babel, veuillez ajouter un commentaire ou ajouter une nouvelle réponse, je serai heureux de mettre à jour ma réponse ou d'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 dépêches babel. J'ai remarqué que cela créait un nouveau projet avec une commande react-native init.

Mon fichier package.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", 
   // ...
  }

}

REMARQUE: Pour IOS: j'ai pu le construire en IOS sans aucun react/react-native deps dans le fichier pod. J'ai ajouté/re-ajouté ceux à l'intérieur de la section Frameworks et bibliothèques liés

6
Florin Dobre

Utilisation babel-upgrade.

Vous pouvez essayer d'utiliser babel-upgrade afin de mettre à jour automatiquement 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 changement non organisé) et d'exécuter simplement la commande suivante:

npx babel-upgrade --write

Cela mettra à jour votre package.json et ton .babelrc fichiers avec les versions et packages Babel corrects.

Le --write commande 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 que vous puissiez revoir les modifications avec git diff. Si vous omettez --write il affichera simplement les modifications souhaitées dans la console.

Vous pouvez voir plus d'informations sur https://github.com/babel/babel-upgrade .

2
Joshua Pinter