Ошибка синтаксиса при использовании оператора распространения в файлах .vue в приложении Elixir Phoenix 1.3 - PullRequest
Новая
       26

Ошибка синтаксиса при использовании оператора распространения в файлах .vue в приложении Elixir Phoenix 1.3

0 голосов
/ 23 мая 2018

Я пытаюсь создать некоторые компоненты Vue.js, где я хотел бы использовать оператор распространения для отображения некоторых состояний из Vuex в моем приложении Phoenix 1.3, но я получаю некоторые ошибки компиляции javascript: 

  26 |   },
  27 |   computed: {
> 28 |     ...mapState('module/game', ['selectedWord']),
     |     ^
  29 |   }
  30 | }
  31 |

Это обсуждаемый файл .vue: 

<template>
  <div id="guess-panel">
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: [],
  data() {
    return {
      guess: ''
    }
  },
  computed: {
    ...mapState('module/game', ['selectedWord']),
  }
}
</script>

<style lang="sass">
</style>

Вот мой файл package.json 

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "autoprefixer": "^8.5.0",
    "bootstrap": "^4.1.1",
    "copycat-brunch": "^1.1.0",
    "es6-promise": "^4.2.4",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "popper.js": "^1.14.3",
    "postcss-brunch": "^2.1.0",
    "sass-brunch": "^2.10.4",
    "typescript-brunch": "^2.3.0",
    "vue": "^2.5.16",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "babel-brunch": "6.1.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "brunch": "2.10.9",
    "clean-css-brunch": "2.10.0",
    "uglify-js-brunch": "2.10.0",
    "vue-brunch": "^2.0.3"
  }
}

А вот мой файл brunch-config.js 

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(static)/
  },

  paths: {
    watched: ["static", "css", "js", "vendor", "components"],
    public: "../priv/static"
  },

  plugins: {
    babel: {
      ignore: [/vendor/],
      plugins: ['transform-object-rest-spread']
    },
    brunchTypescript: {
      removeComments: true
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap/scss"], // Tell sass-brunch where to look for files to @import
        precision: 8 // Minimum precision required by bootstrap-sass
      }
    },
    vue: {
      extractCSS: true,
      out: '../priv/static/css/components.css'
    },
    postcss: {
      processors: [
        require('autoprefixer')(['last 8 versions'])
      ]
    },
    copycat:{
      "js" : ["vendor/fontawesome"],
      verbose : true, //shows each file that is copied to the destination directory
      onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery', // Bootstrap's JavaScript requires '$' in global scope
      jQuery: 'jquery', // Bootstrap's JavaScript requires 'jQuery' in global scope
      Popper: 'popper.js', // Bootstrap's JavaScript requires 'Popper' in global scope
      bootstrap: 'bootstrap', // Require Bootstrap's JavaScript globally
      _: 'lodash'
    }
  }
};

Насколько мне известно, это должно работать.Чего мне не хватает?

1 Ответ

0 голосов
/ 24 мая 2018

Вы используете синтаксис ES6 stage-2.

Сначала вам нужно установить пакет 

npm install --save-dev babel-preset-stage-2

и обновить .babelrc 

{
  "presets": ["stage-2"]
}

Youможете проверить это здесь

...