插件/预设文件不允许导出对象，只能导出函数。删除并保留 babel 安装？使用 webpack 选择？

Question

我正在尝试学习如何编写 React 应用程序并从头开始设置。

我一直在努力奔跑webpack --config webpack.dev.config.js。我不断收到此错误。我尝试过使用不同的加载器和预设。

我的设置有什么问题吗？是不是我的 npm 节点模块已经过时了？

我尝试更新所有预设、加载器甚至 babel 本身。

错误：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
    at createDescriptor (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)

webpack.dev.config.js：

var path = require('path');

module.exports = {
  mode: 'development',
  // context: path.resolve(__dirname, 'src'),
  entry: path.resolve(__dirname,'src/index.js'),
  output: {
    filename: 'main.js',
    libraryTarget: "commonjs2"
  },
  module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               presets: ['es2015','react'],
               plugins: ['transform-class-properties']
            }
           }
         ]
       }
     ]
   },
   resolve: {
     extensions: ['.js']
   }
 };

包.json：

{
  "name": "react-imgur-album",
  "version": "0.0.1",
  "description": "React Component for displaying images in an Imgur Album",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.dev.config.js --progress --display-error-details"
  },
  "keywords": [
    "imgur",
    "react",
    "react-components",
    "component",
    "images",
    "photos",
    "pics"
  ],
  "author": "Kyle Calica",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "react-dom": "^16.5.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^5.7.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "fixed": "^0.3.0",
    "it": "^1.1.1",
    "path": "^0.12.7",
    "react": "^16.5.2",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

索引.js：

import React, { Component } from 'react';

var imgurAPI = 'https://api.imgur.com/3/album/';

export default class ImgurAlbum extends Component {
  constructor(props){
    super(props);
    this.state = {
      imgurPosts: [],
      isLoading: true
    };
  }


  componentDidMount(){
    fetch(imgurAPI + this.props.album + '/images',{
      'headers':{
        'Authorizathion': 'client-id'
      }
    }).then(res => res.json())
    .then(data => console.log(data));
  }

  render(){
        return(
          <div>
            <h1>hi!</h1>
          </div>
        );
      }
}

我注意到我安装了两个 babel 核心，我不知道如何删除其中一个，或者保留哪一个。或者甚至如何使用 webpack 选择哪一个？

Answer 1

我找到了我的解决方案！

这是巴别塔的不匹配。我安装了旧的 babel-core 和 babel-presets。

在 Babel 7 中，最好使用以下方式安装：

npm i @babel/preset-react @babel/preset-env

然后在你的.babelrc：

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

为了安全起见，我还卸载了旧babel-preset-react的babel-preset-es2015。

仍在学习，所以我可能会错过这里的步骤或理解。如果您认为需要更多信息或者我有任何错误，但我能够构建我的，请添加