处理 js 资源

你是否有疑问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

• 针对 js 兼容性处理，我们使用 Babel 来完成
• 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

Eslint

它是用来检测 js 语法的工具，可以配置各项功能

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

安装 Eslint

npm i eslint-webpack-plugin eslint -D

在 Eslint v9.0.0以后，配置文件书写方式和之前的版本区别比较大，当然现在安装默认也是大于9.0的，所以我们按照新版配置写

1. 新建文件

我们在根目录创建文件 eslint.config.js ，Eslint默认会在项目根目录查找这个文件

2. 具体配置

我们打开 eslint.config.js 配置文件

import js from '@eslint/js'; // 从官方包导入规则
import globals from 'globals'; // 需要先安装：npm install globals

export default [
  js.configs.recommended, // 使用官方推荐配置
  {
    files: ['src/**/*.{js,ts,vue}'],
    languageOptions: {
      ecmaVersion: 2022,      // 指定 ECMAScript 版本
      sourceType: 'module',   // 使用 ES 模块
      globals: {
        ...globals.browser,   // 浏览器环境全局变量（如 window、document）
        ...globals.node,      // Node.js 环境全局变量（如 process、require）
      },
    },
    rules: {
      'no-var': 'error', // 不允许使用 var声明变量
      'no-extra-boolean-cast': 'off', // 强制转Boolean
      'prefer-const': 'warn', 
      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
      'no-console': 'off',
    },
  },
];

files 字段指定该配置生效的文件范围

• 表示从 src 目录开始匹配
• 递归匹配任意子目录
• 匹配 .js、.ts、.vue 后缀的文件

rules 自定义规则及其错误级别

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

更多规则详见：规则文档

3. 在 Webpack 中使用

1. 配置 webpack.config.js

import ESLintPlugin from 'eslint-webpack-plugin'; // 引入eslint插件
export default {
  // 其他配置...
  plugins: [
    new ESLintPlugin({
     context: path.resolve(__dirname, 'src'),
   }),
  ]
}

疑问点

• 插件是需要引入才可以使用的，所以我们在上面import
• 有没有疑问，我们在 ESLint 和 Webpack 中同时限制了检查范围，为什么要这样做？
  • 如果仅靠 ESLint 配置文件限定范围，Webpack 仍会解析这些文件（即使不检查）
  • 编辑器/CLI 检查：如果仅靠 Webpack 限定范围，通过编辑器或命令行运行 ESLint 时可能检查多余文件
• 所以在这里限制目录并不是多余的，而是属于对性能的一种优化

Babel

主要用于将项目中 ES6 以及更新的语法转换兼容比较好的 JavaScript 语法，以便能够运行在旧版本的浏览器或其他环境中

1. 安装

npm i babel-loader @babel/core @babel/preset-env -D
npm install core-js@3

2. 配置

我们直接在 webpack.config.js 文件中配置即可

我们想用 Babel 的功能主要是为了解决兼容性，不需要写太多配置，不用单独创建文件

module: {
  rules: [
    { // babel属于loader
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/, // 排除目录
      use: {
        loader: 'babel-loader', // 通过babel，把高版本的es规范转为低版本
        options: {
          presets: [
            '@babel/preset-env',
            {
              targets: '> 0.25%, not dead', // 智能兼容主流浏览器
              useBuiltIns: 'usage',         // 按需注入 polyfill
              corejs: 3,                    // 使用 core-js@3
            }
          ],
        },
      },
    },
  ]
}

presets 预设

• 简单理解：就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  • @babel/preset-react：一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript：一个用来编译 TypeScript 语法的预设