不使用Paperjs代码时Paperjs导致类语法错误 [英] Paperjs causing class syntax error when not using Paperjs code
问题描述
使用Paperjs:
<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="myCanvas" src="myapp.js"></script>
尝试在myapp.js中创建一个类:
Trying to create a class in myapp.js:
class Petal {
constructor(index, x, y, diameter, round) {
this.index = index;
this.x = x;
this.y = y;
this.diameter = diameter;
this.round = round;
这会在paper.js(不是我的代码，也就是paperjs框架)的[paper.js:15421:12]中创建一个语法错误意外令牌".
This creates a "syntax error unexpected token" in paper.js(not my code, thats the paperjs framework) at [paper.js:15421:12].
它是指此(第4行是14521):
It refers to this (line 4 being 14521):
function raise(pos, message) {
var loc = getLineInfo(input, pos);
message += " (" + loc.line + ":" + loc.column + ")";
var err = new SyntaxError(message);
err.pos = pos; err.loc = loc; err.raisedAt = tokPos;
throw err;
}
我是这种编码的新手，但是我很困惑.我正在制作的类甚至没有使用来自paperjs的任何代码，所以我不知道为什么它会在paper.js文件中创建错误.也是堆栈溢出的新内容，所以请告诉我我在做什么错.
I'm new to coding like this and I'm just stumped. The class I'm making doesn't even use any code from paperjs so I don't know why it's creating an error in the paper.js file. Also new to stack overflow so please tell me what I am doing wrong.
推荐答案
通过在< script> 标记上指定 type ="text/paperscript" 加载代码为 PaperScript 而不是 JavaScript .
这意味着 Paper.js 将先解析它，然后再将其传递给浏览器 JavaScript 引擎.
为了解析您的代码， Paper.js 使用解析器 acorn 图书馆.并且与 Paper.js 捆绑在一起的 acorn 版本不支持 ES6 语法.
为避免这种情况，您可以做的就是在加载 Paper.js 之前先加载更新版本的 acorn (支持 ES6 ).这实际上是在 Paper.js 操场上完成的: http://sketch.paperjs.org/
By specifying type="text/paperscript" on your <script> tag, you are loading your code as PaperScript rather than JavaScript.
This means that Paper.js will parse it first before passing it to the browser JavaScript engine.
In order to parse your code, Paper.js uses acorn, a parser library. And the version of acorn bundled with Paper.js doesn't support ES6 syntax.
What you can do to circumvent that, is loading a newer version of acorn (that supports ES6) before loading Paper.js.
This is actually what is done on the Paper.js playground: http://sketch.paperjs.org/
这是小提琴，用于说明解决方案.
请注意，我使用 https://unpkg.com 快速加载了最新版本的npm软件包，但您可以从任何地方加载它们你想要的.
Here is a fiddle demonstrating the solution.
Note that I used https://unpkg.com to quickly load the latest versions of npm packages but you load them from wherever you want.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug</title>
<!-- Load latest acron version first -->
<script type="text/javascript" src="https://unpkg.com/acorn"></script>
<!-- Then load Paper.js -->
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<style>
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
// Here you can now use ES6 syntax.
class MyClass {
constructor() {
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
})
}
}
const myInstance = new MyClass();
</script>
</body>
</html>
这篇关于不使用Paperjs代码时Paperjs导致类语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
