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

【问题标题】：You may need an appropriate loader to handle this file type-error您可能需要适当的加载程序来处理此文件类型错误
【发布时间】：2017-02-28 11:03:05
【问题描述】：

我有如下代码（es6传播属性）：

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

抛出的错误是：你可能需要一个合适的加载器来处理这个文件类型。

package.json

我还需要安装什么才能完成这项工作。所有其他 ES6 都在工作，但 spread 属性没有。

webpack.config.js

【问题讨论】：

你能分享你的 webpack 配置吗？在那里你会看到可能需要的加载器。
所以 package.json 还不够……我的 webpack.config.js 中没有任何加载器，我现在就添加它们

标签： javascript ecmascript-6 redux atom-editor

【解决方案1】：

要使用ecmascript-6，您需要 (1) 添加具有以下预设的.babelrc 文件

{
  "presets": [ "es2015" ]
}

es2015 是你需要的那个。

然后 (2) 配置你的 webpack 以包含

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

【讨论】：

"要使用 ecmascript-6 扩展运算符，您需要..." 当然可以，但是 OP 的示例中没有 ES6 扩展语法。
@zeroflagL 感谢您的通知。我找不到正确的方法来调用{ ...state} 表达式并使用spread operator。但是，我发现我的使用在技术上是不正确的。此外，我找不到调用此特定功能的正确方法。你能帮忙吗？
@zeroflagL 我也想知道它的正确技术术语...这里说这是一个价差运算符：redux.js.org/docs/basics/Reducers.html#handling-actions
我发现它叫做'Object rest spread operator'：babeljs.io/docs/plugins/transform-object-rest-spread。在 es6-features.org 中，它被称为“Rest parameter”：es6-features.org/#RestParameter
@DeividasKaržinauskas 好吧，这对我来说是扩展运算符 xd，但我仍然喜欢 wrigth return Object.assign({},state,{user:action.payload});而不是上面...可以习惯一些 ES6 语法...

【解决方案2】：

你需要为 js 文件配置 babel-loader 才能转译

webpack 配置 sn-p ：

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

内部模块规则。

在你的项目主目录中添加.babelrc文件，内容如下

{
   "presets" : [
     "latest"
   ]
}

【讨论】：

【解决方案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'。都一样。

【讨论】：