skill前端入门实战：从零搭建现代化前端开发环境

2次阅读

没有评论

共计 2405 个字符，预计需要花费 7 分钟才能阅读完成。

对于刚接触前端开发的新手来说，搭建开发环境往往是第一个拦路虎。常见的问题包括：

工具链选择困难：Webpack 配置复杂，Rollup 学习曲线陡峭，Parcel 功能有限
配置复杂度高：Babel、ESLint、Prettier 等工具需要单独配置且存在兼容性问题
开发体验差：传统构建工具冷启动慢，热更新延迟明显
类型安全缺失：纯 JavaScript 项目难以维护，缺乏类型提示

Vite：
优势：基于 ESM 的即时编译，冷启动秒开；内置 Rollup 生产打包；插件系统简洁
适用场景：现代浏览器项目、需要快速迭代的开发环境
Webpack：
优势：生态完善，支持各种复杂场景
劣势：配置复杂，构建速度较慢

Vite：解决开发环境速度痛点
React：主流 UI 库，生态完善
TypeScript：提供类型安全，降低维护成本

创建项目目录并初始化 package.json

mkdir skill-frontend && cd skill-frontend
npm init -y

安装 Vite 基础依赖

npm install vite @vitejs/plugin-react --save-dev

安装必要依赖

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

创建.eslintrc.js

module.exports = {env: { browser: true, es2021: true},
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {ecmaFeatures: { jsx: true},
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {'react/react-in-jsx-scope': 'off'}
}

安装 Husky

npm install husky --save-dev
npx husky install

添加 pre-commit 钩子

npx husky add .husky/pre-commit "npm run lint"

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

export default defineConfig({plugins: [react()],
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

安装压缩插件

npm install vite-plugin-compression --save-dev

更新 vite 配置

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [react(),
    viteCompression({algorithm: 'gzip'})
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {react: ['react', 'react-dom']
        }
      }
    }
  }
})

skill-frontend/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── vite-env.d.ts
├── .eslintrc.js
├── .prettierrc
├── tsconfig.json
├── vite.config.ts
└── package.json

现象：安装依赖时报版本冲突错误

解决方案：