Как правильно настроить babel с помощью веб-пакета (2020 год)? Нужны предложения - PullRequest
Новая
       18

Как правильно настроить babel с помощью веб-пакета (2020 год)? Нужны предложения

0 голосов
/ 17 апреля 2020

Я запустил yarn dev, который запускает webpack -wd, и я получаю эту ошибку при сборке

Ошибка: не удается найти модуль 'babel-preset-реагировать' из 'E: \ myReactProjects \ advanced-response' - Если Вы хотите разрешить «реагировать», используйте «модуль: реагировать» - Вы имели в виду «@ babel / реагировать»?

// package. json

{
  "name": "advanced-react",
  "version": "1.0.0",
  "description": "Advanced React",
  "main": "lib/server.js",

  "license": "MIT",
  "scripts": {
    "dev": "nodemon --exec babel-node lib/server.js",
    "webpack": "webpack -wd"
  },
  "babel": {
    "presets": [
      "react",
      "env",
      "stage-2"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-react": "^7.19.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-stage-2": "^7.8.3",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.1.0",
    "ejs": "^3.0.2",
    "express": "^4.17.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.42.1"
  }
}

// webapck config js

const path = require("path");

const config = {
  entry: "./lib/components/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-stage-2",
            ],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx", "ts", "tsx"],
  },
};

module.exports = config;

PS. Я только начинаю пробовать веб-пакет

...