安装 ES2018 object spread operator 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，但这没有帮助，我尝试将"es2015-node6" 添加到.babelrc 中的"presets"，同样没有任何运气。

所以现在当我尝试使用它时，我在构建过程中遇到了错误：

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

在CarVue 组件的: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

为了在模板中使用 Object rest spread，您需要：

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

如需更多帮助，请查看同一类型的问题here。

我已经创建了演示 ESNext-In-vue 存储库，用于在 Vue 模板中使用 Object rest spread。

希望对你有帮助！！