传播运算符未被WebPack根据Vue识别

在this answer中建议使用以下语法。传播运算符未被WebPack根据Vue识别

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

我不能让它工作，我得到的错误：

Module build failed: SyntaxError: C:/.../navigation.vue: Unexpected token (30:8)

29 | methods: {
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' } } 
}

来源

2016-11-30 Konrad Viltersten

您需要将babel-loader应用于您的Javascript文件。也许它错过了。第二阶段的预设有对象传播功能，所以情况并非如此。我甚至会建议放弃转换对象休息传播。无论如何，请添加您的Webpack配置，至少是JS文件的加载器配置。 –

@RishatMuhametshin我添加了配置文件，请看一看。我是否应该和第三阶段一起去？ –

我对vue一无所知，但是您的代码包含在'.vue'或'.js'文件中吗？ babel变换仅适用于'.js'文件。 –

这可能是解决方案之一。您需要在您的配置文件中的babel loader为js代码，就像下面：

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

以下是我的巴别塔相关的依赖性：

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

来源

2016-12-01 02:13:23 Saurabh

太棒了。它正在工作。但是，我没有* include：projectRoot *的部分，我担心，虽然现在不需要，但它将成为进一步讨论的问题的来源。它究竟做了什么？或者，更有趣的是 - 如果它不是**，那会发生什么？ –

你可以在这里看到它（https://github.com/mimani/vue-example/blob/master/build/webpack.base.conf.js#L4），它只是你的代码根目录的文件夹位置。 – Saurabh

传播运算符未被WebPack根据Vue识别

回答

相关问题