JavaScript 工程化基础（Babel、ESLint）

Babel 是 JavaScript 编译器，将新语法转换为兼容版本；ESLint 是代码检查工具，统一代码风格和发现错误。

Babel 基本概念

// Babel：JavaScript 编译器
// 将 ES6+ 语法转换为向后兼容版本

// 输入（ES6+）
const fn = (x) => x * x;
class MyClass {
    method() { return 1; }
}

// 输出（ES5）
var fn = function(x) { return x * x; };
var MyClass = function() {};
MyClass.prototype.method = function() { return 1; };

Babel 配置

// babel.config.js（推荐）
module.exports = {
    presets: [
        '@babel/preset-env'        // 智能预设，按目标环境转换
    ],
    plugins: [
        '@babel/plugin-proposal-class-properties'  // 类属性提案
    ]
};

// 或 .babelrc.json
{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

// 配置目标环境
module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '80',      // Chrome 80+
                firefox: '78',
                safari: '14',
                node: '16'
            },
            useBuiltIns: 'usage', // 按需引入 polyfill
            corejs: 3              // core-js 版本
        }]
    ]
};

// 或使用 browserslist 配置
// package.json
{
    "browserslist": [
        "> 1%",                 // 市场份额 > 1%
        "last 2 versions",      // 最后2个版本
        "not dead"              // 不是已停止维护的浏览器
    ]
}

Babel Presets 和 Plugins

// Presets：预设插件集合
// @babel/preset-env        - 智能环境预设
// @babel/preset-react      - React JSX
// @babel/preset-typescript - TypeScript

// Plugins：单个功能插件
// @babel/plugin-transform-arrow-functions     - 箭头函数
// @babel/plugin-transform-classes             - 类
// @babel/plugin-proposal-decorators           - 装饰器（提案）
// @babel/plugin-proposal-optional-chaining    - 可选链（提案）

// 执行顺序：
// 1. Plugins 先执行，从前往后
// 2. Presets 后执行，从后往前
module.exports = {
    plugins: ['a', 'b'],    // 先 a，后 b
    presets: ['c', 'd']     // 先 d，后 c（反向）
};

Babel 与构建工具集成

// Webpack + Babel
// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
};

// Rollup + Babel
// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
    plugins: [
        babel({
            babelHelpers: 'bundled',
            exclude: 'node_modules/**'
        })
    ]
};

// Vite 内置 Babel 支持
// vite.config.js
export default {
    build: {
        target: 'es2015'    // 自动转换
    }
};

ESLint 基本使用

# 安装 ESLint
npm install eslint --save-dev

# 初始化配置
npx eslint --init          # 交互式生成配置

# 检查代码
npx eslint src/            # 检查 src 目录
npx eslint src/*.js        # 检查所有 JS 文件

# 自动修复
npx eslint src/ --fix      # 自动修复可修复的问题

# 输出格式
npx eslint src/ --format stylish    # 默认格式
npx eslint src/ --format json       // JSON格式
npx eslint src/ --format html > report.html   // HTML报告

ESLint 配置

// .eslintrc.js（推荐）
module.exports = {
    // 环境：预定义全局变量
    env: {
        browser: true,      // 浏览器环境（window, document）
        node: true,         // Node.js 环境（process, require）
        es2021: true        // ES2021 语法
    },

    // 继承规则集
    extends: [
        'eslint:recommended',           // ESLint 推荐
        'plugin:react/recommended',     // React 规则
        '@typescript-eslint/recommended', // TypeScript 规则
        'prettier'                      // 关闭与 Prettier 冲突的规则
    ],

    // 解析器
    parser: '@typescript-eslint/parser',  // TypeScript 解析器
    parserOptions: {
        ecmaVersion: 2021,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },

    // 自定义规则
    rules: {
        'no-unused-vars': 'error',      // 未使用变量报错
        'no-console': 'warn',           // console 警告
        'semi': ['error', 'always'],    // 强制分号
        'quotes': ['error', 'single'],  // 强制单引号
        'indent': ['error', 2]          // 2空格缩进
    },

    // 插件
    plugins: [
        'react',
        '@typescript-eslint'
    ],

    // 全局变量
    globals: {
        'MyGlobal': 'readonly'
    }
};

ESLint 规则级别

// 规则级别：
// 'off' 或 0     - 关闭规则
// 'warn' 或 1    - 警告（不影响退出码）
// 'error' 或 2   - 错误（退出码为 1）

rules: {
    'no-unused-vars': 'error',         // 错误级别
    'no-console': 'warn',              // 警告级别
    'semi': ['error', 'always'],       // 数组形式：[级别, 选项]
    'indent': ['error', 2, { 'SwitchCase': 1 }]  // 带配置对象
}

ESLint 常用规则

rules: {
    // 可能的错误
    'no-console': 'warn',              // 禁止 console
    'no-debugger': 'error',            // 禁止 debugger
    'no-unused-vars': 'error',         // 禁止未使用变量
    'no-undef': 'error',               // 禁止未定义变量
    'no-duplicate-case': 'error',      // 禁止重复 case

    // 最佳实践
    'eqeqeq': 'error',                 // 强制 ===
    'no-eval': 'error',                // 禁止 eval
    'no-implied-eval': 'error',        // 禁止隐式 eval
    'no-return-await': 'error',        // 禁止 return await
    'prefer-promise-reject-errors': 'error', // reject 必须Error

    // 风格
    'semi': ['error', 'always'],       // 强制分号
    'quotes': ['error', 'single'],     // 强制单引号
    'indent': ['error', 2],            // 2空格缩进
    'comma-dangle': ['error', 'always-multiline'], // 多行尾逗号
    'no-trailing-spaces': 'error',     // 禁止尾空格
    'eol-last': 'error',               // 文件末尾换行
    'arrow-parens': ['error', 'always'],  // 箭头函数参数括号
}

ESLint 与 Prettier 集成

# 安装
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

// .eslintrc.js
module.exports = {
    extends: [
        'eslint:recommended',
        'prettier'           // 关闭与 Prettier 冲突的规则
    ],
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': 'error'  // Prettier 规则作为 ESLint 错误
    }
};

// .prettierrc
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "printWidth": 100
}

ESLint 禁用规则

// 禁用单行
console.log('debug'); // eslint-disable-line no-console

// 禁用下一行
// eslint-disable-next-line no-console
console.log('debug');

// 禁用块
/* eslint-disable no-console */
console.log('a');
console.log('b');
/* eslint-enable no-console */

// 禁用整个文件
/* eslint-disable */
// ... 整个文件不受检查

// 禁用特定规则
/* eslint-disable no-console, no-debugger */
console.log('debug');
debugger;

package.json scripts 集成

{
    "scripts": {
        "lint": "eslint src/",
        "lint:fix": "eslint src/ --fix",
        "format": "prettier --write src/",
        "lint-staged": "lint-staged"
    },
    "lint-staged": {
        "*.js": ["eslint --fix", "prettier --write"],
        "*.css": "prettier --write"
    }
}

注意事项

• Babel 只转换语法，不转换 API（需 polyfill）
• useBuiltIns: 'usage' 按需引入 polyfill，减少体积
• ESLint 规则级别：off、warn、error
• 继承规则用 extends，自定义规则用 rules
• 与 Prettier 配合使用 eslint-config-prettier 避免冲突

// Babel 语法 vs API
// 语法转换：let/const → var，箭头函数 → function
// API polyfill：Promise、Array.includes、Object.assign

// preset-env 配置
{
    useBuiltIns: 'usage',   // 按需引入（推荐）
    corejs: 3               // core-js 3.x
}

// 代码中自动引入需要的 polyfill
const arr = [1, 2, 3];
arr.includes(2);  // Babel 自动添加 core-js/modules/array.includes.js

要点总结

• Babel：JavaScript 编译器，转换新语法为兼容版本
• @babel/preset-env 智能预设，按目标环境自动转换
• useBuiltIns: 'usage' 按需引入 polyfill
• ESLint：代码检查工具，统一风格、发现错误
• 规则级别：off(0)、warn(1)、error(2)
• extends 继承规则集，rules 自定义规则
• eslint --fix 自动修复部分问题
• 与 Prettier 配合使用 eslint-config-prettier
• 禁用规则：eslint-disable-line、eslint-disable-next-line