代码之家 › 专栏 › 技术社区 › Vijunav Vastivch

ReactJS在npm启动时找不到babel-preset-es2015

reactjs node.js

Vijunav Vastivch · 技术社区 · 7 年前

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

梅因。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"
    }
}

节点。js版本: 6.4.1

巴别塔核心版: 7.2.2

问题是,当我击中 npm start 它给我带来了一个错误,页面显示为空:

错误/主要的js 模块构建失败(来自./node_modules/babel loader/lib/index.js): 错误:找不到模块“babel-preset-es2015”

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

2 回复 | 直到 7 年前

Ferry Sanjaya 7 年前

ES2015已被弃用,请更改您的 webpackconfig.js 到

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

准备好了。法律改革委员会:

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

Shalini Sentiya 7 年前

安装

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"
  ]
}

包裹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"
  }

MyTwoCents 7 年前

这个 es20**-presets 不推荐使用,请切换到 @babel/preset-env.

安装

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

然后将预设添加到您的应用程序中。巴别塔

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