Как вы компилируете с помощью Webpack и Babel?

#javascript #reactjs #npm #package #yarnpkg

Вопрос:

У меня есть пакет json, который выглядит так:

   "scripts": {
    "start": "NODE_ENV=development node node_modules/webpack/bin/webpack.js --progress  --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node node_modules/webpack/bin/webpack.js --watch --progress  --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
"dependencies": {
    "postcss-custom-properties": "^11.0.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-qr-barcode-scanner": "^1.0.6",
    "webpack-mix": "^3.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/preset-env": "^7.14.8",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.2.2",
    "gulp-babel": "^8.0.0",
    "import-glob": "^1.5.0",
    "laravel-mix": "^6.0.25",
    "postcss": "^8.3.6",
    "sass": "^1.36.0",
    "sass-loader": "^12.1.0",
    "webpack": "^5.47.1",
    "webpack-cli": "^4.0.0"
  }

 

Я пытаюсь использовать webpack для компиляции моего файла javascript в src/qr.js в dist/qr.js.

Хотя при компиляции с npm run production im возникает эта ошибка.

введите описание изображения здесь

У меня есть пара вопросов здесь:

  1. С чем babel это ? Я компилирую с webpack помощью , использует ли webpack babel для компиляции?
  2. при попытке установить @babel/preset-cli говорится, что пакет npm не найден.

Кто-нибудь знает, что я здесь делаю не так?