我对 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它时会出现错误并且页面显示为空：
./main.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：错误：找不到模块“babel-preset-es2015”
尝试了一些解决方案，但错误仍然存在。
小智 7
ES2015 已弃用，请更改webpackconfig.js为
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ["@babel/preset-env"]
}
}
]
},
并将 .babelrc 设置为：
{
"presets": ["@babel/preset-env"]
}
它们es20**-presets已被弃用，所以请切换到@babel/preset-env.
安装
npm install --save-dev @babel/preset-env
然后将预设添加到您的 .babelrc
{
presets: ["@babel/preset-env"]
}
| 归档时间： |
|
| 查看次数： |
6043 次 |
| 最近记录： |