无法将外部 JS 库导入 web 应用程序

Question

我正在尝试制作一个基本的 web 应用程序，它将<textarea>中的 markdown 转换为 HTML。 为此，我想使用 PageDown 库，SO 也使用它： https://code.google.com/archive/p/pagedown/wikis/PageDown.wiki 。

我下载了 PageDown 源代码，将其解压缩并放在包含我的 HTML/JS 文件的顶级目录中。 所以目录结构是这样的：

.
├── index.html
├── main.js
├── pagedown
│   ├── LICENSE.txt
│   ├── Markdown.Converter.js
│   ├── Markdown.Editor.js
│   ├── Markdown.Sanitizer.js
│   ├── README.txt
│   ├── demo
│   ├── local
│   ├── node-pagedown.js
│   ├── package.json
│   ├── resources
│   └── wmd-buttons.png
└── style.css

然后我尝试通过以下方式加载它：

main.js ：

import { Converter } from 'Markdown.Converter.js'

var text = "**Markdown rocks**"

var converter = new Markdown.Converter();
var html = converter.makeHtml(text);

index.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="main.js" defer></script>
    <script type="module" src="./pagedown/Markdown.Converter.js"></script>
    <script type="module" src="./pagedown/Markdown.Sanitizer.js"></script>
    <script type="module" src="./pagedown/Markdown.Editor.js"></script>
    <title>Text</title>
</head>
<body>
    <textarea name="" id="textinput" cols="30" rows="10"></textarea>
    <div id="output"></div>
</body>
</html>

然后我使用 VSCode Live Server 扩展在 Chrome 中运行代码。 我得到以下 output：

Uncaught TypeError: Failed to resolve module specifier "Markdown.Converter.js". Relative references must start with either "/", "./", or "../".
Markdown.Sanitizer.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'Converter')
    at Markdown.Sanitizer.js:8:28
    at Markdown.Sanitizer.js:108:3
(anonymous) @ Markdown.Sanitizer.js:8
(anonymous) @ Markdown.Sanitizer.js:108
Markdown.Editor.js:92 Uncaught ReferenceError: Markdown is not defined
    at Markdown.Editor.js:92:5
    at Markdown.Editor.js:2301:3

因此，我尝试将Markdown.*脚本的路径更改为/pagedown/Markdown.*.js和pagedown/Markdown.*.js ，但两者都出现了相同的错误。

我不确定我在这里做错了什么。

Answer 1

1.字面答案

您需要将Markdown.Converter.js中的import路径更改为main.js的相对位置：

import { Converter } from './pagedown/Markdown.Converter.js';

2.模块错误

但是如果你现在尝试这个，你会得到一些错误，比如：

未捕获的语法错误：请求的模块“./pagedown/Markdown.Converter.js”未提供名为“Converter”的导出

3.修复

这是因为Markdown.Converter.js不是 ESM JavaScript 文件。 我们可以告诉这一点，因为它没有export语句。

3.1 ESM 到非 ESM

我们不得不呼吁的是加载脚本的“老式”版本，因为这些脚本将它们的库代码设置为“全局”scope。 我们可以在Markdown.Converter.js中看到这一点，因为在它的前几行中，它的语句没有包含在任何其他 scope 中：

var Markdown;

因此，为了让这些脚本能够访问全局 scope 以便main.js可以“访问”它们的代码，我们需要从这些脚本中删除type="module" ，因为（根据MDN 文档）：

除非显式附加到全局 object，否则模块定义的变量将作用于模块。

所以现在你的index.html应该是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="main.js"></script>
    <script src="./pagedown/Markdown.Converter.js"></script>
    <script src="./pagedown/Markdown.Sanitizer.js"></script>
    <script src="./pagedown/Markdown.Editor.js"></script>
    <title>Text</title>
</head>
<body>
    <textarea name="" id="textinput" cols="30" rows="10"></textarea>
    <div id="output"></div>
</body>
</html>

3.1.1 ESM脚本加载说明

注意：根据上述相同的MDN 文档：

加载模块脚本时无需使用defer属性（参见<script>属性）； 模块会自动延迟。

我们不需要main.js脚本上的defer 。

3.2 删除导入

现在Markdown位于 main.js 可用的全局main.js中，我们不再需要import语句，因此您的整个main.js现在应该如下所示：

var text = "**Markdown rocks**"

var converter = new Markdown.Converter();
var html = converter.makeHtml(text);

无法将外部 JS 库导入 web 应用程序

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-08-06 14:00:52

1.字面答案

2.模块错误

3.修复

3.1 ESM 到非 ESM

3.1.1 ESM脚本加载说明

3.2 删除导入

无法将外部 JS 库导入 web 应用程序

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-08-06 14:00:52

1.字面答案

2.模块错误

3.修复

3.1 ESM 到非 ESM

3.1.1 ESM脚本加载说明

3.2 删除导入

解决方案1
1 已采纳 2022-08-06 14:00:52