前端工具的逻辑

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条评论

发表评论

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