Heureka's blog

Appearance

1.7 模块化与工程化 ​

模块化和工程化是现代前端开发的重要组成部分，它们让代码更易维护、更易协作。

一、模块化 ​

1. 为什么要模块化 ​

  • 代码复用：可多次使用
  • 代码组织：清晰的结构
  • 依赖管理：明确的引入规则
  • 作用域隔离：避免全局污染

2. ES6 模块（ES Modules） ​

导出（Export） ​

javascript
// utils.js

// 命名导出
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 声明时导出
export function multiply(a, b) {
    return a * b;
}

export class Calculator {
    add(a, b) {
        return a + b;
    }
}

// 默认导出
const config = {
    apiUrl: "https://api.example.com"
};
export default config;

// 混合导出
export default function greet(name) {
    console.log(`Hello, ${name}!`);
}
export const age = 25;

导入（Import） ​

javascript
// main.js

// 导入默认导出
import config from "./utils.js";
console.log(config.apiUrl);

// 导入命名导出
import { add, subtract } from "./utils.js";
console.log(add(1, 2));
console.log(subtract(5, 3));

// 重命名导入
import { add as sum } from "./utils.js";
console.log(sum(1, 2));

// 导入全部
import * as Utils from "./utils.js";
console.log(Utils.add(1, 2));
console.log(Utils.subtract(5, 3));

// 混合导入
import greet, { age } from "./utils.js";
greet("张三");
console.log(age);

// 仅导入（不导出任何内容，但执行模块代码）
import "./styles.css";

二、包管理器 ​

1. npm（Node Package Manager） ​

初始化项目 ​

bash
# 初始化项目
npm init
npm init -y  # 快速初始化

# 安装依赖
npm install <package-name>          # 安装到 dependencies
npm install <package-name> -D       # 安装到 devDependencies
npm install <package-name> -g       # 全局安装

# 安装多个依赖
npm install webpack webpack-cli -D

package.json ​

json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project",
  "main": "src/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "vite": "^4.4.0",
    "eslint": "^8.45.0"
  }
}

npm 常用命令 ​

bash
# 安装依赖
npm install
npm i

# 安装特定版本
npm install vue@2.6.14

# 更新依赖
npm update

# 卸载
npm uninstall <package-name>
npm remove <package-name>

# 查看已安装的包
npm list
npm ls

# 查看包信息
npm info <package-name>

# 运行脚本
npm run dev
npm run build

2. yarn（更快、更可靠） ​

bash
# 安装 yarn（如果还没安装）
npm install -g yarn

# 初始化项目
yarn init

# 安装依赖
yarn add <package-name>         # dependencies
yarn add <package-name> -D      # devDependencies

# 运行脚本
yarn dev
yarn build

# 更新
yarn upgrade

# 卸载
yarn remove <package-name>

3. pnpm（最快的包管理器） ​

bash
# 安装 pnpm
npm install -g pnpm

# 基本用法与 npm、yarn 类似
pnpm add <package-name>
pnpm add -D <package-name>

pnpm install

pnpm dev
pnpm build

三、构建工具 ​

1. Webpack ​

基本配置 ​

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

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
    plugins: [], // 插件配置
    mode: "development", // development 或 production
};

常用Loader ​

javascript
module: {
    rules: [
        // CSS
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
        },

        // Less
        {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
        },

        // 图片
        {
            test: /\.(png|jpe?g|gif)$/,
            type: "asset/resource",
        },

        // 字体
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            type: "asset/resource",
        },
    ],
}

2. Vite（更快、更现代） ​

安装 Vite ​

bash
# 创建项目
npm create vite@latest my-project -- --template vue

# 或手动安装
npm install vite -D

配置文件 ​

javascript
// vite.config.js
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
    root: "./src",
    publicDir: "public",
    server: {
        port: 3000,
        open: true,
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
    build: {
        outDir: "dist",
        assetsDir: "assets",
    },
});

3. Parcel（零配置） ​

bash
# 安装
npm install parcel -D

# 开发
parcel src/index.html

# 构建
parcel build src/index.html

四、代码规范（Linting） ​

1. ESLint ​

安装配置 ​

bash
npm install eslint -D

# 初始化配置
npx eslint --init

配置文件 ​

javascript
// .eslintrc.js
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: "eslint:recommended",
    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
    },
    rules: {
        "no-unused-vars": "warn",
        "no-console": "off",
        "semi": ["error", "always"],
    },
};

检查和修复 ​

bash
# 检查代码
npx eslint src/

# 自动修复
npx eslint src/ --fix

2. Prettier ​

安装配置 ​

bash
npm install prettier -D

配置文件 ​

json
// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5"
}

格式化代码 ​

bash
# 检查格式
npx prettier --check src/

# 格式化代码
npx prettier --write src/

VSCode 配置 ​

json
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

五、构建流程 ​

典型构建流程 ​

源代码
    ↓
编译（转译 ES6+ → ES5）
    ↓
打包（模块 → 单个文件）
    ↓
压缩（移除空格、注释、优化）
    ↓
生成产物

生产环境优化 ​

bash
# 压缩代码
# 移除未使用的代码
# 代码分割
# 图片优化

六、环境变量 ​

.env 文件 ​

bash
# .env.development
VITE_API_URL=http://localhost:3000/api

# .env.production
VITE_API_URL=https://api.example.com

# .env（所有环境）
VITE_APP_TITLE=My App

使用环境变量 ​

javascript
// Vite 项目中
console.log(import.meta.env.VITE_API_URL);

// Webpack 项目中
console.log(process.env.API_URL);

七、总结 ​

  • 模块化：使用 ES Modules 组织代码
  • 包管理：npm / yarn / pnpm 管理依赖
  • 构建工具：Webpack / Vite 打包编译
  • 代码规范：ESLint + Prettier 保证代码质量
  • 持续集成：自动化测试、部署