Сбой сборки модуля webpack при попытке обновления с Babel 6 до Babel 7 - PullRequest
Новая
       14

Сбой сборки модуля webpack при попытке обновления с Babel 6 до Babel 7

2 голосов
/ 08 марта 2019

Я пытаюсь обновить наш проект с Babel 6 до 7. Я внес следующие изменения в package.json: 

  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-eslint": "10.0.1",
    "babel-loader": "7.1.5",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-destructuring": "6.23.0",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "webpack": "4.28.4",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14",
    "workbox-webpack-plugin": "3.6.3"
  },

Избавился от babel-preset-* и добавил новые @babel/* пакеты,Также добавлен Jest. 

  "devDependencies": {
    "@babel/cli": "7.2.3",
    "@babel/core": "7.3.4",
    "@babel/preset-env": "7.3.4",
    "@babel/preset-react": "7.0.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-destructuring": "6.23.0",
    "babel-polyfill": "6.26.0",
    "jest": "24.3.0",
    "react-test-renderer": "16.8.4",
    "webpack": "4.28.4",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14",
    "workbox-webpack-plugin": "3.6.3"
  },

Наш проект использует Babel и Webpack, и мы управляем настройкой Babel через webpack.config.js.Итак, в этот файл были внесены следующие изменения:

webpack.config.js 

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'env'],
          plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
        }
      },
    ]
  }

Обновлен раздел пресетов для использования @babel/react и @babel/env. 

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/react', '@babel/env'],
          plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
        }
      },
    ]
  }

Когда я запускаю webpack --mode development, webpack выдает следующую ошибку: 

ERROR in ./src/entry2.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from 'C:\MyApp'
- If you want to resolve "react", use "module:react"
- Did you mean "@babel/react"?
    at Function.module.exports [as sync] (C:\MyApp\node_modules\resolve\lib\sync.js:58:15)
    at resolveStandardizedName (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at items.map (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:85:55)
    at Object.loadPartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:110:18)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:140:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\MyApp\node_modules\babel-loader\lib\index.js:3:103)
    at _next (C:\MyApp\node_modules\babel-loader\lib\index.js:5:194)
    at C:\MyApp\node_modules\babel-loader\lib\index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:5:97)
    at Object.loader (C:\MyApp\node_modules\babel-loader\lib\index.js:56:18)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:51:12)

Я не понимаю, почему webpack ищет модуль babel-preset-react, когда яобновил раздел пресетов для babel-loader, чтобы использовать @ babel / реагировать.Черт, он даже спрашивает: «Вы имели в виду @ babel / реагировать?»Да, да - и это то, что я сказал!Есть мысли?

Я grep'd каталог node_modules для ссылок на 'babel-preset-реагировать' и получил несколько обращений из пакетов в нашем разделе зависимостей (не devDependencies).Но я бы предположил, что npm install позаботится об удовлетворении зависимостей этих пакетов.Я не прав?

И наконец, о чем говорит 4-я строка, когда упоминается «модуль: реагировать»?Это уместно, здесь?

1 Ответ

0 голосов
/ 08 марта 2019

Как уже упоминалось в комментариях, я не сталкивался с инструментом обновления.Его использование помогло мне устранить некоторые ошибки, которые я внес в package.json, попытавшись выполнить обновление вручную.

Однако ошибка сохранилась.Но после применения изменений, предложенных инструментом обновления, я увидел (и удалил) следующий ненужный раздел: 

  "babel": {
    "presets": [
      "env",
      "react"
    ]
  }

Наличие этого раздела и стало причиной моих ошибок компиляции.По-видимому, мы могли работать месяцами вместе с параметрами конфигурации для веб-пакета и (в блаженном неведении) не испытывать никаких проблем.После того, как я его удалил, все стало нормально, с Babel 7, полагаясь исключительно на конфиги веб-пакета.

Было бы неплохо, если бы существовал инструмент, помогающий оптимизировать конфигурацию (т.е. выявлять избыточность / конфликты) в проектах, которыеиспользуйте веб-пакет вместе с Бабелем.Между .babelrc, package.json и webpack.config.js в настоящее время слишком много потенциальных ловушек.

Еще раз спасибо за помощь!

...