Question

我是第一次使用babel和Webpack来构建React应用。从早上开始，我尝试过多次卸载和重新安装软件包，但babel尝试启动服务器时会出现一个或另一个错误

我可能已经阅读了该平台上的所有相关问题，但是找不到可行的解决方案。

这是我的webpack.config.js的样子：

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

module.exports = {

    entry: path.resolve(__dirname, 'src/index.js') ,
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/src/'
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/public/index.html',
            filename: 'index.html',
            inject: 'body'
        }), // Generates default index.html
        // new HtmlWebpackPlugin({  // Also generate a test.html
        //     filename: 'test.html',
        //     template: 'src/assets/test.html'
        // })
    ],

    devServer: {
        contentBase: "./public",
        hot: true
    },

    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/react', '@babel/es2015'],
                    plugins: ['@babel/proposal-class-properties']
                }
            }
        ]
    }
    };

package.json：

{
  "name": "ondemnd-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-core": "7.0.0-bridge.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.6.2",
    "@babel/core": "^7.6.2",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "^7.1.5",
    "html-webpack-plugin": "^3.2.0",
    "regenerator-runtime": "^0.13.3",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  }
}

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

错误：

ERROR in (webpack)/buildin/global.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-es2015' from 'C:\repos\ondemandProject\ondemnd-web'
    at Function.module.exports [as sync] (C:\repos\ondemandProject\ondemnd-web\node_modules\resolve\lib\sync.js:74:15)
    at resolveStandardizedName (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePreset (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at items.map (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at passPerPreset (C:\repos\ondemandProject\ondemnd-web\node_modules\@babel\core\lib\config\config-descriptors.js:58:96)
 @ ./node_modules/lodash/lodash.js 1:0-41
 @ ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html

babel-error

在node_modules中，无论我尝试重新安装preet-es2015多少次，都看不到该软件包。另外，在文档https://babeljs.io/docs/en/v7-migration中指出，“ env”预设已经使用了一年多，并且完全替代了我们先前已经提出并建议的某些预设。

babel-preset-es2015
babel-preset-es2016
babel-preset-es2017
babel-preset-latest
A combination of the above ^

这些预设应替换为“ env”预设。

@babel/preset-es2015

不确定如何解决此问题

Answer 1

如果其他任何人都遇到了此问题，可以通过完全卸载@ babel / preset-es2015来解决。替换为@ babel / preset-env

无法从'C：\ repos \ ondemandProject \ ondemnd-web'找到模块'@ babel / preset-es2015'

1 个答案: