无法在 index.js 中加载 markdown.md答案

【问题标题】：Cannot load markdown.md inside index.js无法在 index.js 中加载 markdown.md
【发布时间】：2021-08-02 08:01:50
【问题描述】：

我正在构建 Markdown 预览器，我想为我的元素添加一个占位符。

占位符是用 Markdown 编写的，我正在尝试将其导入到我的 index.js 文件中

import placeholder from './sample.md'; // Importing from the local folder


const $ = document.querySelectorAll.bind(document);

marked.setOptions({
    breaks: true
});

let renderer = new marked.Renderer();
renderer.link = function(href, title, text) {
    return `<a target="_blank" href="${href}">${text}` + `</a>`
}

let txtArea = $('textarea')[0];
txtArea.addEventListener('input', event => {
    $('.prev-text')[0].innerHTML = marked(event.target.value, {renderer: renderer})
});

我想使用“sample.md”的内容并将其保存到变量“占位符”中，以便我可以设置它作为我的中的默认文本。

现在我无法加载“sample.md”，浏览器抛出此错误：“加载模块脚本失败：服务器以“text/markdown”的非 JavaScript MIME 类型响应。严格的 MIME 类型检查是根据 HTML 规范对模块脚本强制执行。”

这是我的 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">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <title>Markdown Previewer</title>
</head>
<body>
    <div class="container">
        <div class="editor">
            <div id="ed-navbar" class="navbar">
                EDITOR
            </div>
            <textarea name="markdown"></textarea>
        </div>
        <div class="preview">
            <div id="pr-navbar" class="navbar">
                PREVIEW
            </div>
            <div class="prev-text">
                
            </div>
        </div>
    </div>
    <script type="module" src="./index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</body>
</html>

【问题讨论】：

嗯，线索在错误信息中。 import 正在寻找模块脚本，但您正在尝试加载降价。你应该看看FileReader API。
我使用fetch 解决了我的问题，然后在响应中使用text 方法！

标签： javascript markdown

【解决方案1】：

我解决了，谢谢大家的帮助，没有你就不会这样做！

const mrk = new Request('sample.md');

fetch(mrk)
    .then(data => data.text())
    .then(text => {
        $('textarea')[0].innerHTML = text;
        $('.prev-text')[0].innerHTML = marked(text, {renderer: renderer})
    });

【讨论】：