安装ES2018 object spread operator babel插件错误

我想对对象使用新的ES2018 spread操作符,我发现这个NPM包应该启用它: babel-plugin-transform-object-rest-spread

我的 package.json :

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "npm-sass": "^2.2.1",
    "vue": "^2.5.13",
    "vue-event-hub": "^1.0.2",
    "vue2-datepicker": "^1.8.3"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.40",
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.5.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015-node6": "^0.4.0",
    "babel-preset-stage-2": "^6.24.1",
    "chalk": "^2.3.2",
    "copy-webpack-plugin": "^4.5.0",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^3.0.4",
    "node-notifier": "^5.2.1",
    "optimize-css-assets-webpack-plugin": "^4.0.0",
    "ora": "^2.0.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.1",
    "postcss-url": "^7.3.1",
    "rimraf": "^2.6.2",
    "semver": "^5.5.0",
    "shelljs": "^0.8.1",
    "uglifyjs-webpack-plugin": "^1.2.2",
    "url-loader": "^1.0.1",
    "vue-loader": "^14.1.1",
    "vue-style-loader": "^4.0.2",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^4.1.0",
    "webpack-bundle-analyzer": "^2.11.1",
    "webpack-dev-server": "^3.1.0",
    "webpack-merge": "^4.1.2"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

当然还有 package-lock.json

"babel-plugin-transform-object-rest-spread": {
  "version": "6.26.0",
  "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
  "integrity": "XXXXXXXXXXX",
  "dev": true,
  "requires": {
    "babel-plugin-syntax-object-rest-spread": "6.13.0",
    "babel-runtime": "6.26.0"
  }
},

以下是NPM包的链接: https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread

没什么大不了的,这就是为什么我很难找出原因。 我尝试安装: babel-preset-es2015-node6 ,但这没有帮助,我尝试添加 "es2015-node6" 到 "presets" 在里面 .babelrc ,也没有任何运气。

因此,现在当我尝试使用它时,在构建过程中出现了一个错误:

- invalid expression: Unexpected token ... in

    { ...selected_car, date: state.todays_date.toLocaleDateString()}

此错误由以下原因引起:

<div>
  <Car v-if="cars.length > 0" v-for="(car,index) in cars" :key="'car-'+index" :data="{ ...car, date: state.todays_date.toLocaleDateString()}" :selected="false" />
  <Car v-if="selected_cars.length > 0" v-for="(selected_car,ind) in selected_cars" :key="'selected-car-'+ind" :data="{ ...selected_car, date: state.todays_date.toLocaleDateString()}" :selected="true"/>
</div>

在 :data 的属性 Car Vue组件。

对不起,我误读了我的 .巴别塔LRC 在上次编辑中:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["babel-plugin-transform-es2015-destructuring", "transform-object-rest-spread", "transform-vue-jsx", "transform-runtime"]
}

我的 webpack.base.conf.js 如下所示:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('Images/[name].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('Stylesheets/[name].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}