web-dev-qa-db-fra.com

Vous passez à Babel-loader 8 à partir de 7? Que dois-je changer?

J'essaie de passer de 7 à la version 8. Mais je rencontre quelques erreurs.

Je pense que je dois mettre à jour certaines choses, mais je ne sais pas quoi

C'est ce que j'ai pour mes packages (j'ai supprimé les plugins qui n'ont aucun rapport avec mon problème)

 "dependencies": {
    "babel-plugin-emotion": "^9.2.5",
    "babel-polyfill": "^6.26.0",
    "http-proxy-middleware": "^0.18.0",
    "koa-connect": "^2.0.1",
    "koa-router": "^7.4.0",
    "koa2-connect-history-api-fallback": "0.0.6",
    "npm": "^6.1.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-emotion": "^9.2.5",
    "react-responsive-modal": "^3.3.0",
    "react-router-dom": "^4.2.2",

  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mobx-react-router": "^4.0.4",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }

J'ai dans mon .baelrc

{
  "presets": ["env", "react"],
   "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "emotion"]
}

Je vois que j'ai besoin de mettre à jour des trucs comme babel-core, preset-env, preset-react mais je ne sais pas quoi d'autre.

Je reçois cette erreur

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

Modifier mes nouvelles configurations (cela semble maintenant fonctionner)

.babelrc

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-object-rest-spread",
    "transform-class-properties"
  ]
}

package.json

  "dependencies": {
    "@babel/polyfill": "^7.0.0",
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
  }
javascriptnpmbabel
6
chobo2

Tous les plugins sont déplacés vers @babel scope avec Babel 7. Pour mettre à jour votre package.json, vous devez renommer tous vos plugins et presets en conséquence, en utilisant la version ^ 7.0.0.

Vous pouvez trouver tous les plugins officiels ici .

Si vous ouvrez un plugin qui vous intéresse, vous verrez que tous sont renommés, par exemple: @babel/plugin-proposal-class-properties.

  • babel-polyfill => @babel/polyfill
  • babel-core => @babel/core
  • babel-plugin-transform-class-properties => @babel/plugin-proposal-class-properties
  • vous avez eu l'idée. babel- est maintenant @babel/ et certains plugins sont préfixés avec proposal.

babel-plugin-emotion n'est bien sûr pas un plugin officiel donc il reste le même, ainsi que babel-loader. Pour tous les autres plugins, assurez-vous de comparer les noms avec le nouveau nom sur le lien fourni ci-dessus. Ouvrez le dossier de chaque plugin pour voir le nouveau nom commençant par @babel/.

Le même nom s'applique désormais à .babelrc file (ou babel config en général), et je vous suggère de ne pas utiliser la dénomination abrégée mais d'inclure le nom complet du package des plugins et des préréglages dans votre config babel:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
   // ...
}

J'espère que cela t'aides! À votre santé.

8
Pavel Denisjuk