Javascript 模块在浏览器中不起作用？

好吧，我查看了这个网站并找到了几个不同的答案，但没有一个对我有用。基本上有一个 js 文件，其中包含许多功能以及应用程序的主要代码。我想将我所有的功能移动到另一个 js 文件，这样我就可以稍微清理一下我的代码。我是 js 的新手，但我知道在 python 中它就像说“从(路径)导入(模块)作为(昵称)”一样简单

无论如何，假设我的 functions.js 模块中有一个名为 show message 的函数。

export function show_message(){
    alert("Hello");
}

然后我在我的 main.js 文件的顶部

import { show_message } from './functions.js'
//I have also tried to import like this:
import * as func from './functions.js'

//And then I call it
show_message();
//I have also tried
func.show_message();

我知道这很简单，但正如我所说的，我到处都看到了不同的答案，但没有一个对我有用。顺便说一句，我正在使用 Firefox。我还在控制台中收到一条错误消息，提示我的导入声明需要位于模块的顶部，我通过在 HTML 链接中指定类型来解决此问题 (script src="/static/main.js"type="模块”) 错误消失了，但现在说“同源策略不允许读取文件(路径)中的远程资源(原因:cors 请求不是 HTTP)。”

另一个错误是“本文档中不允许使用模块源 URI”。

这让我觉得也许我的导入语法是正确的，错误是在我的 HTML 代码中？

感谢任何帮助。

最佳答案

0。简短的回答

您需要安装并运行本地网络服务器。 - 有关如何的建议，继续阅读。

1。基础知识

我尝试了一个简单的 HTML 文件 – index.html – 如下:

<!-- index.html - minimal HTML to keep it simple -->
<html>
<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="#">
</head>
<body>
  <h1>Hello world!</h1>
  <p>Experimenting with JavaScript modules.</p>
  <script type="module" src="js/functions.js"></script>
</body>
</html>

在子文件夹中js我把 JavaScript 文件 functions.js :

// js/functions.js
alert('Hello');

双击时index.html , 我的默认网络浏览器 – Firefox 89.0 (64 位)- 按 F12 后显示以下内容。请注意 JavaScript 代码是如何未运行的:

错误信息:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/stackexchange/reproduce/jsModule/moduleNW/basics/js/functions.js. (Reason: CORS request not http).

作弊“解决方案”是(暂时)删除 type="module"从 HTML 代码。
警报随后会正确显示。

但是我想将JavaScript代码作为一个模块来运行，所以我放回去 type="module"在 HTML 中。

2。安装并运行本地网络服务器

要将其作为模块运行，需要在网络服务器上运行。因此，如果您想在自己的计算机上运行代码，则需要 (安装并)启动本地网络服务器。
当前流行的一种替代方法是 live-server。这对我有用。

打开一个终端。 (在 Windows 上:cmd.exe。)
输入 npm然后按 Enter 查看是否安装了 Node.js。
如果你得到 command not found , 下载地址 https://nodejs.org/en/download/ 并安装。 ¹
(在 Ubuntu 上，您可以尝试 sudo apt install -y nodejs 。)
安装实时服务器:npm install live-server -g .
将目录更改为页面所在的位置:cd <path-to-index.html> .
启动服务器:live-server .
(应该在默认浏览器中打开 localhost:8080 并显示警报。见下文。)

注意 1。我在 Windows 10 上，但上面的说明在 Linux 和 macOS 也是。
注释 2。这里我使用的是 Firefox 89.0，但我也尝试过 Google Chrome 91.0。唯一值得注意的区别是 CORS 错误消息，在 Chrome 中显示为:
Access to script at 'file:///C:/stackexchange/reproduce/jsModule/basics/js/functions.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

3。导出和导入

接下来我创建一个新文件夹 demo2包含以下 demo2.html :

<!-- demo2.html - even shorter HTML for simplicity -->
<body>
  <h1>Hello world!</h1>
  <p>Javascript modules.</p>
  <script type="module" src="js/main.js"></script>
</body>

我还在子文件夹 js 中创建了以下三个 JavaScript 文件:

// js/module1.js
export function hi () { console.log('Hi from module 1.'); }

和

// js/module2.js
export function howdy () { console.log('Howdy from module 2!'); }

和

// js/main.js
import { hi } from './module1.js';
import { howdy } from './module2.js';
hi();
howdy();

现在，我从 demo2.html 所在的文件夹中的终端运行 live-server 居住。这次我开始打字 live-server --port=1234 --entry-file=demo2.html 并点击 Enter。截图:

引用资料:

¹ 在 Windows 10 上，我曾经需要 repair the installation .

关于Javascript 模块在浏览器中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52139811/