SyntaxError:意外的标记静态
Posted
技术标签:
【中文标题】SyntaxError:意外的标记静态【英文标题】:SyntaxError: Unexpected token static 【发布时间】:2016-04-21 15:34:45 【问题描述】:我目前正在尝试评估与 React 一起使用的不同测试框架,结果发现 Jest 在我的列表中。但是,我正在尝试使用此处列出的静态属性:https://github.com/jeffmo/es-class-fields-and-static-properties。
所以,我参考了 Jest 主页上给出的教程,并添加了一个静态 propTypes 属性,我的代码如下所示:
import React from 'react';
class CheckboxWithLabel extends React.Component
static defaultProps =
constructor(props)
super(props);
this.state = isChecked: false;
// since auto-binding is disabled for React's class model
// we can prebind methods here
// http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
this.onChange = this.onChange.bind(this);
onChange()
this.setState(isChecked: !this.state.isChecked);
render()
return (
<label>
<input
type="checkbox"
checked=this.state.isChecked
onChange=this.onChange
/>
this.state.isChecked ? this.props.labelOn : this.props.labelOff
</label>
);
module.exports = CheckboxWithLabel;
当我运行测试(npm test 或 jest)时,它会抛出以下错误:
➜ jest
Using Jest CLI v0.8.2, jasmine1
FAIL __tests__/CheckboxWithLabel-test.js
● Runtime Error
SyntaxError: Desktop/jest/examples/react/CheckboxWithLabel.js: Unexpected token (5:22)
我的 package.json 文件如下所示:
"dependencies":
"react": "~0.14.0",
"react-dom": "~0.14.0"
,
"devDependencies":
"babel-jest": "*",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"jest-cli": "*",
"react-addons-test-utils": "~0.14.0"
,
"scripts":
"test": "jest"
,
"jest":
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/fbjs"
],
"modulePathIgnorePatterns": [
"<rootDir>/node_modules/"
]
关于我在这里缺少什么的任何想法?
谢谢。
【问题讨论】:
【参考方案1】:关于我在这里缺少什么的任何想法?
类属性既不是es2015
也不是react
预设的一部分。
您必须加载处理类属性的插件:
npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties
在您的 .babelrc
文件中(现有插件或预设旁边):
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
【讨论】:
谢谢!在此之后还有另一个错误:“SyntaxError: Unexpected token ..”,有什么想法吗? 插件是特定于 Babel 6 的吗?只需设置阶段 0,我就可以在 5.x 中使用它。@HappyCry 它是否指向特定的行? @MattMolnar:是的,那是为了 Babel 6。【参考方案2】:出现此错误是因为标准 ES2015(ES6) 类只能有方法,不能有属性。
对我来说,通过安装 babel-preset-stage-0
解决了这个问题,它增加了对类属性的支持。
npm install babel-preset-stage-0 --save-dev
然后配置Webpack(或.babelrc
)使用这个预设:
//...
presets: ['react', 'es2015', 'stage-0']
//...
更新:
截至 2018 年中,Babel env
预设支持 ES2015、ES2016 和 ES2017。
因此,您可以跳过 stage-0 预设,而使用 env 预设
npm install babel-preset-env --save-dev
然后将您的 .babelrc
更新为
//...
presets: ['env', 'xyz']
//...
要支持最新的 ES2018 功能,例如扩展运算符/异步功能,您可以添加 stage-3
预设。
Reference tutorial
【讨论】:
以上是关于SyntaxError:意外的标记静态的主要内容,如果未能解决你的问题,请参考以下文章
控制台:SyntaxError:位置 0 处的 JSON 中的意外标记 < [重复]
SyntaxError:位置 0 处 JSON 中的意外标记 C
SyntaxError:位置 2 处 JSON 中的意外标记 e
在 JSON.parse 的位置 0 处获取“SyntaxError:”JSON 中的意外标记”