Question

我对ReactJS进行了一些测试，这是我的代码：

.babelrc

{
     { "presets": [ [ "es2015", { "modules": false } ] ] }
}

App.js

import React, { Component } from 'react';
class App extends Component {
    render() {
        return ( <div> <h1> Hello World </h1> </div> );
    }
}
export default App;

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>

<body>
    <div id="app"></div>
    <script src='index_bundle.js'></script>
</body>

</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render( <App/> , document.getElementById('app'));

package.json

{
    "name": "reactapp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "build": "webpack --mode production"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "gulp-babel": "^8.0.0",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "webpack": "^4.28.4",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14"
    },
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.2.3",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "html-webpack-plugin": "^3.2.0"
    }
}

Node.js版本：6.4.1

巴比尔核心版本：7.2.2

问题是，当我按下npm start时，我遇到了一个错误，页面显示为空：

./main.js中的
错误模块构建失败（来自./node_modules/babel-loader/lib/index.js）：错误：找不到模块“ babel-preset-es2015”

尝试了一些解决方案，但错误仍然存在。

Answer 1

ES2015已过时，将您的webpackconfig.js更改为

module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ["@babel/preset-env"]
            }
         }
      ]
   },

并将.babelrc设置为：

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

Answer 2

安装

npm install --save babel-plugin-transform-object-rest-spread
npm install --save babel-preset-env

.babelrc

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

  "plugins": [
    "react-hot-loader/babel", "transform-object-rest-spread"
  ]
}

package.json

"dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0"
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }

Answer 3

es20**-presets已过时，请切换到@babel/preset-env.

安装

npm install --save-dev @babel/preset-env

然后将预设添加到您的.babelrc

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

ReactJS在npm开始时找不到babel-preset-es2015

3 个答案: