首页 > 解决方案 > 出现错误“您可能需要适当的加载程序来处理此文件类型。” 使用 Webpack 编译 ES6 资产时

问题描述

我使用带有 Babel 的 Webpack 在我的 Nodejs 应用程序中编译 ES6 资产,但我收到以下错误消息:

You may need an appropriate loader to handle this file type.
|
|       const addMrnObj = {
|         ...jsonObj,
|         optionalMrn: optionalMrn
|       };
 @ ./config/eventSource/eventSourceCall.js 5:18-40
 @ ./src/app.js
 @ multi ./src/app.js

我正在使用 2.2.1 版的 Webpack 和 6.22.0 版的 babel-preset-es2015

下面是我的 babel.rc 配置

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-flow-strip-types",
    "transform-object-rest-spread",
    "transform-class-properties",
    "syntax-class-properties"
  ]
}

这是我的 Webpack 配置

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var BabiliPlugin = require('babili-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'dist');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: [
    APP_DIR + '/app.js',
  ],
  target: 'node',
  output: {
    path: BUILD_DIR,
    filename: 'backend.js'
  },
  plugins: [
    new BabiliPlugin(),
    new CopyWebpackPlugin([{
      from: './config',
      to: 'config'
    }])
  ],
  module: {
    loaders: [
      {
        test: /\.js?/,
        exclude: /node_modules/,
        include: [ APP_DIR ],
        loader: 'babel-loader'
      }
    ]
  }
};

module.exports = config;

有人可以指出我需要进行哪些其他更改才能解决此错误。

标签: javascriptwebpackbabeljs

解决方案


尝试在预设下的 babel.rc 文件中添加“@babel/preset-env”(也安装预设)。而且你的语法也是错误的,这应该是

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

并且文件名应该是 .babelrc 而不是 babel.rc


推荐阅读