2020 JavaScript 模块介绍和使用

Question

在这篇文章中，我们将介绍标准的 JavaScript 模块，目前是如何在前端应用程序中使用的，以及未来我们可能会如何使用它们。JavaScript 模块有时被称为 ESM，它代表 ECMAScript 模块。

什么是 JavaScript 模块？

JavaScript 模块 是构造 JavaScript 代码的一种方法。模块中的代码与其他模块中的代码是隔离的，并且不在全局范围内。

<script>
  function hello() {
    console.log("hello Bob");
  }
</script>
<script>
  function hello() {
    console.log("hello Fred");
  }
</script>
<script>
  hello(); // outputs hello Fred
</script>

上面的代码定义了两个函数，没有使用模块，在全局作用域会产生冲突。JavaScript 模块解决的另一个问题是不必担心 HTML 页面上脚本元素的顺序：

<script>
  hello(); // - Uncaught ReferenceError: hello is not defined
</script>
<script>
  function hello() {
    console.log("hello");
  }
</script>

在上面的示例中，定义 hello 函数的脚本元素需要放在调用 hello 函数的脚本元素之前。 如果有很多这样的 Javascript 文件，就很难管理了。

现在 JavaScript 模块通常是如何使用的？

JavaScript 模块语法是在 ES6 中引入的，通常在我们今天构建的应用程序中使用，如下所示：

import React from 'react';
...
export const HomePage = () => ...

上面的示例导入 React 模块并导出 HomePage 组件。不过，这段代码并没有使用 JavaScript 模块。取而代之的是，Webpack 将其转换为非原生模块，而采用了 IIFE（立即调用函数表达式）来做 。值得注意的是，Webpack 确实有一个实验性的 outputModule 特性，允许它以原生模块格式发布。希望 Webpack 5 中包含这个功能!

使用原生的 JavaScript 模块

要声明一个引用 JavaScript 模块代码的脚本元素，需要将类型属性设置为module:

<script type="module">
  import { hello } from "/src/a.js";
  hello();
</script>

这是 src 文件夹中 a.js 中的 JavaScript：

// /src/a.js
import { hellob } from "/src/b.js";
import { helloc } from "/src/c.js";

export function hello() {
  hellob();
  helloc();
}

因此，在 a.js 中的 hello 函数，调用了在 b.js 中调用 hellob，在 c.js 中调用 helloc。这是来自 b.js 和 c.js 的 JavaScript：

// /src/b.js
export function hellob() {
  console.log("hello b");
}

// /src/c.js
export function helloc() {
  console.log("hello c");
}

请注意，我们需要提供要导入的文件的完整相对路径，并且还需要包含文件扩展名。我们可能更习惯于一个简单的导入说明符，如下所示：

import { hello } from "a";

稍后我们将再次介绍原生的导入说明符。还请注意，我们不必在 **HTML **文件中声明所有模块。浏览器在运行时会去解析它们。需要注意的是，不能从普通脚本元素使用 JavaScript 模块。例如，如果我们尝试不使用 type 属性，脚本元素将不会被执行:

<script>
  // - 不能在模块外部使用import语句
  import { hello } from "/src/a.js";
  hello();
</script>

用 JavaScript 模块编写的代码在默认情况下以 严格模式 执行。所以没有必要在代码顶部使用 use strict:

<script type="module">
  let name = "Fred";
  let name = "Bob"; // - Identifier 'name' has already been declared
</script>

JavaScript 模块错误

让我们以前面的类似示例为例，其中有 JavaScript 模块 a，b，c。模块 a 依赖于模块 b 和 c。模块 b 和c没有依赖关系。假设 c.js 中包含运行时错误：

export function helloc() {
  consol.log("hello c"); // - Uncaught ReferenceError: consol is not defined
}

从 HTML 文件调用代码的方法如下：

<script type="module">
  import { hello } from "/src/a.js";
  hello();
</script>

在 a.js文件中：

import { hellob } from "/src/b.js";
import { helloc } from "/src/c.js";

export function hello() {
  hellob();
  helloc(); //