реагировать, wepack, babel, узел, ошибка запуска npm

Question

ОШИБКА в ./main.js

Сборка модуля не удалась (из ./node_modules/babel-loader/lib/index.js):

Ошибка: не удается найти модуль'@ babel / preset-es2015' из 'F: \ reactapp'
в Function.module.exports [как синхронизация] (F: \ reactapp \ node_modules \ resol \ \ lib \ sync.js: 43: 15)
at resolStandardizedName (F: \ reactapp \ node_modules @ babel \ core \ lib \ config \ files \ plugins.js: 101: 31)
at resolPreset (F: \ reactapp \ node_modules @ babel \ core \ lib \ config \files \ plugins.js: 58: 10)
в loadPreset (F: \ reactapp \ node_modules @ babel \ core \ lib \ config \ files \ plugins.js: 77: 20)
в createDescriptor (F: \reactapp \ node_modules @ babel \ core \ lib \ config \ config-descriptors.js: 154: 9)
в items.map (F: \ реагировать \ node_modules @ babel \ core \ lib \ config \ config-descriptors.js: 109: 50)
в Array.map () в createDescriptors (F: \ reactapp \ node_modules @ babel \ core \ lib \ config \ config-descriptors.js: 109: 29)
в createPresetDescriptors (F:\ reactapp \ node_modules @ столпотворение \ ядра \ Lib \ конфиг \ конфиг-Ключевоrs.js: 101: 10)
at passPerPreset (F: \ reactapp \ node_modules @ babel \ core \ lib \ config \ config-descriptors.js: 58: 96)
@ multi (webpack) -dev-сервер / клиент? http://localhost:8080 (веб-пакет) /hot/dev-server.js ./main.js main [2]

дочерний html-webpack-плагин для "index.html":
1asset
Точка входа undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 байт {0} [встроенный]
[./node_modules / lodash / lodash.js] 527 КБ {0} [встроенный]
[./node_modules/webpack/buildin/global.js] (веб-пакет) /buildin/global.js 472 байта {0} [встроенный] [./node_modules/webpack/buildin/module.js] (веб-пакет) /buildin/module.js 497 байт {0} [встроенный]

i? wdm ?: Не удалось скомпилировать.

Завершить пакетное задание (Y / N)?

package.json file:

package json file выглядит следующим образом.Я следовал https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "demo project",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [
    "[]"
  ],
  "author": "manjunathan g",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/preset-env": "^7.2.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0"
  }
}

Babel Config:

Babel config файл, как показано ниже;далее согласно https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

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

конфигурация веб-пакета

конфигурация веб-пакета выглядит следующим образом:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['@babel/react', '@babel/es2015'],
               plugins: ['@babel/proposal-class-properties']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Answer 1

В вашей конфигурации файлов много ошибок.Позвольте мне попытаться решить:

.babelrc

Вам не нужны следующие devDependencies: babel-core , babel-preset-env , babel-preset-реакции и babel-preset-es2015 .Они устарели, так как Babel 7 был выпущен на свободу.Замените ваш код следующим:

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

webpack.config.js

Поскольку webpack 4 выпущен, вам не нужносообщить поля ввода и вывода (Вы можете сделать это для пользовательских конфигураций).По умолчанию webpack будет искать файл index.js, расположенный в каталоге src/ (этот каталог должен находиться в корне вашего проекта). Webpack создаст график зависимостей модуля из этого файла и выведет связанный файл в каталог dist/.Попробуйте настроить свой webpack.config.js следующим образом:

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: { loader: "babel-loader" }
            },
            {
                test: /\.html$/,
                use: { loader: "html-loader" } //Install it: 'npm i -D html-loader'
            }
        ]
    },
    plugins: [
         new HtmlWebpackPlugin({
              template: "src/index.html" // Put the index.html in the src/ directory
         })
    ]
}

Я не специалист по настройке веб-пакетов и не знаю, смогу ли я вам помочь.Я написал статью о настройке среды для работы с реагировать, babel и веб-пакетом, но она написана на португальском .Если вы хотите проверить: https://medium.com/@brunonakayabu/react-webpack-e-babel-configurando-o-ambiente-de-desenvolvimento-c7ee8a994222

Answer 2

Пакет @babel/preset-es2015 устарел, и вы больше не можете устанавливать его из NPM.

Теперь рекомендуется использовать @babel/preset-env.