前端工程化工具极简介绍

环境

Node.j https://nodejs.org/

前端工程化的基础。一个可在浏览器之外运行 JS 的环境。

包管理

npm https://www.npmjs.com/

Node Package Manager 简写。分为两部分：1. 包管理 cli https://docs.npmjs.com/cli/v8/commands 2. 包仓库 https://www.npmjs.com/

yarn https://yarnpkg.com/

用于替代 npm 的 cli 功能（但包仓库永远只有 npm 的公共或私有部署形式，所以一般语境中的 "npm" 主要是指包仓库）。

pnpm https://pnpm.io/

另一个包管理 cli ，更快更好用。

构建

webpack https://webpack.js.org/

从 grunt 、gulp （均已淘汰）发展而来，使用最广泛的前端打包工具，统治了 2021 年之前 5~6 年的前端开发。

rollup https://rollupjs.org/

比 webpack 简单一些的打包工具，很多开源库项目使用其打包。

Vite https://vitejs.dev/

比 webpack 速度快，其相当于一个工具整合：开发时使用 esbuild (Go 编写，非 JS ，故速度快)，构建时使用 rollup 。

编译器

Babel https://babeljs.io/

开发直接使用 JS 新语法，浏览器尚未支持，Babel 用于将新语法转为浏览器支持的旧语法。

TypeScript https://www.typescriptlang.org/

除去语言属性，TS 本身也有编译器。可将 TS + 新语法转为浏览器支持的旧语法，可替代 Babel 。

开发辅助

ESLint https://eslint.org/

配在本地的 JS 开发辅助工具，用于校验和提示 JS 错误，可自定义提示规则。

Prettier https://prettier.io/

配在本地的开发辅助工具，可自动将 HTML JS CSS React 等代码格式化(Prettier 用于代码排版，ESLint 用于代码错误)。