Redux的傳播運營商不與的WebPack 2

Question

編譯這裏是我的減速器

const serviceSelected = (state = {} , action) => { 
    switch(action.type) { 
     case 'ADD_SERVICE': 
      return { ...state, serviceSelected : action.service } 
     default: 
     return state; 
    } 
} 
export default serviceSelected; 

我已經通過NPM加載"babel-plugin-transform-object-rest-spread" : "6.23.0"

我的WebPack的conf是

'use strict'; 

const webpack = require('webpack'); 
const webpackMerge = require('webpack-merge'); 
const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const baseConfig = require('./webpack.config.js'); 

const environment = process.env.NODE_ENV || 'development'; 
const isProduction = environment === 'production'; 

module.exports = webpackMerge(baseConfig, { 
    entry: { 
    app: [path.resolve(__dirname, 'client', 'scripts', 'app', 'index.js')], 
    pl: [path.resolve(__dirname, 'client', 'scripts', 'pl.js')] 
    }, 
    resolve: { 
    alias: { 
     scripts: path.resolve(__dirname, 'client', 'scripts'), 
     views: path.resolve(__dirname, 'client', 'views') 
    } 
    }, 
    module: { 
    rules: [{ 
     test: /\.js$/, 
     include: [ 
     path.resolve(__dirname, 'client', 'scripts'), 
     path.resolve(__dirname, 'client', 'components'), 
     ], 
     use: [{ 
     loader: 'ng-annotate-loader' 
     }, { 
     loader: 'babel-loader', 
     options: { 
      presets: ['es2015', 'react'], 
      plugins: [require('babel-plugin-transform-object-rest-spread')], 
      cacheDirectory: path.resolve(__dirname, '.tmp', '.babel-cache') 
     } 
     }] 
    }, { 
     test: /\.html$/, 
     include: [ 
     path.resolve(__dirname, 'client', 'views'), 
     path.resolve(__dirname, 'client', 'components'), 
     ], 
     use: 'raw-loader' 
    }, { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [{ 
      loader: 'css-loader', 
      options: { 
      minimize: false, 
      modules: true, 
      localIdentName: '[name]__[local]___[hash:base64:5]' 
      } 
     }] 
     }) 
    }] 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     process: { 
     env: { 
      NODE_ENV: JSON.stringify(environment), 
      ZAP_WIDGET_URL: JSON.stringify(`${isProduction ? 'https://widget.meso.com' : 'http://localhost:8080'}/embed.js`) 
     } 
     } 
    }), 
    new webpack.DllReferencePlugin({ 
     context: __dirname, 
     manifest: path.resolve(__dirname, '.tmp', 'scripts', 'vendor-manifest.json'), 
     name: 'FXO_VENDOR' 
    }), 
    new ExtractTextPlugin('../stage/components.css'), 
    ] 
}); 

在此的conf一半時，你將會看到

plugins: [require('babel-plugin-transform-object-rest-spread')], 

我也嘗試添加一個.babelrc文件，

{ 
    "plugins": ["babel-plugin-transform-object-rest-spread"] 
} 

我得到這個錯誤

Unexpected token (6:19) 
You may need an appropriate loader to handle this file type. 
|  switch(action.type) { 
|  case 'ADD_SERVICE': 
|   return { ...state, serviceSelected : action.service } 

如果我改變減速是

const serviceSelected = (state = [] , action) => { 
    switch(action.type) { 
     case 'ADD_SERVICE': 

     return [ 
       ...state, { 
        serviceSelected : action.service 
       } 
      ] 

     default: 
     return state; 
    } 
} 
export default serviceSelected; 

我沒有得到任何編譯錯誤

Answer 1

作爲臨時解決方案我在我的減速器

case 'ADD_SERVICE': 
      return Object.assign(state, { serviceSelected : action.service}); 

用這個，但如果有人能回答我原來的職位，我會很高興威猛

Answer 2

我想，你應該通過.babelrc嘗試（http://babeljs.io/docs/plugins/transform-object-rest-spread/）

{ 
 
    "plugins": ["transform-object-rest-spread"] 
 
}

PS在帖子中，您使用錯誤的名稱爲.babelrc

Answer 3

我的臨時修復被某人投下。

這是我最終使用的。

case 'ADD_SERVICE': 
      let [last] = [...state].reverse(); 
      let newIndex = 1; 
      if(last != undefined){ 
       newIndex = last.index; 
       newIndex++; 
      } 

      return [ 
       ...state, { 
       index: newIndex, 
       selectedService: action.service 
       } 
      ]