前端工程化全貌

  // 你写的（ES2020+）
const result = data?.items?.map(item => item.name) ?? []
  

  // 转译后（ES5 兼容版本）
var _data$items, _data$items$map
var result =
  (_data$items$map =
    (_data$items = data == null ? void 0 : data.items) == null
      ? void 0
      : _data$items.map(function (item) {
          return item.name
        })) != null
    ? _data$items$map
    : []
  

  dist/
├── index.[hash].js      (主入口代码)
├── vendor.[hash].js     (第三方库代码)
└── assets/
    └── logo.[hash].png  (静态资源)
  

  // 用自执行函数模拟模块化（IIFE 模式）
var ModuleA = (function () {
  var privateVar = 'private'  // 私有变量，外部无法访问

  function privateFn() {
    console.log(privateVar)
  }

  return {
    publicMethod: function () {
      privateFn()  // 暴露公共方法
    }
  }
})()

// 依赖管理全靠注释说明
/**
 * @requires jquery.js (must load first)
 * @requires bootstrap.js
 */
  

  // webpack.base.js - 仅仅是基础配置就有这么多内容
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(png|jpg|gif)$/, loader: 'url-loader', options: { limit: 8192 } }
    ]
  },
  plugins: [new VueLoaderPlugin()],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: { '@': path.resolve(__dirname, '../src') }
  }
}
  

  // vite.config.js - 整个配置文件就这么点
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { '@': '/src' }
  }
})
// 对比上面 Webpack 的配置，是不是简洁太多了？
  

  # 阶段二：使用 Webpack
npm run dev
# 等待 30 秒...喝杯咖啡回来还在编译
# [INFO] Compiled successfully in 30123ms
# 修改代码 -> 保存 -> 等待 5 秒 -> 终于看到效果

# 阶段三：使用 Vite
npm create vite@latest my-project  # 一键创建项目
cd my-project && npm install
npm run dev
# 等待 300 毫秒...还没反应过来就好了
# [INFO] ready in 312ms
# 修改代码 -> 保存 -> 瞬间看到效果
  

  // tsconfig.json - TypeScript 配置，类型安全
{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true,           // 开启严格模式
    "noImplicitAny": true,    // 禁止隐式 any
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}

// .eslintrc.cjs - 团队统一的代码规范
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  rules: {
    'no-console': 'warn',     // 禁止 console.log
    'no-debugger': 'error',   // 禁止 debugger
    'vue/multi-word-component-names': 'error'  // 组件名必须是多词
  }
}
  

  // ❌ 错误做法：引入整个 moment.js（2.5MB！）
import moment from 'moment'
const formattedDate = moment(date).format('YYYY-MM-DD')

// ✅ 正确做法：使用更轻量的 dayjs（2KB）
import dayjs from 'dayjs'
const formattedDate = dayjs(date).format('YYYY-MM-DD')

// 或者按需导入 date-fns 的函数
import { format } from 'date-fns'
const formattedDate = format(date, 'yyyy-MM-dd')
  

  // ❌ 错误做法：这会引入整个 lodash（70KB+）
import _ from 'lodash'
_.debounce(fn, 200)

// ✅ 正确做法：只导入需要的函数
import debounce from 'lodash/debounce'

// 或者使用 lodash-es（ES 模块版本，支持 Tree Shaking）
import { debounce } from 'lodash-es'
  

  // ❌ 问题场景：文件名固定，用户缓存了旧版本
// <script src="/js/app.js"></script>

// ✅ 正确做法：使用 content hash
// Vite/Webpack 会自动处理：
// <script src="/js/app.a3f7b2c.js"></script>
// 内容变化时 hash 也会变化，浏览器会自动获取新版本
  

  // vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig(({ mode }) => ({
  // 基础路径配置
  base: './',  // 部署时的基础路径，相对路径更灵活

  // 路径别名，让 import 更简洁
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@utils': resolve(__dirname, 'src/utils'),
      '@api': resolve(__dirname, 'src/api')
    }
  },

  // CSS 配置
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入全局样式变量
        additionalData: `@use "@/styles/vars.scss" as *;`
      }
    }
  },

  // 开发服务器配置
  server: {
    port: 3000,           // 端口号
    open: true,           // 自动打开浏览器
    cors: true,           // 允许跨域
    // API 代理配置，解决开发环境跨域问题
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: mode !== 'production',  // 生产环境不生成 sourcemap

    // Rollup 打包配置
    rollupOptions: {
      output: {
        // 代码分割策略：把不同类型的依赖打包到不同文件
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-vendor': ['element-plus'],
          'utils-vendor': ['lodash-es', 'axios', 'dayjs']
        },
        // 文件命名规则
        entryFileNames: 'js/[name]-[hash].js',
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]
          if (/\.(png|jpe?g|gif|svg|webp|ico)$/i.test(assetInfo.name)) {
            return 'img/[name]-[hash][extname]'
          }
          if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.name)) {
            return 'fonts/[name]-[hash][extname]'
          }
          return '[ext]/[name]-[hash][extname]'
        }
      }
    },

    // 代码压缩配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,   // 移除 console
        drop_debugger: true   // 移除 debugger
      }
    },

    // 大于 500KB 的 chunk 会触发警告
    chunkSizeWarningLimit: 500
  },

  // 插件配置
  plugins: [
    vue()  // Vue 3 支持
  ]
}))