无法理解导入节点模块答案

【问题标题】：Can't understand importing node modules无法理解导入节点模块
【发布时间】：2021-02-04 08:53:15
【问题描述】：

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

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

【问题讨论】：

你需要一个模块捆绑器来像这样导入它。你是如何开发你的应用程序的？
@codemonkey 我正在尝试做一个简单的网页。我有一个 html 文件，该 html 文件引用了应该是代码的 javascript 文件。我使用 npm 的唯一原因是图书馆的网站告诉我这样做（在说明图片中）

【解决方案1】：

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

【讨论】：

【解决方案2】：

在它们进入浏览器之前，您需要某种方法来解析这些包。浏览器不知道如何解决包'@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（未测试）

【讨论】：