無法將外部 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