前端工程化详解

# 构建工具

构建工具是一种软件工具，用于将源代码转换为可执行的软件。构建工具通常用于自动化软件构建过程，帮助程序员将源代码编译成可运行的二进制文件、打包成库或者生成文档等。

前端为什么需要构建工具呢，有几个方面的需求

  • 希望组件化，模块化自动处理各种引用逻辑
  • 二次化编译代码能自动转换，如ts、sass等
  • 代码压缩、文件压缩、gzip压缩等
  • 希望集成各种lint工具，自动检测
  • 热加载，修改代码后自动刷新需求

从根本原因来讲，引入构建化工具，是为了提升开发效率。

前端目前常用的构建工具有，webpack (opens new window)、gulp (opens new window)、rollup (opens new window)、vite (opens new window)等

# Webpack

Webpack是一个用于打包 JavaScript 应用程序的开源工具。Webpack 可以处理 JavaScript 模块，并根据这些模块之间的依赖关系生成静态资源（如 JavaScript、CSS、图片等）。Webpack 最初是为了解决前端模块化开发的问题而开发的，但是它也可以用于打包其他类型的资源。

Webpack 具有以下特点：

  • 支持多种模块化规范：Webpack 支持多种模块化规范，包括 CommonJS、AMD、ES6 模块等。这意味着你可以使用不同的模块化规范编写代码，并且 Webpack 能够将它们打包成一个文件。
  • 插件系统：Webpack 具有丰富的插件系统，你可以使用这些插件来扩展 Webpack 的功能。例如，你可以使用 UglifyJS 插件压缩 JavaScript 代码，使用 ExtractTextPlugin 插件将 CSS 提取成单独的文件等。
  • 资源加载器：Webpack 支持使用加载器来处理不同类型的资源，例如 CSS、图片、字体等。加载器可以对资源进行预处理，例如压缩、转换等。
  • 代码分割：Webpack 可以将代码分割成多个块（chunk），从而实现按需加载。这可以提高应用程序的性能，因为它可以减少初始加载时间，并且只加载需要的代码块。
  • 开发者友好：Webpack 提供了丰富的开发者工具，例如 webpack-dev-server，可以在开发过程中提供热更新、自动刷新等功能。

TIP

Webpack 适合处理一些复杂的项目，例如单页面应用程序（SPA）或多页面应用程序（MPA）等。比较著名的是react官方create-react-app的代码模板、umi的代码模板、vue2的官方代码模板都使用了Webpack

# Gulp

Gulp 是一个前端构建工具，它使用 Node.js 平台提供的文件流（stream）和插件（plugin）来帮助开发者自动化构建前端项目。

Gulp 的主要作用是帮助开发者在开发前端应用时自动化执行一些繁琐、重复、耗时的任务，如代码压缩、图片压缩、代码合并、自动刷新浏览器等。通过使用 Gulp，开发者可以大大提高开发效率，减少出错的概率。

Gulp 的使用非常灵活，它可以根据项目的需求配置不同的插件，例如：

  • gulp-sass：将 Sass 编译成 CSS。
  • gulp-autoprefixer：自动添加 CSS 前缀。
  • gulp-uglify：压缩 JavaScript 代码。
  • gulp-imagemin：压缩图片。
  • gulp-rename：重命名文件。

Gulp 的优点在于它使用了 Node.js 平台提供的流（stream）模型，能够更高效地处理文件，减少了临时文件的创建和磁盘 I/O，从而提高了构建的速度和效率。同时，Gulp 的插件系统也非常灵活，可以满足不同项目的需求。

TIP

Gulp适合处理一些简单的构建任务，特别是一些不需要复杂的依赖关系和配置的任务。例如文件复制、文件合并、图片压缩等。比较著名的是在Element-ui中使用gulp打包sass文件

# Rollup

Rollup 是一个 JavaScript 模块打包器，可以将多个模块打包成一个单独的 JavaScript 文件，使得应用程序的加载速度更快、体积更小。与其他打包器相比，Rollup 的特点在于它支持 Tree Shaking 技术，能够更好地优化打包后的代码。

Tree Shaking 是一种代码优化技术，能够自动去除没有被使用的代码，从而减小打包后的文件大小。在 Rollup 中，只有被使用的模块才会被打包到最终的 JavaScript 文件中，未使用的模块则会被自动省略。

Rollup 的使用非常简单，只需要定义一个配置文件，指定入口文件、输出文件和需要使用的插件即可。

TIP

Rollup适合于构建库或公共模块，这些模块被设计为在其他应用程序中使用。著名的vue.js就是使用Rollup构建出来的

# Vite

Vite 是一个基于 Rollup 的前端构建工具，它的目标是提供一种快速的开发体验，通过优化开发时的代码编译和热更新，从而提高开发者的生产力。同时，Vite 也支持 Tree Shaking 技术，能够更好地优化打包后的代码。

Vite 具有以下特点：

  • 快速开发和热更新：Vite提供了热更新功能，使得开发者可以在修改代码后立即看到变化。这有助于提高开发效率，特别是在开发过程中频繁修改代码的情况下。
  • 支持ESM：Vite原生支持ESM（ES6模块）, 这是现代JavaScript开发中广泛使用的一种模块化方案。在开发过程中使用ESM有许多好处，包括代码组织更清晰、模块复用性更高、开发效率更高等。
  • 多种插件支持：Vite支持许多插件，包括Babel、TypeScript、PostCSS、Sass等。这使得开发者可以灵活地选择所需的插件来增强应用程序的功能。
  • 构建速度快：Vite的构建速度比传统的Webpack等打包工具要快得多，这主要是由于它使用了现代浏览器原生支持的ES模块加载方案，而不是将所有代码打包到一个文件中。

TIP

如果你正在开发现代化的Web应用程序并需要快速开发、热更新和现代化的模块化方案，那么Vite可能是一个更好的选择。Vue3官方也推荐使用vite构建

← 脚手架 →