无法理解导入节点模块

Question

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

Instructions to import 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

您需要一些方法在它们进入浏览器之前解析这些包。浏览器不知道如何解决包 '@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

compiling/bundling 的一个选项是通过“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

您可以在 dist/sketch.js

生成包含 @mathingo/euclid 的捆绑包

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

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

Can't understand importing node modules