课程进度 63% · 第13/20章第13/20章 · 标签 1/2
— 1 —
工程化概念与意义
前端工程化是指用自动化、规范化、流程化手段提升开发效率和质量。包括模块化、自动构建、自动测试、持续集成、代码规范等。目标：高效协作、可维护、易扩展、可持续交付。
模块化开发
模块化让代码结构清晰、可复用、易维护。主流有ESM和CommonJS。
javascript
1
// ESM模块
2
// math.js
3
export function add(a, b) { return a + b; }
4
// main.js
5
import { add } from './math.js';
6
console.log(add(1,2));
javascript
1
// CommonJS模块
2
// math.js
3
exports.add = (a, b) => a + b;
4
// main.js
5
const { add } = require('./math');
6
console.log(add(1,2));
构建工具
Babel用于JS新特性转译，Webpack/Vite用于打包、热更新、代码分割。
Webpack基础配置：
javascript
1
// webpack.config.js
2
module.exports = {
3
entry: './src/index.js',
4
output: { filename: 'bundle.js', path: __dirname + '/dist' },
5
module: {
6
rules: [
7
{ test: /.js$/, use: 'babel-loader' },
8
{ test: /.css$/, use: ['style-loader', 'css-loader'] }
9
]
10
}
11
};
— 2 —
Vite配置
javascript
1
// vite.config.js
2
import { defineConfig } from 'vite';
3
export default defineConfig({
4
root: './src',
5
build: { outDir: '../dist' }
6
});
自动化流程
CI/CD流程：
yaml
1
# .github/workflows/ci.yml
2
name: CI
3
on: [push]
4
jobs:
5
build:
6
runs-on: ubuntu-latest
7
steps:
8
- uses: actions/checkout@v2
9
- name: 安装依赖
10
run: npm install
11
- name: 运行测试
12
run: npm test
自动化工具：
- Lint（ESLint）：自动检查代码规范
- Prettier：自动格式化代码
- Jest/Mocha：自动化测试
json
1
// package.json脚本
2
{
3
"scripts": {
4
"lint": "eslint src --fix",
5
"test": "jest",
6
"format": "prettier --write ."
7
}
8
}
模块化ESMWebpackViteCI/CD