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=“module”）修复了这个错误 错误消失了，但现在是“同源策略不允许读取文件（路径）处的远程资源”（原因：cors请求不是HTTP）

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

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

感谢您的帮助

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

export { show_message };

及

我认为这应该能奏效。这是一种名为导出/导入的技术。如果需要，您可以在此名称下查找更多信息。

您可能需要使用此名称。它允许您编写NodeJS风格的模块，然后将它们编译成一个浏览器友好的JavaScript文件，从而使您能够获得只加载一个文件的所有性能优势。这还意味着您可以轻松地在服务器端和客户端使用相同的代码

如果你想继续使用单独的文件，看起来你已经走上了正轨。与常规JavaScript文件不同，模块受跨源资源共享（）限制。它们必须从同一来源加载，不能从本地文件系统加载。如果从本地文件系统加载，请将其移动到服务器。如果您已经在服务器上托管它们，请将

Access Control Allow Origin:

头添加到为模块文件提供服务的响应中

---

在用于在浏览器中加载js的脚本标记上，您需要添加属性

type=“模块”

它将如下所示：

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

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

如果您没有使用像webpack这样的捆绑包，并且直接在浏览器中工作，则会出现这种情况

---

代码来源：

JavaScript有模块已经很长时间了。但是，它们是通过库实现的，而不是内置到语言中，也就是说，您不能将这些模块的一部分导入或导出到js文件中（需要加载整个库）。ES6是JavaScript首次具有内置模块

有关ES模块的更多信息，请参阅

但是事情已经改变了，ES模块现在可以在浏览器中使用了！他们在

Safari 10.1+、Chrome 61+、Firefox 60+、Edge 16+等

现在，您需要使用新的扩展名.mjs创建JS文件，如

// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

然后，您可以将该文件导入html页面，如

<script type="module">
 import {addTextToBody} from './utils.mjs';

 addTextToBody('Modules are pretty cool.');
</script>

从“/utils.mjs”导入{addTextToBody}；
addTextToBody（'模块非常酷'）；

有关在浏览器中使用ES模块的更多信息，请参阅。

考虑使用某些扩展可能会导致模块加载出现问题：

可能是对你期望的答案

您应该首先检查浏览器是否接受type=“module”，如果不接受，则使用回退：

<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

这可能是此处所述CORS错误的主要原因：

与常规脚本不同，模块脚本（及其导入）是获取的 用CORS。这意味着跨源模块脚本必须返回有效的 诸如

访问控制的CORS头允许来源：

因此，您需要将CORS头添加到模块文件中

---

考虑CORS问题。您应该在服务器配置中添加CORS头文件，即访问控制允许源文件：。

在浏览器中使用JS模块 在web上，通过将type属性设置为module，您可以告诉浏览器将元素视为模块

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

更多关于

---

如果您正在使用webpack和babel，并且希望将代码导入到您的捆绑包中，我想应该是以下之一：

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

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

然后在代码中：

import show_message from 'path/to/show_message.js'
// or 
import { default as someOtherName } from 'path/to/show_message.js'

import { show_message } from 'path/to/show_message.js'
// or 
import { show_message as someOtherName } from 'path/to/show_message.js'

或者，如果要导出多个函数：

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

然后在代码中：

import show_message from 'path/to/show_message.js'
// or 
import { default as someOtherName } from 'path/to/show_message.js'

import { show_message } from 'path/to/show_message.js'
// or 
import { show_message as someOtherName } from 'path/to/show_message.js'

希望这能有所帮助。

0。简短的回答 您需要安装并运行本地web服务器。-关于如何进行的建议， 继续读下去

1.基础 我尝试了一个简单的HTML文件--

index.HTML

，如下所示：

你好，世界！
正在试验JavaScript模块

在子文件夹

js

中，我放置了JavaScript文件

functions.js

：

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

//js/functions.js
警惕（“你好”）；

双击

index.html

时，我的默认web浏览器–Firefox 89.0 （64位）–按F12键后显示以下内容。 请注意JavaScript代码是如何不运行的：

错误消息：

跨源请求被阻止：同一源策略不允许读取远程资源file:///C:/stackexchange/reproduce/jsModule/moduleNW/basics/js/functions.js. （原因：CORS请求不是http）。

作弊的“解决方案”是（暂时）从HTML中删除

type=“module”

代码。
然后将显示警报，但不会出现错误

但是我想把JavaScript代码作为一个模块运行，所以我把 HTML中的

type=“module”

2.安装并运行本地web服务器 要将其作为模块运行，它需要在web服务器上运行。 因此，如果您想运行