Vue 包中出现意外的 Token 错误答案

【问题标题】：Unexpected Token error in Vue PackageVue 包中出现意外的 Token 错误
【发布时间】：2018-10-22 06:18:19
【问题描述】：

我正在我的项目上安装一个自定义的 vue 包。在构建它时，我收到以下错误：

ERROR in ./resources/assets/js/components/devices/domain/DeviceLocation/DeviceLocation.js
Module build failed: SyntaxError: Unexpected token (2:7)

  1 | export default class DeviceLocation {

> 2 |   name = ''
    |        ^
  3 |   identifier = ''
  4 |
  5 |   constructor (data) {

好像是因为= 而不是:

DeviceLocation.js 文件

export default class DeviceLocation {
  name = ''
  identifier = ''

  constructor (data) {
    Object.assign(this, data)
  }
}

是否有任何 webpack 配置或我应该做些什么来解决这个问题？

【问题讨论】：

你能显示DeviceLocation吗？你写了那个类还是它是一个依赖项？你是用 TypeScript 还是 JavaScript 编写的？因为这看起来有点像 TypeScript 成员定义（但仍然是错误的，因为它是 =）。
我的一个同事写了这个。不是依赖。我将使用 DeviceLocation 的一部分更新问题。我不认为它是 TypeScript，因为扩展名是 .js
我会向你的同事确认这可行，并且他们没有提交未经测试的代码。
是的，他说它有效。太奇怪了！这会是某种 webpack 配置 + 一些加载器吗？
这很可能是您同事的某种配置，尽管我没有关于可能是什么的答案。问题是需要标准 JSON 格式，但您在此处显示的不是有效的 JSON。您应该查看您同事的设置并查看他的构建过程是什么，然后将其与您的进行比较以确定差异所在。无论如何，您的同事使用的非标准设置可能会破坏其他人的设置，因此除非您的其他同事使用相同的设置，否则他在这里客观上是错误的。

标签： webpack vue.js vuejs2

【解决方案1】：

据我所知class public fields 在vue-cli 生成的项目中默认不可用。您应该添加 babel 插件以使其工作。

1) 安装插件：

npm install --save-dev babel-plugin-transform-class-properties

2) 更新 babel 的配置（.babelrc 文件）。您应该将transform-class-properties 添加到现有插件列表中。例如：

# before
"plugins": ["transform-runtime"]

# after
"plugins": ["transform-runtime", "transform-class-properties"]

阅读更多关于类公共/私有字段here和关于适当的babel配置here

【讨论】：