[前端开发] 前端工程化工具极简介绍


环境

Node.js 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 用于代码错误)。

发表回复

您的电子邮箱地址不会被公开。