无法理解导入节点模块

我对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 “/”.

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

编译/绑定的一个选项是通过"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>

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

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

你可以查看webpack-cli，找到一个简单的方法来生成绑定的sketch.jshttps://www.npmjs.com/package/webpack-cli

安装cli后，我相信你可以做webpack-cli build --entry sketch.js(未测试)

相关内容