zoukankan      html  css  js  c++  java
  • 解决 vuex mapGetters 语法报错 (Unexpected token )

    在使用vuex2的mapGetters 和 mapActions 的方法时,借助 stage2 的 Object Rest Operator 特性,可以写出下面代码: 

    computed: {
        ...mapGetters([  // … 三个点,在框架语言里,就是传对象
            'hadChannels',
            'currentChannel'
        ])
    }
    

      

    但是在借助babel编译转换时发生了报错: BabelLoaderError: SyntaxError: Unexpected token 。 

    搜索一番,结果是babel 没有解析成功,看来是 babel的配置为问题

    原来的 .babelrc

    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-vue-jsx", "transform-runtime"]
    }
    

      

    解决方案

    接着在babel的issues中搜索这样的报错,原来是我babel预置的转换器是 babel-preset-es2015 ,并不能转换 Object Rest Operator 特性。 
    1. 安装 Object Rest Operator 的babel插件  npm i -D babel-plugin-transform-object-rest-spread 。 

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

    2. 安装整个stage2的预置器  npm i -D  babel-preset-stage-2

    babel: { 
    presets: ["stage-2"], 
    plugins: [
        "transform-runtime"
        ] 
    } 

    安装、配置都完成以后 ,重启webpack,就不会再有报错了。

    后记:还有人修改了eslint配置中对 Object Rest Operator 的支持解决了问题,不过跟我这种不一样先记下来。

  • 相关阅读:
    Go语言 函数return值的几种情况
    VSCode 常用快捷键 Mac
    Java异常处理
    Java面向对象《三》
    C++类模板
    C++函数模板
    盛最多水的容器
    实现 Trie (前缀树)
    排序链表
    类似某团app搜索城市界面中 点击右侧城市首字母,对应城市区域置顶的功能(uniapp)
  • 原文地址:https://www.cnblogs.com/wennice/p/9494674.html
Copyright © 2011-2022 走看看