前端劝退预警:JavaScript 工具链不完全指南

前端劝退预警:JavaScript 工具链不完全指南

经由这么多年的生长,JavaScript 早已经不是昔时谁人不太起眼的剧本语言。现在的 JavaScript 可以说是风景无限,在 Web 前端、移动端、服务端甚至物联网装备上都大展身手,四处都有它的身影。

在 JavaScript 语言日渐壮大的同时,与其配套的开发工具也蓬勃生长。现在的 Web 前端项目,早已不是写几个 HTML 页面,加点 CSS 和 JS 就完事了。随便一个适用的项目,可能都需要用到一些框架和第三方库,以及响应的脚手架、依赖包治理、预编译、构建打包、压缩合并等等工具。纯手工完成这些义务,已经险些不太可能了。

科学手艺是第一生产力,而工具就是其中的一个体现。工欲善其事必先利其器,既然工具解放了人力,我们就应该拥抱它们。本文总结了围绕 JavaScript 的一系列工具,看看一个常见的项目到底需要用到哪些工具。

静态类型检查

JavaScript 自己是一门动态剧本语言,是弱类型的。也就是说,没有编译阶段的数据类型检查,只能在运行时确定类型。利益是对照天真,简朴易学,代码量也对照少。瑕玷也是显著的,就是稍不注重容易出 bug,特别是大型项目,若是没有开发规范,任由开发人员自由发挥,维护起来简直就是灾难。为了填补这个缺陷,一些自带类型系统、可转译成 JavaScript 的语言泛起了。

Flow:Facebook 出品,用 OCaml 写的 JavaScript 静态类型检查系统。支持类型系统、类型标注,可定义 library,提供代码 lint 等。Vue.js 2.x 就是用 Flow 写的。不外,Vue 3.0 改用另一种静态类型语言了,那就是 TypeScript。

TypeScript:TypeScript 是微软开发的语言,是 JavaScript 的超集,能够编译成 JavaScript。现在 TypeScript 越来越盛行,获得了大量项目的认可。

代码气概检查(Linter)

由于JavaScript 动态语言的特征,在写法上过于天真,往往导致多人协作的项目代码气概各异,给维护和扩展带来不少贫苦。另外,部门语言特征容易导致 bug,最佳实践里通常不推荐使用。因此,代码 Lint 工具就派上用场了。它不但可以检查代码誊写花样,还可以检查出引用未定义的变量等低级错误。

曾经泛起过许多种 Lint 工具,好比 JSLint、JSHint、StandardJS、JSCS 等等,现在有大一统的趋势,基本都用 ESLint 了。

刚最先用 Lint 工具的时刻可能会不适应,由于限制太多,动不动就忠告和报错。但从久远来看,JavaScript 项目引入 Linter 照样有需要的。

包治理器

JavaScript 之所以能够遍地开花,很大水平是由于手艺生态异常繁荣,种种第三方库应有尽有。云云重大的第三方库聚集,势必需要一个治理平台,卖力第三方包的托管、版本治理、下载安装和依赖治理等。

npm:JavaScript 包治理器的集大成者,现在最主流的工具。 基于 Node.js,包罗网站和 CLI,上面的包总数跨越 100万,基本涵盖了 JavaScript 项目所需的方方面面。

yarn:2016 年 Facebook 推出的包治理器,跟 npm registry 兼容,主打 CLI 的快速、平安和确定性。

bower:曾经对照盛行,用于治理前端的 JavaScript 包,由于当初 npm 只支持 node 环境的包治理。随着 npm 和 yarn 同时支持 node 和浏览器端的包治理,bower 也逐渐淡出历史了。

pnpm:通过硬链接(hard links)的方式在硬盘上对某个版本的模块只保留一份,可以在多个项目之间共用,从而节省了大量硬盘空间,顺便也加快了模块安装速率。

模块加载器

JavaScript 早期没有语言层面的模块化支持,导致大型项目的依赖治理异常不利便。变量名冲突、全局变量污染、模块加载顺序等问题对照突出。曾经泛起过种种模块化方案,好比 CommonJS Modules (CJS),Asynchronous Module Definition (AMD)和 Universal Module Definition (UMD)。从 2015 年最先,ES6 从语言层面支持了模块化,即 ECMAScript Modules (ESM)。

除了上述常见的 JavaScript 模块花样,另有像 System.register 或全局模块,以及一些非 JavaScript 模块,好比 JSON modules,CSS modules,Web Assembly 等。

模块加载器就是加载和处置上面种种类型模块代码的工具,有同步和异步、静态和动态之分。通常,一个模块放在一个单独的文件里,通过一些指令来导入。当一个项目有几十上百个模块的时刻,若何保证它们的加载执行先后顺序就是个问题。不用忧郁,模块加载器会帮你处置好依赖关系。

RequireJS实现了 AMD 模块加载,主要用于浏览器端,也可以在 Node 里使用。

SystemJS:一个动态模块加载器,可以加载所有类型的 JavaScript 模块,甚至包罗非 JavaScript 模块,可用于浏览器和 Node。

StealJS:可以加载 ESM,ADM 和 CJS 花样的模块。

ES Module Loader: 浏览器实现的模块加载器,Node.js 里加上  --experimental-modules 标志也能使用。

以上模块加载器是在运行时加载和执行代码的。不要跟构建工具里的种种 loader 混淆,那些是在构建时举行预处置的工具,只是做一些花样转换。

打包工具

一个现实的生产项目,通常不是把源码直接公布到服务器上。而是通过一些工具对种种模块和静态资源举行整合处置,最终天生的代码可能跟源码完全不一样了。这就是打包工具的作用。对照常见的打包工具有:

Webpack:可以说是最盛行的打包器,险些是大部门项目的标配。它自己只能识别 JavaScript 和 JSON 文件,然则它的架构设计提供了无限的可能,通过种种 loader 可以处置随便类型的资源,通过插件可以优化打包效果和举行资源治理、注入环境变量等。它的构建目的也可以凭据平台定制,好比浏览器、Node.js、web worker, Electron 等。

Rollup:也是一个优异的打包器,支持输出 library 和 application。它最大的卖点就是默认支持 ES 模块,很早就实现了 tree-shaking 功效。同时也具备插件和 hook 功效,可定制化也对照好。

Parcel:工具界的后起之秀,号称“零设置*的打包器,若是你曾经被 Webpack 繁琐的设置困扰过,那它可能会吸引你。

无损卡尔曼滤波UKF(3)-展望-天生Sigma点

Browserify:应用局限稍窄的打包器,专门用于转换 Node.js 包以便能在浏览器运行。它跟 Node.js 使用相同的模块系统,有些模块只用于 Node 平台,通过它的转换就可以在浏览器端使用了。它只能处置纯 JavaScript 模块,通常跟 Gulp 配合使用。

Metro:React Native 专用的打包器,通过一个入口文件和种种设置,最后打成包罗所有代码和依赖的单个 JavaScript 文件。

义务治理工具(Task Runner)

Task Runner 的作用是自动化执行项目所需的种种重复性动作,好比:

  • CSS 预处置 (Less, Sass)
  • CSS 自动添加新特征属性前缀(Autoprefixer)
  • 优化图片
  • 合并、压缩 JavaScript 文件
  • 监听文件转变,自动执行义务

等等。
对照主流的义务治理器是 Grunt 和 Gulp,Webpack 也算一个。

Grunt:命令行工具,通过精细化的设置和厚实的插件可以完成许多庞大的义务。

Gulp:跟 Grunt 差别,Gulp 接纳流式管道组合多个义务,义务之间的暂且效果是放在内存中的,执行效率会高许多。

Webpack:又是你,Webpack。义务治理只是 Webpack 壮大功效的一部门,通过差别的插件在构建的差别阶段执行个性化的义务。

若是你以为上面几个义务治理器有点杀鸡用牛刀,你也可以凭据现实情况选用 bash 剧本,npm 剧本或者 Makefile 等实现一些简朴的义务治理。

转译器

JavaScript 转译器的作用是将非 JavaScript 语言(TypeScript,CoffeeScript,LiveScript 等)或差别版本的 JavaScript(ES6,ES7,ES8 等)翻译成相符目的平台要求(兼容性、变量混淆、严酷模式等)的等价代码。

大部门转译器在处置源码和代码优化的历程中都使用抽象语法树(AST)作为中心花样。AST 将源码逐步拆分剖析成带有元数据的树形结构:

Code --(parse)-->AST--(transform)-->AST--(generate)-->Code

Babel 是现在主流的 JavaScript 转译器,它的工具链系统主要用于将 ES6 以上版本的 JavaScript 转译成向后兼容浏览器的代码。Babel 可以转换语法、提供目的平台缺失的特征支持、转换源码等。

有了 Babel,我们可以尽早用上新的语言特征,而不用忧郁目的浏览器是否支持。

构建工具

构建实在是个综合观点,它包罗了模块打包、源码转译、义务治理等多个步骤。其他语言和平台有种种 Build 工具,好比 Make,Gradle,Ant,Maven,Rake 或 MSBuild 等。其中 Make 是最常见的通用构建工具,通常用于 C 语言,但实在也可以用于构建 JavaScript 项目。

对于 JavaScript 工具链来说,构建的目的可能是 npm 包、网站、Node 服务器、RN 应用、Electron 应用等等。有些义务可用专门的工具完成,但构建是个庞大的历程,通常需要综合使用多个工具。

好比 Build 可以用 BuckBazelLerna 等工具同时治理多个模块,实现增量 Build(只重新构建有改动的模块,提高效率)。义务治理使用 Grunt 和 Gulp,模块打包用 Webpack、Rollup、Parcel、Browserify 等。

调试工具

调试器在开发历程中必不可少,它可以在 Node.js 和浏览器中跟踪查看运行中的代码。通常会提供断点、单步执行、监视变量、查看内存和 CPU 使用情况等功效。

Chrome DevTools:Chrome 浏览器自带的开发者工具,是现在浏览器开发工具里最好用的(没有之一)。它的功效之壮大,用法之多可以写本书了。

node-inspector:早期用于调试 Node.js 代码的工具,现在基本不用了,由于 Node.js 已经内置了基于 DevTools 的调试器。

VS Code:又一调试神器,内置 Node.js 调试器,还能调试 TypeScript 和其他能转译成 JavaScript 的语言。

Node 历程治理器

Node 历程治理器用于治理运行中的 Node 应用程序。提供高可用、自动重启、文件监控、性能和资源监控和集群等功效。

Forever:顾名思义,它的作用是保持 Node.js 程序永远运行。它是一个简朴的命令行工具,对小型 Node.js 应用对照利便。

PM2:用于生产环境的 Node.js 历程治理工具,内置负载平衡、自动重启和日志、监控和集群治理等功效。

StrongLoop Process Manager (Strong-PM):跟 PM2 差不多,也可用于生产环境的 Node.js 历程治理,有多主机部署功效。

另外,SystemD 是 Linux 系统里的默认历程治理器,可用它把 Node.js 应用作为服务运行。

项目脚手架

随着项目庞大度的提升,建立新项目的步骤也变得越来越繁琐,可能需要重复大量的设置事情。这个时刻就需要项目脚手架了。许多框架都提供了脚手架工具,好比 Vue.js 有 Vue CLI,Angular 有 Angular CLI,React 有 create-react-app 等。也有通用的脚手架,Yeoman 就是最盛行的一个。

  • 快速建立新项目
  • 建立模块或 package
  • 启动新服务
  • 统一代码气概、最佳实践等
  • 项目推广,让用户快速上手示例 app
  • 等等等等等等,自己探索

总结

本文列举了 JavaScript 通例项目可能要用到的工具链,零零散散几十个。每一个工具都解决了特定领域的问题,值得继续挖掘,本文由于篇幅所限只能蜻蜓点水式地一笔带过,更多前端手艺分享可以关注下我的民众号[1024译站]。

前端劝退预警:JavaScript 工具链不完全指南

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/525.html