其次，我们代码部分之间的关​​系是隐式的，可以以意外的方式破坏我们的代码。如果Script1之后的某个地方有另一个sayHi函数，而我稍后将其称为脚本1版本，则实际上它将被另一个实现所覆盖。对于用var定义的函数声明和变量而发生的情况发生。对于使用const或let定义的任何变量（包括函数表达式）的任何变量，情况甚至更糟 - 如果另一个已经以相同名称存在的另一个变量，则会导致错误。对于使用许多库和框架的代码，这是不可行的。

最后，全局变量和函数创建了安全问题。运行代码的任何人都可以运行脚本以访问您的代码内部工作，甚至更改其所做的工作。

那么我们该如何处理呢？答案是模块。但是，在JavaScript中使用了适当的模块系统之前，有一种方法可以稍微降低全球范围的问题，有时也称为模块模式。

“模块模式”

在模块之前，图书馆作者将其代码包装在一个功能中，因此内部工作不在全局范围内，也不会与任何东西发生冲突。在该函数内部，他们会将所有库的公共API添加到一个对象（例如，在著名的jQuery示例中的$对象），并将其添加到窗口对象中，以使其在全球范围内访问。最后，他们将包装功能调用以使其正常工作。

这里的收获是，包装功能的名称仍将最终出现在全局范围上。这个问题用晦涩的技术避开了。如果JavaScript是 expression 的一部分，我们可以在JavaScript中无需定义函数（解决值的代码行）。通常，表达式被分配给一个变量，但它们不必是 - 仅编写诸如3之类的值是JavaScript的一个非常有效的行。

但是，未分配给变量的函数被JavaScript编译器视为函数声明，因此它将期望函数名称。将表达式放入括号内的表达式确信编译器这不是函数声明。然后，我们需要调用该函数，并且由于以后不能这样做（没有名称可以参考），因此我们必须立即执行此操作。因此，我们得到了这个奇怪的构造，称为立即调用函数表达式（iife）：

(function() {
    const library = {}
    // my library code...
    window.library = library;
})();

这种模式在JavaScript代码中非常广泛使用，但绝对不是理想的。每个模块仍然将公共对象暴露于 其他脚本，我们仍然必须管理脚本的依赖性顺序。

，让我们看看模块系统如何为我们解决这些问题。

eCMAScript模块（ESM）

ecmascript规范中描述了一个模块语法（定义JavaScript）。它使用关键字import和export链接依赖项。

例如，在脚本1中，我可以：

export function sayHi() {
  alert("hi");
}

然后，在script2：
中

import { sayHi } from "./script1.js";

sayHi();
// the "hi" alert shows in the browser

我们可以立即查看这一点 - 现在明确定义了不同文件之间的关系。并且每个模块内部的代码都范围为模块， 全球范围内。因此，只能在导入的地方使用sayHi。如果我不导入，我会发现一个错误：

sayHi();
// Uncaught ReferenceError: sayHi is not defined

import { sayHi } from "./script1.js";

function sayHi() {}

sayHi();
// Uncaught SyntaxError: Identifier 'sayHi' has already been declared

避免命名冲突的一种方法是使用模块对象语法，该语法将导入文件的任何导出添加到带有任何名称的对象中。

import * as Script1 from "./script1.js";

Script1.sayHi()
// the "hi" alert shows in the browser

在浏览器中使用模块

现在是复杂的位。 ESM已成为现代Web应用程序的标准，但是有一些历史。

首先，该系统仅在通常称为ES6（第六版）的2015年版本中添加到Ecmascript规范中。在此之前，浏览器根本不了解ESM语法或具有将脚本包装到孤立模块中的功能。

实际上是为运行JavaScript 外部创建的第一个JS模块系统，由Commonjs Project在2009年浏览器。然后在流行的JS运行时环境Node.js中实现。

commonjs模块使用与ESM不同的语法。例如，这是脚本1中的命名导出：

module.exports.sayHi = function sayHi() {
  console.log("hi");
}

const { sayHi } = require('./script1')

sayHi()
// "hi" is logged to the console

其他库可作为命令行构建工具提供。这些在之前汇总了commonjs code ，它已交付给浏览器。创建了一种称为Browserify的流行工具，以处理模块之间的依赖关系，并且 bundle 在单个脚本标签中的所有代码。后来，它被Webpack和其他可以处理ESM语法的捆绑包取代，并提供了我们在下一篇文章中讨论的其他功能。

不幸的是，在ESM上没有关于最佳模块方法的共识，因此库作者需要其代码才能使用 commonjs或amd的用户工作。这导致了通用模块定义（UMD），基本上使作者回到了使用IIFE，然后添加代码以在运行时使用的任何方式导出模块。

import MyLibrary from "./MyLibrary.js"

<script type="module" src="./script1.js"></script>
<script type="module" src="./script2.js"></script>

you 可以 访问要使用并下载代码的库的网站或github存储库，然后将其添加到您的项目中。但这很慢，您还必须下载其依赖的所有库。由于如今的JS项目具有太多的依赖关系，因此这并不是真正可行的。这仅适用于图书馆的一个版本，不介意处理更新。

一种更常见的方法是将<script>标签中的链接到库代码（及其依赖项）的服务器的URL。为此，作者必须首先宣传此链接，并且服务器必须允许 cross-origin请求（来自其他URL的请求）。此外，为了使代码快速进入浏览器，它们很可能会使用内容输送网络（CDN）。

CDN链接

CDN是世界各地的服务器网络。 Cloudflare，Akamai，Amazon，Google，Microsoft等公司都提供了这些网络，代码作者为处理其资源服务，例如网站，应用程序或库。

作者通常将其代码放在自己的服务器上（称为 Origin Server ），但要么设置重定向或改变其URL以指向CDN。 CDN服务器从原点汲取该资源并缓存它，以便用户在任何地方，都应附近有一个副本，可以快速到达它们。定期地，CDN服务器请求原始服务器的资源以确保其最新，或者作者可以手动使缓存无效。

通过CDN使用库的优点是您不必自己下载代码或其依赖项，而且通常是快速且可靠的。另外，对于用户来说可能会更好，因为由于多个站点可以从同一cdn访问库，因此用户的浏览器可能已经使您链接到的资源已经缓存，在这种情况下，它不需要通过网络再次获取它。那么，为什么不将CDN链接用于所有内容呢？

首先，有一些小缺点可能是一个问题，例如无法离线工作或无法控制您的项目所需的资源。另一个简单的是，可能没有用于使用库的CDN链接。

，但也有更大的原因：

• admin。在开发过程中，您需要在正确的位置添加所有<script>标签。然后，随着时间的流逝，您需要手动管理第三方软件包更新时需要的版本。
• 性能。这是我们前面提到的同一问题 - 浏览器必须对每个<script>标签做出单独的请求（除非资源在浏览器缓存中），这将减慢生产中的负载时间。

对于一个很小的项目，这些弊端可能没有问题。但是对于其他一切，这就是为什么软件包经理如此受欢迎的原因。软件包经理提供了一个用于管理依赖关系的系统。所有代码都存储在开发人员的计算机上，因此可以在必要时离线开发应用程序。您可以使用捆绑器仅输出一个<script>标签（或者您喜欢的许多标签）。

包裹的缺点？它们来自节点。您必须在计算机上运行node.js，然后一个捆绑器将所有模块连接在一起。对于初级开发人员来说，这可能是一个障碍，并为开始JS项目的入门增加了一些复杂性。但是对于大多数JS开发人员而言，这并不重要 - 我们接受了设置节点的不便，并偶尔接受了Bundler配置，以换取其提供的好处。

然而，这确实意味着浏览器中的本地ESM在2015年到来时有些死亡。那。

所以让我们深入研究包装的工作方式。

软件包

一个软件包是代码库以及有关代码的信息，例如版本号。软件包管理器是可让您下载，管理并在必要时创建这些软件包的工具。它具有与注册表通信的命令行接口，该界面是用户发布的所有软件包的数据库。这些不是全部公开（例如，可以访问特定组织），但是许多是。

我们将寻找JS， npm 的最受欢迎的软件包经理。在NPM的早期，有些问题导致Facebook和其他地方的一些开发人员创建了类似的选择。但是，通常认为NPM陷入了主要的纱线改进之中。还有 pnpm ，可提供一些速度和磁盘空间的改进，但使用量较少。作为初学者，您应该适应可预见的NPM，因为其他人无论如何都相似。

要使用npm，您只需要从node.js网站下载node.js -npm即将包含在其中，因为如今它对JS开发非常重要。您可以在npm website上找到NPM软件包的列表。要安装软件包，请导航到您的项目目录并运行npm install，然后是软件包名称，例如npm install react。有内置的别名（同一命令的名称），例如npm i，如果您喜欢的话，您可以使用它们。如果您需要卸载包装，则可以使用npm uninstall，该npm uninstall也具有npm remove或npm r等别名。

安装命令从注册表下载一个软件包。默认情况下，安装是 local - 您只能在安装中安装的目录中使用包装。这是如今的标准方法，当您需要为不同项目使用不同版本的软件包时，很有用。但是，如果需要，您可以使用全局 flag （option）-g，例如，例如。 npm install -g react。然后，它将安装到处可访问的地方（确切的位置取决于操作系统）。

软件包将在您的项目中下载到一个名为 node_modules，的文件夹NPM，并为每个软件包提供了子文件夹。大多数软件包依次都有自己的依赖关系（ sub依赖性），这些依赖性）也已安装在node_modules文件夹中的计算机上。这意味着node_modules文件夹非常快地获取 非常大！您肯定不想将此大文件夹提交为版本控件，因此请将Node_modules文件夹添加到您的.gitignore文件中。

import React from "react"