前端工具链：别让你的开发环境变成一团糟

前端工具链：别让你的开发环境变成一团糟

毒舌时刻

这开发环境配置得跟乱码似的，谁能看得懂？

各位前端同行，咱们今天聊聊前端工具链。别告诉我你还在手动配置开发环境，那感觉就像在没有工具的情况下盖房子——能盖，但效率低得可怜。

为什么你需要现代前端工具链

最近看到一个项目，开发环境配置混乱，每次新成员加入都要花上几天时间配置环境。我就想问：你是在做开发还是在做环境配置？

反面教材

// 反面教材：混乱的工具链配置 // package.json { "name": "my-app", "version": "1.0.0", "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production", "test": "jest", "lint": "eslint .", "format": "prettier --write ." }, "devDependencies": { "webpack": "^4.44.1", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0", "babel-loader": "^8.1.0", "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "eslint": "^7.0.0", "eslint-plugin-react": "^7.20.0", "prettier": "^2.0.0", "jest": "^26.0.0" } }

毒舌点评：这工具链配置，就像在垃圾堆里找东西，根本找不到想要的。

正确姿势

1. Vite

// 正确姿势：Vite // 1. 安装依赖 // npm create vite@latest my-app -- --template react // 2. 基本配置 // vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], server: { port: 3000, open: true }, build: { outDir: 'dist', minify: 'terser' } }); // 3. package.json { "name": "my-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "@vitejs/plugin-react": "^4.2.1", "vite": "^5.0.8" } }

2. Next.js

// 正确姿势：Next.js // 1. 安装依赖 // npx create-next-app@latest // 2. 基本配置 // next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, images: { domains: ['example.com'] } }; module.exports = nextConfig; // 3. package.json { "name": "my-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "14.0.4", "react": "18.2.0", "react-dom": "18.2.0" }, "devDependencies": { "eslint": "8.55.0", "eslint-config-next": "14.0.4" } }

3. Astro

// 正确姿势：Astro // 1. 安装依赖 // npm create astro@latest // 2. 基本配置 // astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; import tailwind from '@astrojs/tailwind'; export default defineConfig({ integrations: [react(), tailwind()], build: { outDir: 'dist' } }); // 3. package.json { "name": "my-app", "type": "module", "version": "0.0.1", "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro build", "preview": "astro preview" }, "dependencies": { "@astrojs/react": "^2.0.0", "@astrojs/tailwind": "^3.0.0", "astro": "^3.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" } }

4. Turborepo

// 正确姿势：Turborepo // 1. 安装依赖 // npx create-turbo@latest // 2. 基本配置 // turbo.json { "$schema": "https://turbo.build/schema.json", "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**", "build/**"] }, "lint": { "dependsOn": ["^lint"] }, "dev": { "cache": false } } } // 3. package.json { "name": "my-monorepo", "private": true, "workspaces": [ "apps/*", "packages/*" ], "scripts": { "build": "turbo run build", "dev": "turbo run dev", "lint": "turbo run lint" }, "devDependencies": { "turbo": "latest" } }

毒舌点评：这才叫现代前端工具链，自动化配置，快速构建，开发体验好，再也不用担心环境配置的问题了。