如何使用 Webpack 搭建 Babel + TS + ESLint？

XMX303
245 阅读8分钟

安装依赖

npm i -D webpack webpack-cli \
    # babel 依赖
    @babel/core @babel/cli @babel/preset-env babel-loader \
    # TypeScript 依赖
    typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin \
    @babel/preset-typescript \
    # ESLint 依赖
    eslint eslint-webpack-plugin

配置文件

  1. 在项目根目录添加 .eslintrc配置文件
  • 配置解析
    • parser：指定解析器为 @typescript-eslint/parser，这是专门为 TypeScript 代码设计的 ESLint 解析器。
    • plugins：指定 ESLint 插件为@typescript-eslint，这个插件可以跟前面的@typescript-eslint/parser解析器协同合作，针对 TypeScript 代码的特点提供更精准的代码质量检查。
    • extends：继承已有的 ESlint 配置。这里继承了plugin:@typescript - eslint/recommended配置，意味着会应用@typescript-eslint插件推荐的所有规则。
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"]
}
  1. 在 webpack.config.js中设置好配置
  • 主要配置
    • module：通过配置rules将ts文件通过babel-loader的@babel/perset-typescript预制插件来将 ts文件转换成 ES5 环境下的 JavaScript 文件，以便能够在目标环境下能执行。
    • plugins：通过加载eslint-webpack-plugin配置获取 ESLint 功能，用这些功能来校验项目中的 js,ts文件格式
const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  entry: './src/index.ts',
  mode: 'development',
  devtool: false,
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-typescript'] }
        }
      }
    ]
  },
  plugins: [new ESLintPlugin({ extensions: ['.js', '.ts'] })]
}

Babel、TS、ESLint 接入 Webpack 流程的收益是什么？

  1. ESLint 接入 Webpack 的收益

    • 统一构建过程中的代码检查

      • 在开发过程中，开发人员可能会通过 ESLint 的 CLI 单独检查代码。但是，在一个完整的项目构建流程中，通过将 ESLint 接入 Webpack，可以确保在每次构建时自动进行代码检查。例如，在一个多人协作的大型项目中，不同开发人员可能会使用不同的代码编辑器，这些编辑器对 ESLint 的集成程度和配置可能有所不同。将 ESLint 接入 Webpack 后，无论开发人员在本地如何设置，构建服务器在构建项目时都会按照统一的规则进行代码检查，保证代码质量的一致性。

    • 与其他 Webpack 插件协同工作

      • Webpack 构建过程中有许多其他插件，如html - webpack - plugin用于生成 HTML 文件、copy - webpack - plugin用于复制文件等。ESLint 可以与这些插件协同工作。例如，当html - webpack - plugin生成包含 JavaScript 脚本引用的 HTML 文件时，ESLint 可以提前检查这些脚本的质量，避免将有问题的代码引入到最终的 HTML 页面中。同时，在代码打包和优化的过程中，ESLint 的检查结果可以作为参考，比如在进行代码压缩和混淆之前，先确保代码符合一定的质量标准。

    • 提高开发效率和代码可维护性

      • 在 Webpack 构建过程中，ESLint 可以根据配置文件（如.eslintrc）中的规则，及时发现代码中的潜在问题，如语法错误、代码风格不一致等。这有助于开发人员在早期阶段发现并解决问题，减少后期调试的时间和成本。而且，通过强制遵循一定的代码风格规范，新加入项目的开发人员可以更快地理解和维护代码。例如，在一个规定使用特定缩进风格和变量命名规则的项目中，ESLint 可以确保所有代码都符合这些规则，使代码库更加整洁和易于维护。

  2. TypeScript 接入 Webpack 的收益

    • 实现 TypeScript 的模块打包和优化

      • TypeScript 本身是一种编程语言，虽然它有自己的编译器（tsc），可以将.ts文件编译成 JavaScript 文件。但是，Webpack 提供了更强大的模块打包功能。通过将 TypeScript 接入 Webpack，不仅可以将 TypeScript 代码编译为 JavaScript，还可以对这些代码进行模块打包，处理模块之间的依赖关系。例如，在一个包含多个 TypeScript 模块的项目中，Webpack 可以根据模块之间的引用关系，将它们打包成一个或多个 JavaScript 文件，优化代码的加载顺序和方式，提高应用程序的性能。

    • 与 Webpack 的其他资源处理功能集成

      • Webpack 可以处理各种类型的资源，如 CSS、图片、字体等。当 TypeScript 接入 Webpack 后，可以与这些资源的处理过程更好地集成。例如，在一个使用 TypeScript 编写的组件库项目中，组件的样式可能是用 CSS 编写的。Webpack 可以将 TypeScript 组件代码和其对应的 CSS 样式一起打包，确保在使用组件时，样式能够正确加载。同时，对于一些需要在 TypeScript 中动态加载的资源，如图片路径的引用，Webpack 可以提供更好的支持，确保在不同的环境下（如开发环境和生产环境）都能正确地加载这些资源。

    • 利用 Webpack 的开发环境特性

      • 在开发过程中，Webpack 提供了一些方便的开发环境特性，如热模块替换（Hot Module Replacement，HMR）。当 TypeScript 接入 Webpack 后，可以利用这些特性。例如，在开发一个使用 TypeScript 编写的 React 应用时，当修改了一个 TypeScript 组件的代码，通过 HMR，Webpack 可以在不刷新整个页面的情况下，将新的组件代码替换到正在运行的应用中，大大提高了开发效率，让开发人员能够更快地看到代码修改的效果。

  3. Babel 接入 Webpack 的收益

    • 兼容不同浏览器和环境的代码转换

      • Babel 主要用于将现代 JavaScript 语法（如 ES6 +）转换为向后兼容的 JavaScript 版本，以便在不同的浏览器和环境中运行。当接入 Webpack 后，可以在 Webpack 打包过程中自动对代码进行转换。例如，在一个需要支持旧版本浏览器的项目中，开发人员可以使用最新的 JavaScript 语法编写代码，如箭头函数、类语法等。在 Webpack 构建时，Babel 会将这些现代语法转换为旧浏览器能够识别的语法，如将箭头函数转换为普通函数表达式，确保应用程序在各种浏览器环境下都能正常运行。

    • 与 Webpack 的代码分割和懒加载功能结合

      • Webpack 的代码分割和懒加载功能可以有效地减小初始加载包的大小，提高应用程序的性能。Babel 可以与这些功能很好地结合。例如，在一个大型单页应用（SPA）中，通过 Webpack 的代码分割可以将不同路由对应的代码分割成不同的块（chunks）。Babel 可以在这个过程中，对每个块中的代码进行语法转换，确保这些代码在加载后能够正确运行。同时，在懒加载的场景下，当需要加载某个块的代码时，Babel 已经将其转换为兼容的语法，提高了代码加载和执行的效率。

    • 支持项目中的非 JavaScript 资源处理（通过插件）

      • 虽然 Babel 主要用于处理 JavaScript 代码，但通过一些相关插件，它可以间接支持其他非 JavaScript 资源的处理。例如，在处理一些包含 JavaScript 代码的模板文件（如 Vue 单文件组件中的<script>部分）时，Babel 可以在 Webpack 构建过程中对这些模板文件中的 JavaScript 代码进行转换。这使得在处理复杂的前端项目架构（如同时包含多种框架和模板语言）时，Babel 能够在 Webpack 的统一工作流程中发挥更大的作用，确保所有包含 JavaScript 代码的部分都能得到适当的处理。

其他

Babel 预设规则集 —— Preset，这种设计能按需将一系列复杂、数量庞大的配置、插件、Polyfill 等打包成一个单一的资源包，从而简化 Babel 的应用、学习成本。Preset 是 Babel 的主要应用方式之一，社区已经针对不同应用场景打包了各种 Preset 资源，例如：

除常规 JavaScript 代码风格检查外，我们还可以使用适当的 ESLint 插件、配置集实现更丰富的检查、格式化功能，这里推荐几种使用率较高第三方扩展，建议读者跟进学习：

avatar
文章
阅读
粉丝