浏览器不显示 JavaScript 图形，而是显示代码

Question

我已经为该项目安装了 Node.js 模块和 canvas-sketch 库。 当我尝试在浏览器上打开 sketch.js 文件时，我看到的是代码而不是图形。

文件内容：

const canvasSketch = require('canvas-sketch');

const settings = {
  dimensions: [ 2048, 2048 ]
};

const sketch = () => {
  return ({ context, width, height }) => {
    context.fillStyle = 'blue';
    context.fillRect(0, 0, width, height);
  };
};

canvasSketch(sketch, settings);

我该如何解决这个问题？

它应该在屏幕上显示蓝色矩形，但我得到的是代码行。

Answer 1

您需要（重新）启动开发服务器。

运行

canvas-sketch sketches/sketch-1.js

（替换为您要加载的草图）以从命令行或终端启动服务器。

如果没有错误，您将收到一条消息

info  Server running at http://[some local address]

，您可以在其中查看草图。

Answer 2

你的问题的答案是浏览器是用来运行HTML文件的。例如，这是一个js文件的链接：https://cdn.socket.io/4.7.5/socket.io.min.js 它显示 JS，但不运行它。要运行它，您首先必须将其放入 html 文件中，如下所示：

<script src="/your file path/yourfile"> </script>

或：

<script>
//some js code
</script>