安裝ES2018對象傳播算子babel插件錯誤

Question

我想對對象使用新的ES2018傳播運算符，我發現此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 ，但這沒有幫助，我嘗試在.babelrc的"presets"中添加"es2015-node6" ，也沒有任何運氣。

因此，現在當我嘗試使用它時，在構建過程中會出現錯誤：

- 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>

在Car Vue組件的:data屬性中。

抱歉，我在上次編輯中誤將了.babelrc ：

{
  "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'
  }
}

Answer 1

為了在模板中使用對象剩余分布，您需要：

1. 使用Node v8.3 +

2. 為vue-loader配置buble選項：

     buble: { objectAssign: 'Object.assign' } 

3. 如果以任何IE為目標，請確保為Object.assign包括polyfill。

請在build/vue-loader.conf.js文件中使用以下配置

              var utils = require('./utils')
              var config = require('../config')
              var isProduction = process.env.NODE_ENV === 'production'

              module.exports = {
                loaders: utils.cssLoaders({
                  sourceMap: isProduction
                    ? config.build.productionSourceMap
                    : config.dev.cssSourceMap,
                  extract: isProduction
                }),
                transformToRequire: {
                  video: 'src',   
                  source: 'src',
                  img: 'src',
                  image: 'xlink:href'
                },
                buble: { objectAssign: 'Object.assign' }
              }

要獲得更多幫助，請在此處使用檢查相同類型的問題。

我已創建演示ESNext-IN-VUE使用對象存儲庫rest spread在Vue公司的模板。

希望這對您有幫助！