Vue下WebPack无法识别Spread运算符答案

【问题标题】：Spread operator not recognized by WebPack under VueVue下WebPack无法识别Spread运算符
【发布时间】：2017-04-15 07:04:53
【问题描述】：

在this answer 中建议使用以下语法。

import { mapActions } from 'vuex'
export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow },
    actions: { updateData, resetData }
  },
  methods: { ...mapActions(['updateData', 'resetData']) }
}

我无法让它工作，我收到了错误：

模块构建失败：SyntaxError: C:/.../navigation.vue: Unexpected token (30:8)

29 |方法：{
30 | ...mapActions(['updateData', 'resetData'])
| ^
31 | }

我试过configuring Babel to stage-2 和adding plugins 但没有任何改变。可以做些什么呢？我该如何解决它？

babel: {
  presets: ["es2015", "stage-2"],
  plugins: ["transform-object-rest-spread"]
}

webpack.config.js

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
      { test: /\.vue$/, loader: 'vue' }]
    },
    babel: {
      presets: ["es2015", "stage-2"],
      plugins: ['transform-runtime']
    },
    resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } }
}

【问题讨论】：

您需要将 babel-loader 应用于您的 Javascript 文件。也许它不见了。 stage-2 预设具有对象扩展功能，因此并非如此。我什至建议放弃变换对象休息传播。无论如何，请添加您的 Webpack 配置，至少是 JS 文件的加载器配置。
@RishatMuhametshin 我添加了配置文件，请看一下。我应该已经使用第 3 阶段了吗？
我对vue一无所知，但你的代码是包含在.vue还是.js文件中？ babel 转换仅适用于.js 文件。
@FelixKling 很好的观察。它被拉出并被视为 JS 文件。不知道为什么它不起作用。我重新安装了所有软件包并改为使用第 3 阶段，然后，无论出于何种原因，它开始工作。叹息……

标签： webpack ecmascript-6 babeljs vue.js

【解决方案1】：

这可能是解决方案之一。您需要在配置文件中为js 代码添加一个babel loader，如下所示：

module: {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue'
    },
    {
      test: /\.js$/,
      loader: 'babel',
      include: projectRoot,
      exclude: /node_modules/
    },
    ...
    ...

以下是我的 babel 相关依赖：

"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",

您可以在repo 中看到此配置和其他相关代码。

【讨论】：

太棒了。它正在工作。但是，我没有与 include:projectRoot 相关的部分，我担心虽然现在不需要它，但它会成为进一步问题的根源。它的具体作用是什么？或者，更有趣的是 - 如果它不在那里会发生什么？
你可以看到here，它只是你的代码根目录的文件夹位置。