在Vue下WebPack无法识别传播运算符 [英] Spread operator not recognized by WebPack under Vue
问题描述
在此答案中,建议使用以下语法.
In this answer the following syntax's been suggested.
import { mapActions } from 'vuex'
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData }
},
methods: { ...mapActions(['updateData', 'resetData']) }
}
我无法使其正常工作,并且出现错误:
I can't make it work and I'm getting the error:
模块构建失败:SyntaxError:C:/.../navigation.vue:意外的令牌(30:8)
Module build failed: SyntaxError: C:/.../navigation.vue: Unexpected token (30:8)
29 |方法:{
30 | ... mapActions(['updateData','resetData'])
| ^
31 | }
29 | methods: {
30 | ...mapActions(['updateData', 'resetData'])
| ^
31 | }
我已经尝试将Babel配置为第二阶段和
I've tried configuring Babel to stage-2 and adding plugins but it made no change. What can be done about it? How do I troubleshoot it?
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' } }
}
推荐答案
这可以是解决方案之一.您需要在配置文件中为js
代码添加babel loader
,如下所示:
This can be one of the solutions. You need to have a babel loader
in your config file for js
code, like following:
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
...
...
以下是我与babel相关的依赖项:
Following are my babel related dependencies:
"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",
您可以在此存储库中看到此配置和其他相关代码.
You can see this config and other relevant code in this repo.
这篇关于在Vue下WebPack无法识别传播运算符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!