前端工具的逻辑

Photo by Jeffrey Lee on Unsplash

前端程序开发中会接触到多种多样的工具,让人眼花缭乱。有人甚至做了网站

来罗列常用的前端工具。这两天本人梳理了一下常用的前端工具,按功能不

同,将它们分为代码转译、代码构建工具、代码风格统一、代码提示与单元测

试工具五大类。

代码转译( Transpiling )工具

代码编译与转译的区别可以看这里 。代码转换的主要目的是将一些变种语法

(TypeScript、ES5、ES6等)转化为浏览器兼容的 JavaScript 代码。其中典

型的工具有 TypeScriptBabel 。转译工具不负责模块的解析与合并,这意

味着转译后的代码仍然无法直接为浏览器所使用(大部分场景下)。

代码构建(Building)工具

代码构建工具是包含代码转换(Transpiling)、捆绑(Bundling)、代码压

缩(Minifying)等工具的一个完整的代码“编译”方案。它的作用类似于高级语

言中的编译器。典型代表有 WebpackGulpRollup 等。

代码风格统一工具

代码风格统一工具用于在团队中统一代码风格。典型代表有 Prettier

代码提示工具

代码提示工具用于向开发者指出代码中的潜在缺陷。典型代表 ESLint 等。提示

工具往往也包含了一部分风格化的设置,有人指出最佳实践应该是与风格化工

具整合使用,各司其职。

单元测试工具

单元测试工具用于测试函数的正确性。典型代表有 MochaJasmineKarma

等。

参考链接

Webpack 起步

I finally made sense of front end build tools. You can, too.

《前端工具的逻辑》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注