前端工程化及其实践 3

前端工程化及其实践 3

前端工程化及其实践 3， 又名：写毕设到企业级前端（第三天）

目录

1. 安装 Node.js 环境
2. 基础的 Node 项目
3. 学习模块化设计
   • 用 CommonJS 设计模块
   • 用 ES Module 设计模块
   • 了解模块导入限制
   • Vue 是用什么什么？
   • 认识组件化设计
   • 依赖包和插件

1. 安装 Node.js 环境

概念：

安装 Node.js 环境是为了能够在您的计算机上运行和开发基于 Node.js 的应用程序。Node.js 是一个基于 JavaScript 的运行时环境，它使您可以在服务器端运行 JavaScript 代码。

示例：

要安装 Node.js 和 npm（Node Package Manager），您可以按照以下步骤进行操作：

安装 Node.js 和 npm：

1. 访问 Node.js 官方网站：https://nodejs.org/

2. 在官方网站首页，您会看到两个不同的版本：LTS（长期支持版本）和 Current（当前版本）。

   • 对于大多数用户，建议选择 LTS 版本，因为它稳定且经过了更多测试。
   • 如果您需要最新的特性和改进，可以选择 Current 版本，但请注意它可能不如 LTS 版本稳定。

3. 在选择版本后，根据您的操作系统下载相应的安装程序。Node.js 支持 Windows、macOS 和 Linux。

4. 下载并运行安装程序，按照提示进行安装。在 Windows 上，您可能需要勾选 “Automatically install the necessary tools…” 选项，以便安装必要的构建工具。

5. 完成安装后，打开终端（命令提示符或终端窗口）并运行以下命令来验证 Node.js 和 npm 是否成功安装：

   node -v
   
   

   npm -v
   
   

   如果成功安装，这两个命令将分别显示 Node.js 和 npm 的版本号。

进行测试：

为了测试 Node.js 和 npm 的工作，您可以创建一个简单的 Node.js 应用程序，例如 “Hello, Node.js!” 示例：

1. 创建一个新的文件，命名为 app.js。

2. 在 app.js 中输入以下代码：

   console.log("Hello, Node.js!");
   
   

3. 保存文件。

4. 在终端中，导航到包含 app.js 文件的目录。

5. 运行以下命令来执行 app.js 文件：

   node app.js
   
   

   您将在终端中看到输出 “Hello, Node.js!”。

这是一个简单的 Node.js 应用程序测试，它验证了您已成功安装了 Node.js 和 npm，并且可以运行 Node.js 脚本。从这里开始，您可以继续学习 Node.js 的更多功能和用法，构建更复杂的应用程序。

2. 基础的 Node 项目

概念：

一个基础的 Node 项目是指一个简单的 Node.js 应用程序，通常包括一些核心概念和文件结构，用于开始构建和开发应用程序。

示例：

初始化一个项目

您可以通过以下步骤初始化一个新的 Node 项目：

1. 在命令行中导航到您希望创建项目的目录。
2. 运行 npm init 命令，它将引导您创建一个 package.json 文件，其中包含项目的基本信息。
3. 按照提示逐步填写项目信息。
4. 完成后，将生成一个 package.json 文件，其中包含项目的配置。

了解 package.json

package.json 文件包含了项目的元数据和依赖信息。您可以打开这个文件，查看和编辑项目的配置。

项目名称规则

Node 项目的命名应遵循一定的规则和建议，通常包括小写字母、连字符或下划线等。

语义化版本号管理

语义化版本号是一种版本号命名规则，用于管理项目依赖包的版本。它包括基本格式、升级规则和版本标识符等内容。

脚本命令的配置

在 package.json 文件中，您可以配置自定义脚本命令，以便在项目中运行特定任务。这对于自动化任务和项目管理非常重要。

Hello Node

通过一个简单的示例，您可以学习如何创建和运行一个 Node.js 应用程序。这个示例可以包括一个简单的 “Hello World” 程序，用于演示 Node.js 的基本用法。

这些概念和示例有助于您开始构建和理解基础的 Node 项目。您可以根据这些概念逐步学习和实践 Node.js 编程。

以在命令行中输出 “Hello, Node.js!”：

// 导入核心模块 'http'
const http = require('http');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
  // 设置响应头
  res.writeHead(200, { 'Content-Type': 'text/plain' });

  // 发送响应内容
  res.end('Hello, Node.js!\\n');
});

// 监听服务器的端口
const port = 3000;
server.listen(port, () => {
  console.log(`Server is running at <http://localhost>:${port}/`);
});

在这个示例中，我们执行了以下步骤：

1. 导入 Node.js 核心模块 ‘http’，它允许我们创建 HTTP 服务器。
2. 创建一个 HTTP 服务器实例，通过 http.createServer 方法。
3. 在服务器的请求处理函数中，我们设置响应头并发送 “Hello, Node.js!” 作为响应内容。
4. 使用 server.listen 方法来监听指定的端口（在这里是 3000）。
5. 一旦服务器启动，我们会在控制台输出一条消息，指示服务器正在运行。

要运行此示例，您可以将上述代码保存到一个文件（例如 app.js），然后在命令行中执行以下命令：

node app.js

这将启动服务器并在浏览器中访问 http://localhost:3000/，您将看到 “Hello, Node.js!” 的消息。

这是一个简单的 Node.js 应用程序示例，演示了如何创建一个基本的 HTTP 服务器并进行简单的请求处理。您可以根据这个示例进一步学习和构建更复杂的 Node.js 应用程序。

当涉及到模块化设计时，以下是概念和用例代码：

1. 学习模块化设计

概念：

模块化解决了什么问题：模块化是一种软件设计方法，旨在解决以下问题：

• 代码复用：模块化允许开发人员将代码拆分为独立的模块，这些模块可以在不同部分的应用程序中重复使用，提高了代码复用性。
• 维护性：拆分代码为模块使得单个模块的修改不会影响整个应用程序，从而提高了代码的可维护性。
• 可扩展性：模块化设计使得应用程序可以更容易地扩展，新功能和模块可以添加到现有应用程序中而不影响其他部分。

2. 用 CommonJS 设计模块

概念：

准备工作：使用 CommonJS 模块化需要 Node.js 环境，因为它最初是为 Node.js 开发的模块系统。

用例代码：

以下是一个示例，演示如何在 Node.js 中使用 CommonJS 模块化设计来导出和导入模块：

模块文件 math.js：

// 导出一个加法函数
exports.add = function (a, b) {
  return a + b;
};

// 导出一个减法函数
exports.subtract = function (a, b) {
  return a - b;
};

主应用程序文件 app.js：

// 导入 math 模块
const math = require('./math');

// 使用导入的模块中的函数
const sum = math.add(5, 3);
console.log(`5 + 3 = ${sum}`);

const difference = math.subtract(10, 4);
console.log(`10 - 4 = ${difference}`);

在上述示例中，math.js 文件导出了两个函数，并且在 app.js 文件中使用 require 来导入并使用这些函数。

这是 CommonJS 模块化的基本示例，它允许将代码拆分为模块以提高可维护性和代码复用性。

以下是概念和用例代码，涉及ES Module设计模块以及模块导入限制：

3. 用 ES Module 设计模块

概念：

准备工作：要使用 ES Module（ECMAScript Modules）模块化，您需要在支持 ES Module 的环境中工作，如现代浏览器或 Node.js 版本 13+。

基本语法：ES Module 使用 import 和 export 语法来导入和导出模块。

默认导出和导入：可以使用 export default 导出默认模块，使用 import 导入。

命名导出和导入：可以使用 export 导出具名模块，使用 import { moduleName } 导入。

导入时重命名：使用 as 关键字可以在导入时重命名模块。

在浏览器里访问 ESM：您可以在现代浏览器中使用 <script type="module"> 标签来加载 ES Module。

用例代码：

模块文件 math.js（使用 ES Module）：

// 默认导出一个加法函数
export default function add(a, b) {
  return a + b;
}

// 命名导出一个减法函数
export function subtract(a, b) {
  return a - b;
}

主应用程序文件 app.js（使用 ES Module）：

// 导入默认模块
import add from './math';

// 导入命名模块
import { subtract } from './math';

// 使用导入的模块中的函数
const sum = add(5, 3);
console.log(`5 + 3 = ${sum}`);

const difference = subtract(10, 4);
console.log(`10 - 4 = ${difference}`);

在上述示例中，math.js 文件使用 ES Module 语法导出了一个默认模块和一个命名模块，并且在 app.js 文件中使用 import 语法导入和使用这些模块。

4. 了解模块导入限制

概念：

模块导入有一些限制和注意事项，具体取决于环境和模块类型。一些常见的限制包括：

• 循环依赖：避免模块之间的循环依赖，这可能导致应用程序的不稳定性。
• 动态导入：在某些情况下，动态导入模块可能会受到限制或需要特殊处理。
• 同源策略：在浏览器中，模块导入受同源策略的限制，需要处理跨域请求。
• 模块类型：不同的模块系统（CommonJS、ES Module、AMD 等）具有不同的导入和导出规则。

以下是示例和区别介绍，涉及CommonJS和AMD两种模块系统：

CommonJS 示例

CommonJS 是一种模块化系统，最初为服务器端 JavaScript（Node.js）开发而设计。它使用 require 和 module.exports 来导入和导出模块。

模块文件 math.js（使用 CommonJS）：

// 导出一个加法函数
exports.add = function (a, b) {
  return a + b;
};

// 导出一个减法函数
exports.subtract = function (a, b) {
  return a - b;
};

主应用程序文件 app.js（使用 CommonJS）：

// 导入模块
const math = require('./math');

// 使用导入的模块中的函数
const sum = math.add(5, 3);
console.log(`5 + 3 = ${sum}`);

const difference = math.subtract(10, 4);
console.log(`10 - 4 = ${difference}`);

AMD 示例

AMD（Asynchronous Module Definition）是一种用于浏览器端的模块系统，它支持异步加载模块。它使用 define 和 require 来定义和导入模块。

模块文件 math.js（使用 AMD）：

// 定义一个模块
define(function () {
  // 导出一个加法函数
  return {
    add: function (a, b) {
      return a + b;
    },
    subtract: function (a, b) {
      return a - b;
    }
  };
});

主应用程序文件 app.js（使用 AMD）：

// 异步加载模块
require(['math'], function (math) {
  // 使用导入的模块中的函数
  const sum = math.add(5, 3);
  console.log(`5 + 3 = ${sum}`);

  const difference = math.subtract(10, 4);
  console.log(`10 - 4 = ${difference}`);
});

区别介绍

当比较 CommonJS、AMD 和 ES Module 时，以下是一些关键区别和特点：

CommonJS vs. AMD vs. ES Module 比较

CommonJS:

• 同步加载：CommonJS 是同步加载模块的模块系统，适用于服务器端 JavaScript。
• 语法：使用 require 和 module.exports 语法来导入和导出模块。
• 适用场景：主要用于服务器端应用程序和构建工具，因为它假定模块是同步可用的。
• 性能：对于服务器端应用程序，同步加载是适当的，但在浏览器中可能会导致性能问题，特别是在大型 Web 应用程序中。

AMD (Asynchronous Module Definition):

• 异步加载：AMD 是异步加载模块的模块系统，适用于浏览器端 JavaScript。
• 语法：使用 define 和 require 语法来定义和导入模块。
• 适用场景：主要用于浏览器端，特别是在需要异步加载模块时，例如在 Web 应用程序中。
• 性能：AMD 在浏览器中可以更好地处理异步加载，适用于大型 Web 应用程序。

ES Module (ESM):

• 标准模块系统：ES Module 是 JavaScript 的标准模块系统，适用于现代浏览器和 Node.js。
• 语法：使用 import 和 export 语法来导入和导出模块。
• 适用场景：适用于现代浏览器和 Node.js 环境，提供了同步和异步加载的能力，是未来 JavaScript 开发的首选模块系统。
• 性能：在现代浏览器中，ES Module 通常具有良好的性能，可以在大多数场景下使用。

总结：ES Module 是当前 JavaScript 开发的标准模块系统，通常是首选选项。它兼具同步和异步加载的能力，适用于现代浏览器和 Node.js。CommonJS 更适用于服务器端，而 AMD 主要用于浏览器端，并特别适用于需要异步加载的情况。

Vue 是用什么什么？

Vue.js 从模块系统的角度来看，Vue.js 使用的是 ES Module（ESM）模块系统。这意味着在现代浏览器和支持 ES Module 的 Node.js 环境中，您可以使用 import 和 export 语法来导入和导出 Vue.js 组件和模块。

总结起来，Vue.js 不属于 CommonJS 或 AMD，而是使用了 ES Module 作为其模块系统。这使得 Vue.js 成为现代 JavaScript 开发的一部分，允许开发者以模块化的方式构建和组织应用程序。

5. 认识组件化设计

概念：

什么是组件化：组件化设计是一种软件开发方法，它将应用程序拆分成可重用的、独立的组件。每个组件都具有自己的状态、视图和行为，可以在应用程序中多次使用。

解决了什么问题：组件化设计解决了多个问题，包括：

• 代码复用：组件可以在不同部分的应用程序中重复使用，减少了代码冗余。
• 可维护性：组件化设计使得应用程序更容易维护，因为每个组件都是独立的，修改一个组件不会影响其他组件。
• 可测试性：单独测试每个组件变得更容易，因为它们是独立的单元。

如何实现组件化：组件化设计的实现通常包括创建独立的组件文件、定义组件的状态和行为、使用组件在应用程序中构建用户界面。

用例代码：

Vue.js 单文件组件示例（组件化）：

Counter.vue 组件文件：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* 组件样式 */
</style>

主应用程序文件 App.vue：

<template>
  <div>
    <h1>My App</h1>
    <Counter /> <!-- 使用 Counter 组件 -->
  </div>
</template>

<script>
import Counter from './Counter.vue'; // 导入 Counter 组件

export default {
  components: {
    Counter // 注册 Counter 组件
  }
};
</script>

<style scoped>
/* 应用程序样式 */
</style>

在上述示例中，Counter.vue 组件和 App.vue 应用程序都是独立的组件，每个组件都具有自己的模板、脚本和样式。App.vue 中使用了 Counter 组件，实现了组件的复用。

6. 依赖包和插件

概念：

什么是包：包（或软件包）是一种用于组织和分发软件的结构。它可以包含代码、依赖关系、文档和配置等。包通常被发布到包管理器的仓库中，供其他开发人员使用。

什么是 node_modules：node_modules 是 Node.js 中存储依赖包的默认目录。当您使用 npm 或 yarn 等包管理器安装依赖时，这些包将被下载并存储在 node_modules 目录中。

什么是包管理器：包管理器是一种工具，用于查找、下载、安装和管理软件包。npm 和 yarn 是常见的 JavaScript 包管理器，用于管理 Node.js 项目中的依赖。

依赖包的管理：包管理器用于管理项目中的依赖包。依赖包分为生产依赖和开发依赖，具体取决于它们在项目中的作用。配置镜像源可以加速包的下载。

用例代码：

使用 npm 安装依赖包示例：

1. 在项目目录中运行以下命令来初始化一个新的 Node.js 项目：

npm init

1. 安装一个生产依赖包（例如，axios，用于进行 HTTP 请求）：

npm install axios

1. 安装一个开发依赖包（例如

，eslint，用于代码检查）：

npm install eslint --save-dev

1. 查看项目的 package.json 文件，其中包含了依赖包的信息。

在上述示例中，我们使用 npm 安装了两种类型的依赖包：生产依赖（axios）和开发依赖（eslint）。

这些概念和用例代码涵盖了组件化设计和依赖包管理的基本概念，以及如何在实际项目中使用它们。

7. 版本控制

概念：

版本控制：版本控制是一种管理和跟踪软件项目中代码和依赖包的不同版本的方法。它的主要目标是确保代码的可维护性、协作性和稳定性。版本控制使得开发团队能够协同工作，跟踪变更历史，恢复到以前的版本，以及管理依赖包的版本。

版本号：版本号是用于标识软件或依赖包的特定版本的数字和/或字母序列。通常，版本号遵循语义化版本号（Semantic Versioning，SemVer）规范，包括主版本号、次版本号和修订号，以及可选的预发布版本号和构建元数据。

语义化版本号（SemVer）：语义化版本号是一种版本控制的约定，它定义了版本号的含义和升级规则。主要包括：

• 主版本号（Major）：主要的功能更改，可能会破坏向后兼容性。
• 次版本号（Minor）：向后兼容的新功能添加。
• 修订号（Patch）：向后兼容的修复或小的改进。

用例代码：

管理包的版本示例：

1. 在项目中使用包管理器（如 npm）安装一个依赖包，并指定版本号：

npm install package-name@1.2.3

在上述命令中，package-name 是包的名称，1.2.3 是指定的版本号。

1. 使用 SemVer 规则来升级依赖包的版本。例如，升级到次版本号：

npm update package-name

1. 在项目的 package.json 文件中管理依赖包的版本。您可以指定包的版本范围，例如：

{
  "dependencies": {
    "package-name": "^1.2.0"
  }
}

在上述示例中，^1.2.0 表示可以安装 1.2.0 版本及以上的包，但不包括 2.0.0 版本。

版本控制允许开发团队协作，确保所有人都使用相同的软件版本，并确保项目的稳定性。通过管理包的版本，团队可以更好地控制项目的依赖关系，减少不兼容性问题。