傳播運算符未被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識別

回答

相關問題