您可能需要一个适当的加载程序来处理此文件类型错误

Question

我有以下代码（es6 spread Attribute）：

 return {...state, name: action.payload};

抛出的错误是：您可能需要一个合适的加载程序来处理此文件类型。

的package.json

为了使这项工作，我还需要安装什么。所有其他ES6都在工作，但传播属性不是。

webpack.config.js

Answer 1

您需要为js文件配置babel-loader以进行转换

webpack config snippet：

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
      'babel-loader'
    ]
  }

内部模块规则。

还在项目主目录中添加.babelrc文件，其中包含以下内容

{
   "presets" : [
     "latest"
   ]
}

Answer 2

要使用ecmascript-6，您需要（1）使用以下预设添加.babelrc个文件

{
  "presets": [ "es2015" ]
}

es2015是您需要的特定内容。

然后（2）配置您的webpack以包含

module.exports = {
  ...,
  loaders : [
    { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader' }
  ]
}

Answer 3

通过npm安装加载器是不够的。您必须在webpack中配置加载器。

在webpack.config.js

中添加以下内容

loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }
  ]

Using loaders in webpack

上面的代码意味着，只要它找到任何匹配\.js$模式的文件（以.js结尾的文件），就会使用babel-loader。 （您已经将babel-loader安装到您的依赖项中。

您也可以使用loader: 'babel'代替`loader：'babel-loader'。它是一样的。