无法理解导入节点模块

Question

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

导入 euclid.ts 的说明

所以这就是我所做的：

首先我运行了命令。 然后在我的 html 文件中，名为index.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

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

因此，在浏览器中运行的实际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"
  }
}

草图.js

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


console.log ("sketch")

然后运行npm install或yarn install

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

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

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

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