将部分 Javascript 库导入 .html 文件时遇到很多困难答案

【问题标题】：Having a lot of difficulty with importing parts of Javascript library into a .html file将部分 Javascript 库导入 .html 文件时遇到很多困难
【发布时间】：2020-07-14 09:56:03
【问题描述】：

我在尝试将 Javascript 库的一部分导入 .html 文件时遇到了很多困难。每次我解决一个问题，我都会遇到一个新问题。安装 apache 后，我目前正在 localhost 上运行 .html 文件，但在控制台中收到两条错误消息，当我尝试从 Javascript 库安装文件时，我不知道如何修复。这些是错误消息：

由于不允许的 MIME 类型（“text/html”），从“http://localhost/js/core/MinimalStim”加载模块被阻止。源为“http://localhost/js/core/MinimalStim”的模块加载失败。

由于不允许的 MIME 类型（“text/html”），从“http://localhost/js/core/WindowMixin”加载模块被阻止。源为“http://localhost/js/core/WindowMixin”的模块加载失败。

由于不允许的 MIME 类型（“text/html”），从“http://localhost/js/util/Util”加载模块被阻止。源为“http://localhost/js/util/Util”的模块加载失败。

由于不允许的 MIME 类型（“text/html”），从“http://localhost/js/util/PsychObject”加载模块被阻止。源为“http://localhost/js/util/PsychObject”的模块加载失败。本地主机:16:1

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content = "ie=edge">
    <title>Today's date</title>
</head>

<body>
    <h1>"Today's date"</h1>
    <script src="js/visual/VisualStim.js" type="module"></script>
    <script src="js/core/MinimalStim.js" type="module"></script>
    <script src="js/core/WindowMixin.js" type="module"></script>
    <script src="js/util/Util.js" type="module"></script>

</body>

</html>

另外，是否有一次安装整个库而不是从库中分离文件，因为每次我尝试从该库导入文件时，该文件都会从同一个库中导入其他文件，这意味着我然后还必须从库中导入该文件。我在网上的任何地方都找不到有关此的任何信息。

【问题讨论】：

标签： javascript html localhost libraries

【解决方案1】：

您可以使用https://parceljs.org/ 或webpack 组合文件并生成单个。包裹重量轻。可以在最少的行中完成。设置 WebPack 几乎不需要任何努力

npm install -g parcel-bundler

关于加载问题，您似乎必须启用apache static 服务器。检查您的配置。

另一个原因可能是端口，默认端口是 80。尝试其他端口。

Serving static files through apache

您可以使用http-server、light weight 服务器来提供静态内容。

https://www.npmjs.com/package/http-server

【讨论】：