4月17日 web学习笔记

一、前端工程化与构建工具
Vite 与 Webpack
Vite：新一代前端构建工具，基于 ES 模块原生支持，冷启动快。
Webpack：成熟构建工具，配置复杂但功能强大。
对比：
Vite：开发体验好，启动快。
Webpack：生产环境优化强。
Vite 快速上手
安装：
bash

npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npm install
npm run dev
配置文件：vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
});
Webpack 配置
基础配置：
JavaScript

// webpack.config.js
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
devServer: {
port: 3000,
},
};
构建优化
代码分割：将代码拆分成多个 chunk。
Tree Shaking：移除未使用的代码。
压缩：使用 TerserPlugin 压缩 JS，CSSNano 压缩 CSS。
二、前端测试
单元测试
Jest：JavaScript 测试框架。
React 测试：
jsx

// Counter.test.js
import React from 'react';
import Counter from './Counter';
import { render, screen, fireEvent } from '@testing-library/react';

test('计数器加减功能', () => {
render();

const incrementButton = screen.getByRole('button', { name: '+1' });
const decrementButton = screen.getByRole('button', { name: '-1' });
const countElement = screen.getByText('计数: 0');

fireEvent.click(incrementButton);
expect(screen.getByText('计数: 1')).toBeInTheDocument();

fireEvent.click(decrementButton);
expect(screen.getByText('计数: 0')).toBeInTheDocument();

});
端到端测试（E2E）
Cypress：E2E 测试工具。
安装：
bash

npm install cypress --save-dev
npx cypress open
示例：
JavaScript

// cypress/integration/app.spec.js
describe('App', () => {
beforeEach(() => {
cy.visit('http://localhost:3000');
});

it('计数器加减功能', () => {
    cy.contains('计数: 0');

    cy.get('button').contains('+1').click();
    cy.contains('计数: 1');

    cy.get('button').contains('-1').click();
    cy.contains('计数: 0');
});

});
三、TypeScript
TypeScript 基础
定义变量：
TypeScript

let name: string = '张三';
let age: number = 25;
let isStudent: boolean = true;
数组：
TypeScript

let names: string[] = ['张三', '李四'];
let ages: Array = [25, 30];
元组：
TypeScript
复
let user: [string, number] = ['张三', 25];
接口与类型
接口：
TypeScript

interface User {
name: string;
age: number;
isActive?: boolean;
}

const user: User = {
name: '张三',
age: 25,
};
类型别名：
TypeScript
nt = {
x: number;
y: number;
};

const point: Point = { x: 1, y: 2 };
函数
定义函数：
TypeScript

function add(a: number, b: number): number {
return a + b;
}

const add2: (a: number, b: number) => number = (a, b) => a + b;
类
定义类：
TypeScript

class Person {
name: string;
constructor(name: string) {
this.name = name;
}

greet() {
    return `Hello, ${this.name}`;
}

}

const person = new Person('张三');
console.log(person.greet()); // 输出：Hello, 张三
四、实战练习
Vite 项目
创建一个 Vite 项目，使用 React 和 TypeScript。
配置环境变量和代理服务器。
单元测试与 E2E 测试
为一个 React 组件编写单元测试。
使用 Cypress 编写端到端测试。
TypeScript 实践
将一个 JavaScript 项目迁移到 TypeScript。
定义接口和类型，增强代码类型安全性。