2023-03-02

1. 什么是 Webpack？

1.1 回答

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。它主要解决的问题是将多个模块（Module）打包成一个或多个文件，并且在这个过程中还支持一些特性，如代码分离、文件压缩等。

我们先将着重点落在 静态模块打包工具 上，为什么是 静态模块打包工具？

是因为它可以将多个模块（JavaScript 文件、CSS 文件、图片 等）打包成一个或多个静态资源文件。静态资源文件包含了应用程序中的所有依赖关系和逻辑，可以直接在浏览器中加载和运行。

阅读全文

包管理工具 pnpm 介绍

2023-03-01

前端工程化

1. pnpm 是什么？

pnpm（全称 Performant NPM） 你可以理解为性能更好的 npm

在 pnpm的官网是这么介绍的：pnpm 是一个快速的，节省磁盘空间 的 包管理工具

前两者 快速的、节省磁盘空间 很容理解。

那么什么是包管理工具呢？

阅读全文

【Node 】Koa 框架

2023-02-28

Nodejs

1. Koa 的基本使用

1.1 认识 Koa

在上一章我们已经介绍了 express，另外一个非常流行的 Node Web 服务器框架就是 Koa

Koa 官方的介绍：

koa：next generation web framework for node.js
koa：node.js 的下一代 web 框架

事实上，koa 是 express 同一个团队开发的一个新的 Web 框架

目前团队的核心开发者 TJ 的主要精力也在维护 Koa，express 已经交给团队维护了；
Koa 旨在为 Web 应用程序和 API 提供更小、更丰富和更强大的能力；
相对于 express 具有更强的异步处理能力（后续我们再对比）；
Koa 的核心代码只有 1600+ 行，是一个更加轻量级的框架；
我们可以根据需要安装和使用中间件；

下面我们就先来体验一下用 koa 的`Web服务器，创建一个接口。

1.2 Koa 初体验

既然我们要用 koa，那么第一步就需要先安装一下 koa

新建一个文件夹，在该文件夹下执行以下

SH
npm i koa

编写 js 文件

js
const Koa = require("koa");

const app = new Koa();

app.use((ctx, next) => {
  console.log("中间件 1");
  next();
});

app.use((ctx, next) => {
  console.log("中间件 2");
  ctx.response.body = "Hello World0";
});

app.listen(8000, () => {
  console.log("服务器在8000端口启动成功~");
});

通过 node 执行该文件，访问 localhost:8000

在上面的代码中，koa 注册的中间件提供了两个参数：

ctx：上下文（Context）对象
1. koa 并没有像 express 一样，将 req 和 res 分开，而是将它们作为 ctx 的属性；
2. ctx 代表一次请求的上下文对象；
3. ctx.request：获取请求对象；
4. ctx.response：获取响应对象；
next：本质上是一个 dispatch，类似于 express 中的 next；

1.3 Koa 中间件

koa 通过创建的 app 对象，注册中间件只能通过 use 方法：

koa并没有提供 methods 的方式来注册中间件；
也没有提供 path 中间件来匹配路径；

在真实开发中，我们可以通过以下方法将路径和 method 分离

根据 request 自己来判断
使用第三方路由中间件

js
app.use((ctx, next) => {
  if(ctx.request.path === '/users') {
    if(ctx.request.method === 'POST') {
      ctx.response.body = 'Create User Success~'
    } else {
      ctx.response.body = 'Users List~'
    }
  } else {
    ctx.response.body = 'Other Request Response'
  }
})

1.4 路由的使用

koa 官方并没有给我们提供路由的库，我们可以选择第三方库：koa-router

安装 koa-router

sh
npm i @koa/router

我们可以先封装一个 users/router.js 文件

js
const KoaRouter = require("@koa/router");

const userRouter = new KoaRouter({ prefix: "/users" });

userRouter.get("/", (ctx, next) => {
  ctx.body = "用户列表~";
});

userRouter.post("/", (ctx, next) => {
  ctx.status = 201;
  ctx.body = "用户创建~";
});

module.exports = userRouter;

在 index.js 中将 router.routes() 注册为中间件

js
const userRouter = require("./user/router.js");
const Koa = require("koa");

const app = new Koa();

app.use(userRouter.routes());
app.use(userRouter.allowedMethods());

app.listen(8000, () => {
  console.log("服务器在8000端口启动成功~");
});

运行 index.js 文件即可启动服务

注意：allowedMethods 用于判断某一个 method 是否支持：

如果我们请求 get，那么是正常的请求，因为我们有实现 get；
如果我们请求 put、delete、patch，那么就自动报错： Method Not Allowed，状态码：405；
如果我们请求 link、copy、lock，那么久自动报错：Not Implemented，状态码：501；

阅读全文

【Node 】Express 框架

2023-02-27

Nodejs

1. Express 初体验

1.1 认识Web框架

上一章我们在使用 http 内置模块来搭建 Web 服务器的过程中，会感到很多问题，那就是原生 http 模块 在进行很多处理时会较为复杂，比如：

URL 判断
Method 判断
参数处理
逻辑代码处理等等

都需要我们自己来处理和封装，当所有的内容都放在一起时，常常会显得非常混乱。

而这些都是框架能帮我们解决的问题

目前在 Node 中比较流行的 Web 服务器框架是 express 和 koa，express 要早于 koa 出现，并且在 Node 社区中迅速流行起来。

我们可以基于 express 快速、方便的开发自己的 Web 服务器
并且可以通过一些实用工具和中间件来扩展自己功能

Express 整个框架的核心就是中间件，理解了中间件其他一切都非常简单！

1.2 Express 安装

express 的使用过程有两种方式：

通过 express 提供的脚手架 express-generator，直接创建一个应用的骨架
从 0 搭建自己的 express 应用结构

1.2.1 脚手架的方式搭建

安装脚手架


npm install express-generator -g

创建项目


express express-generator-demo

安装依赖


npm install

启动项目


npm run start

在浏览器输入 localhost:3000，访问成功，表示服务已启动

1.2.3 从 `0` 搭建

创建一个新的文件夹并安装 express


mkdir express-demo
cd express-demo
npm init
npm i express

在这个文件夹下创建文件 01_express的基本使用.js

js
const express = require("express");

// 创建服务器
const app = express();

// home 的 get 请求处理
app.get("/home", (req, res) => {
  res.end("Hello Home");
});

// login 的 post 请求处理
app.post("/login", (req, res) => {
  res.end("Hello Login");
});

// 开启监听
app.listen(8000, () => {
  console.log("服务器启动成功~");
});