Обновление до Babel-loader 8 из 7? Что мне нужно изменить? - PullRequest
Новая
       8

Обновление до Babel-loader 8 из 7? Что мне нужно изменить?

0 голосов
/ 31 августа 2018

Я пытаюсь перейти с 7 на версию 8. Но у меня возникают некоторые ошибки.

Я думаю, мне нужно обновить некоторые вещи, но я не уверен, что

Это то, что у меня есть для моих пакетов (я удалил плагины, которые не имеют отношения к моей проблеме) 

 "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"
  }

У меня в .baelrc 

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

Я вижу, что мне нужно обновить такие вещи, как babel-core, preset-env, preset-response, но я не уверен, что еще.

Я получаю эту ошибку 

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.

Редактировать мои новейшие конфиги (теперь, похоже, работает)

.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",
  }

1 Ответ

0 голосов
/ 01 сентября 2018

Все плагины перемещены в область видимости @babel с Babel 7. Чтобы обновить свой package.json, вам необходимо соответствующим образом переименовать все ваши плагины и пресеты, используя версию ^ 7.0.0.

Вы можете найти все официальные плагины здесь .

Если вы откроете плагин, который вас интересует, вы увидите, что все они переименованы, например: @babel/plugin-proposal-class-properties.

  • babel-polyfill => @babel/polyfill
  • babel-core => @babel/core
  • babel-plugin-transform-class-properties => @babel/plugin-proposal-class-properties
  • Вы поняли идею. babel- теперь @babel/, а некоторые плагины имеют префикс proposal.

babel-plugin-emotion, конечно, не является официальным плагином, поэтому он остается таким же, как и babel-loader. Для всех остальных плагинов обязательно сравните имена с новыми именами по ссылке, указанной выше. Откройте папку каждого плагина, чтобы увидеть новое имя, начинающееся с @babel/.

То же наименование теперь применяется к файлу .babelrc (или к конфигурации babel в целом), и я предлагаю вам не использовать сокращенное именование, а включать полный набор плагинов и пресетов в конфигурацию babel: 

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

Надеюсь, это поможет! Приветствия.

...