是什么让 javascript 文件成为模块？答案

【问题标题】：What makes a java script file to be a module?是什么让 javascript 文件成为模块？
【发布时间】：2021-04-11 07:01:34
【问题描述】：

我阅读了很多关于模块的内容，并认为我真的理解它。但后来我有一个简单的例子，有两个 java 脚本文件： 1.js文件：

import './2.js';
console.log('importing');

2.js：

console.log('exporting module');
const a = 10
export const b = [];

它是声明的 html 文件：

<defer src="1.js">

然后在运行代码时出现以下错误：

未捕获的语法错误：不能在模块外使用 import 语句

现在我想了解，如果我在上面的括号中添加了一个 type="module"，是不是使得 1.js成为一个模块？！？如果答案是肯定的，那么是什么让 2.js 成为一个模块而不仅仅是一个脚本呢？

另外导入这种方式：

import './2.js'

是否会从 2.js 导入 const b？我知道它会打印到控制台，但我不明白是否会导入 const b 并且在我的浏览器中运行代码时由于不清楚的原因，我得到了两个错误： 1.CORS 策略已阻止从源“null”访问“file:///C:/Users/Dor/Desktop/17-Modern-JS-Modules-Tooling/starter/script.js”处的脚本：Cross源请求仅支持协议方案：http、data、chrome、chrome-extension、chrome-untrusted、https。

2.GET file:///C:/Users/Dor/Desktop/17-Modern-JS-Modules-Tooling/starter/script.js net::ERR_FAILED

【问题讨论】：

标签： javascript module

【解决方案1】：

模块和脚本之间的区别主要在于它的加载方式。

如果您将某些内容作为模块加载，则模块规则（尤其是范围规则）适用于它，您可以在其中使用 import 和 export。

使用type="module" 将资源作为模块加载。使用import 将资源作为模块加载。

您的第二个问题与javascript modules and CORS 重复

【讨论】：

这么好的答案！！没有像许多用户喜欢做的那样告诉数百万不相关的事情:)我安装了一个服务器，现在得到：Failed to load resource: the server responded with a status of 404 (Not Found)
@DorVak — 那么你的模块的 URL 是错误的。
是的，我已经修复它:) 谢谢.. 并意识到 const b 无法识别.. 因此，如果我们使用 import '，则只导入顶级语句。 /2.js';
仅导入您导入的内容。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
模块中的代码仍然会运行。如果您想访问该模块之外的值，则需要导出和导入它。

【解决方案2】：

Javascirpt 模块只能通过 HTTP(s) 工作，不能在本地文件中工作

【讨论】：

【解决方案3】：

JavaScript 模块将代码封装到一个有用的单元中，以导出其功能/价值。这样可以更轻松地查看更广泛的范围，更轻松地找到您要查找的内容并将相关代码保持在一起。普通网页通常通过 HTML 脚本标签加载 JavaScript 文件。这对于小型网站来说很好，但是在开发大型 Web 应用程序时，需要更健壮的组织和加载器。模块加载器通过指定一个标识 JavaScript 模块名称的字符串，让应用程序轻松加载依赖项。

模块可以相互加载并使用特殊指令导出和导入来交换功能，从另一个模块调用一个模块的函数：

export 关键字标记应可从当前模块外部访问的变量和函数。
import 允许从其他模块导入功能。

vbery 使用模块的第一步是创建一个模块，这是在 export 关键字的帮助下完成的。我们导出模块中的所有变量和函数，以便在其他文件中使用。

示例-

//export this file
export function hi(shyam) {
  return `Hello, ${shyam}!`;
}

下一步是通过 import 语句在我们的程序中使用模块。我们在文档中导入模块并使用它的变量和函数，而无需重新定义它们。

示例-

<script type="module">
    //import the JavaScript module from the file
       import {hi} from './hi.js';
      //use the hi() function, defined in the module
     document.body.innerHTML = hi('Keshav');
   </script>

【讨论】：