Paperjs causing class syntax error when not using Paperjs code

问题

Using Paperjs:

<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="myCanvas" src="myapp.js"></script>

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;

This creates a "syntax error unexpected token" in paper.js(not my code, thats the paperjs framework) at [paper.js:15421:12].

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;
  }

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.

回答1:

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/

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>

来源：https://stackoverflow.com/questions/58847325/paperjs-causing-class-syntax-error-when-not-using-paperjs-code

标签

javascript

paperjs