ReactJS在npm启动时找不到babel-preset-es2015
我对ReactJS进行了一些测试，下面是我的代码：
.巴别塔
{
{ "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>
主要的js
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
巴别塔核心版本：7.2。2
问题是，当我点击npm start时，它带给我一个错误，页面显示为空：
错误。/main.js模块构建失败（来自。/node_modules/Babel-loader/lib/index.js）：错误：找不到模块'Babel-preset-es2015'
尝试了一些解决方案，但错误仍然存在。
共有3个答案
es20**-预设已弃用，请切换到@babel/preset env
安装
npm install --save-dev @babel/preset-env
然后将预设添加到您的应用程序中。巴别塔
{
presets: ["@babel/preset-env"]
}
安装
npm install --save babel-plugin-transform-object-rest-spread
npm install --save babel-preset-env
.巴别塔
{
"presets":[
"env","es2015", "react"
],
"plugins": [
"react-hot-loader/babel", "transform-object-rest-spread"
]
}
包裹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"
}
ES2015已弃用，请更改webpackconfig。js到
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ["@babel/preset-env"]
}
}
]
},
并设置. babelrc为：
{
"presets": ["@babel/preset-env"]
}
-
我已经安装了Babel7.5，这应该是理想的目标预置环境包，但不确定为什么它正在寻找“Babel-Preset-ES2015”。 你们能告诉我我犯了什么错误吗？下面是我的代码 package.json .babelrc 模块生成失败（来自./node_modules/babel-loader/lib/index.js): 错误：从“d:\shashank\projects\uploadutilit
-
此 preset 包含如下插件： @babel/plugin-transform-typescript 你需要为 @babel/cli 和 @babel/node 命令行工具指定 --extensions ".ts" 参数，以使其能够处理 .ts 文件。 示例 输入 const x: number = 0; 输出 const x = 0; 安装 npm install --save-dev @
-
安装 npm install babel-preset-minify --save-dev 用法 Via .babelrc 配置文件（推荐） .babelrc { "presets": ["minify"] } 或通过参数设置 - { "presets": [["minify", { "mangle": { "exclude": ["MyCustomE
-
此 preset 始终包含以下插件： @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx @babel/plugin-transform-react-display-name And with the development option: @babel/plugin-transform-react-jsx-self @babel/
-
此 preset 包含如下插件： @babel/plugin-transform-flow-strip-types 示例 输入 function foo(one: any, two: number, three?): string {} 输出 function foo(one, two, three) {} 安装 npm install --save-dev @babel/preset-flo
-
@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target en