web-dev-qa-db-fra.com

Comment passer à babel 7

J'ai essayé de mettre à niveau Webpack et babel à 4, 7 respectivement, mais je n'ai pas pu le faire fonctionner. De plus, le document officiel n'aide pas beaucoup avec la mise à niveau

Je reçois le problème suivant

erreur du compilateur: ERREUR dans le module '@ babel/core' @ multi main introuvable

dépendances que j'utilise:

"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

Veuillez me faire savoir si plus de détails sont nécessaires.

reactjsbabeljsbabelwebpack-4babel-loader
7
Hemadri Dasari

Babel a changé le nom du module babel-core à @ babel/core . Exécutez simplement npm install @babel/core. Cela installera la dernière version de Babel core.

La plupart des packages de Babel ont été renommés pour suivre le modèle @babel/PACKAGE_NAME. Donc, si vous souhaitez mettre à niveau, modifiez les noms des packages pour suivre le modèle et exécutez npm install.

Pour passer à Babel 7, vous pouvez utiliser ceci guide de migration .

8
illiteratewriter

Utilisez babel-upgrade

Testé sur [email protected] , [email protected] et [email protected]

Vous pouvez utiliser le script suivant. (npx sur le nœud 5+ uniquement)

npx babel-upgrade --write

L'indicateur --write écrit les mises à jour dans vos packages.json et .babelrc.

Vous vous retrouverez avec les modifications suivantes à package.json:

"devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-private-methods": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0"
}

. babelrc

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    [
      "@babel/plugin-proposal-class-properties"
    ],
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-private-methods"
    ]
  ]
}

Parmi les plugins ci-dessus, vous avez besoin de @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods pour que les propriétés privées fonctionnent correctement si vous choisissez de les implémenter.

Si vous utilisez eslint, n'oubliez pas de définir votre analyseur comme babel-eslint comme dans votre fichier . Eslintrc:

{
    "parser": "babel-eslint"
}
18
Priyesh Diukar

Vous pouvez utiliser babel-upgrade pour une mise à niveau fluide.

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

Vous pourriez avoir besoin de npm Prune après cela afin d'éliminer les paquets obsolètes dans node_modules.

MODIFIER:

Lorsque j'ai essayé babel-upgrade, la configuration de babel et webpack n'a pas été modifiée. j'ai donc dû le changer manuellement. Voici l'exemple.

.babelrc

"presets": ["@babel/env", "@babel/react"]

config webpack

loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/react']}
4
ohkts11