Question

我目前正在学习React，并且在webpack部分遇到了错误。我将插件transform-class-properties用于箭头函数，但webpack在处理它们时显示错误。

ERROR in ./src/app.js 86:20
Module parse failed: Unexpected token (86:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         }
|     }
>     handleRemoveAll = () => {
|         this.setState( () => ({ options: [] }));
|     }
error Command failed with exit code 2.

我的webpack配置文件如下

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
};

这是我的package.json

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Test User",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=react,env --plugins=transform-class-properties --watch"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "live-server": "^1.2.1",
    "webpack": "^4.44.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.12"
  }
}

Answer 1

您应该将加载程序添加到webpack配置

https://survivejs.com/webpack/loading/javascript/

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },

还有一个.babelrc文件

{
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: 'last 2 versions',
        },
        loose: true,
        modules: false,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: ['transform-class-properties'],
}

React webpack错误：您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件

1 个答案: