前端工程化工具极简介绍

2022-08-31 01:48:14 +08:00
nanxiaobei  nanxiaobei

环境

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

1769 次点击
所在节点   前端开发  前端开发
2 条回复
jingcoco
jingcoco
2022-08-31 12:40:07 +08:00
可以再 加 代码生成器
pocketz
pocketz
2022-08-31 15:12:51 +08:00
感觉在刷 SEO 关键词哈哈哈哈哈

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/876603

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX