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'),
  ]
});

在这个半途中，你会看到

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

我想，你应该试试.babelrc（http://babeljs.io/docs/plugins/transform-object-rest-spread/）

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

P.S。在帖子中，您使用错误的名称.babelrc

Answer 2

我的临时修复程序被某人拒绝投票。

这是我最终使用的内容。

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

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

Answer 3

作为临时解决方案，我在减速机中使用了这个

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

但是，如果有人能回答我原来的帖子，我会非常高兴

Redux Spread运算符未使用Webpack 2编译

3 个答案: