我对 ReactJS 进行了一些测试,这是我的代码:

.babelrc

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

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

索引.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>

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

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

包.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
babel 核心版本:7.2.2
问题是,当我点击 npm start 时,它​​给我带来一个错误,页面显示为空:



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

最佳答案

ES2015 已弃用,将 webpackconfig.js 更改为

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

并将 .babelrc 设置为:
{
    "presets": ["@babel/preset-env"]
  }

关于node.js - ReactJS 在 npm start 上找不到 babel-preset-es2015,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54210112/

10-13 04:22