代码之家  ›  专栏  ›  技术社区  ›  R.Thompson

正在获取对象扩散以使用Web包。config和babelrc文件

  •  3
  • R.Thompson  · 技术社区  · 7 年前

    我正在尝试让对象扩散操作符与我的react项目一起工作。它出现了一个语法错误:

    spread operator error

    我试过使用 babel-plugin-transform-object-rest-spread 正如巴别塔所描述的 docs .

    经过一点研究,我还尝试了GitHub问题中描述的配置 babel : babelrc config for spread operator

    请查看我的 .巴别塔LRC 文件如下:

    {
        "presets": ["es2015"],
        "plugins": ["transform-object-rest-spread"],
        "sourceMaps": true,
        "retainLines": true
    }
    

    还有我的 网页包。配置 文件如下:

    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public', 'js'),
        publicPath: '/'
      },
      devtool: 'source-map',
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            options: {
              presets: ['react', 'es2015']
            }
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },
          {
            test:/\.scss$/,
            use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                    }, {
                    loader: 'sass-loader', options: {
                        sourceMap: true
                    }
                }]
          },
          {
            test: /.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url-loader'
          }
        ]
      },
      devServer: {
       historyApiFallback: true,
       contentBase: path.join(__dirname, 'public'),
       publicPath: '/js/',
       port: 3000
     }
    };
    

    我使用扩展运算符的代码是:

    import * as types from '../types/types'; 
    
    const initialState ={
        mesage:''
    }
    
    export default function doodlesReducer (state = initialState, action) {
        switch(action.type) {
            case 'SET_MESSAGE' :
            return {…state, message: action.payload.message}
            default :
            return state
            }
    }
    

    有人能帮我找出使用对象扩展操作符的正确配置吗?

    1 回复  |  直到 6 年前
        1
  •  5
  •   linasmnew    7 年前

    您将在两个 .babelrc webpack.config ,尝试将其全部移到其中一个,即仅 .巴别塔LRC :

    {
        "presets": ["es2015", "react"],
        "plugins": ["transform-object-rest-spread"]
    }
    

    编辑: 也不是使用 es2015 现已弃用的预设安装 env 预设 npm install --save-dev babel-preset-env 并且在 .巴别塔LRC 代替 es2015年 具有 环境 .

    编辑2: 这个 … 您正在使用的使用了一些不受支持的字符编码,您必须从某个地方复制粘贴它,然后将其替换为 ... .