Question

我对 Web 开发非常陌生。我会尽量缩短问题。我正在尝试使用名为 euclid.ts 的 javascript 库。它的页面告诉你：

所以这就是我所做的：

首先我运行了命令。然后在名为 index.html 的 html 文件中，我导入了一个名为 Sketch.js

的脚本文件

<body>
<script type="module" src="sketch.js"></script>
</body>

然后在我的 sketch.js 文件中，我在顶部有这一行：

import {Point, Line} from '@mathigon/euclid'

问题是，当我在浏览器中打开 index.html 时出现此错误：

Uncaught TypeError: Error solving the module “@flatten-js/core”. 
Mode specifiers must start with “./”, “../” or “/”.

我不明白我做错了什么（如果我什至没有在导入行中指定文件，浏览器怎么知道要导入哪个文件）

Answer 1

在它们进入浏览器之前，您需要某种方式来解析这些包。浏览器不知道如何解析包 '@mathigon/euclid' 的依赖关系。另一方面，代码编辑器可以解决依赖关系。您看到的错误是 '@mathigon/euclid' 所依赖的包的错误。

因此，在浏览器中运行的实际 sketch.js 应该被打包，并且应该是包含来自 '@mathigon/euclid' 的代码及其所有依赖项的文件。

您可以查看 webpack-cli 以轻松生成捆绑的 sketch.js https://www.npmjs.com/package/webpack-cli

安装 cli 后，我相信您可以执行 webpack-cli build --entry sketch.js（未测试）

Answer 2

编译/捆绑的一种选择是通过“webpack”。 https://webpack.js.org/guides/getting-started/

如果您像这样设置文件夹：

/project
  package.json
  sketch.js

package.json

{
  "dependencies": {
    "@mathigon/euclid": "^0.6.9",
    "webpack": "^5.20.1",
    "webpack-cli": "^4.5.0"
  }
}

sketch.js

import { Point, Line } from '@mathigon/euclid'


console.log ("sketch")

然后运行 npm install 或 yarn install

然后运行 ./node_modules/.bin/webpack ./sketch.js

您可以在 @mathingo/euclid 处生成包含 dist/sketch.js 的捆绑包

之后，脚本标签可能如下所示：

<script src="dist/sketch.js"></script>