我对 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/