Javascript的工具链
JavaScript作为一种动态编程语言，应用十分广泛。在JS的传统领域Web开发依然保持强势。随着RN框架的兴起，移动端开发也被逐渐渗透。除了大前端的应用开发，JS也在CLI工具和后端开发中占据一席之地。本文将从这些不同的开发场景，梳理开发中所需要的工具链，每个工具链的作用，以及比较各个开发场景之间的异同。
首先，无论什么JS开发，必然需要JS的运行时环境。目前生态最完善的当属Node，当然今年也出现了如deno，bun后起之秀。但node凭借其先发优势，目前在JS开发中，依然处于统治地位。所以本文也以node为例，继续下文的讨论。
node运行时
那么何为运行时环境？运行时环境的作用是什么？【当我们遇到任何一个新工具，新概念的时候，很自然的都有这些因为，而寻找这些问题答案过程，将能够加深对这个新事物的把控和理解。】
从实体上来看，我们能够从电脑的文件夹中，看到Node是一个程序。而这个程序为JS提供JS代码运行的环境。我们从一个常用的命令node index.js开始，来试着理解node的作用。
index.js是我们写的JS代码文件。使用上面的命令，就能够执行代码所描述的功能。 因此，node能够解释运行所写的JS代码，这就是内嵌在node中的V8引擎所干的活。 另外，JS语言出现之初，它的运行环境一直是浏览器，而node显然是运行在操作系统之上的。而浏览器相比操作系统来说，是一个受限的环境，这种环境范围的扩大，也就要求提供更多的能力，如文件读写，操作系统资源等功能，也是Node额外提供的。
npm，node附带的一工具，这个是构建node生态的重要基座。npm是一包管理工具，有了它开发者可以非常方便的发布lib，同样可以方便的使用其他开发者发布的lib，构建新的应用。因为JS设计之初，没有模块导入导出的概念，这就导致lib之间代码卯合存在困难，所以node也同时定义并实现了一个CommonJS模块标准【AMD，UMD标准，以及JS语言标准定义的ESM标准的出现就是后话了】。另值得一提，因为npm的实现有一些性能上表现的问题，就出现了如yarn和pnpm这类的平替工具，改善开发体验。
依托npm，涌现了无数优秀工具。再回到本文的主题，讨论再web开发，cli开发和服务器开发中，不同开发场景中工具链的不同，这些工具链也都是通过npm包来引入使用。
cli和服务器项目的工具链
首先介绍和JS工程项目本身相关的工具，也就是只要是JS工程，为了工程的开发质量效率就需要的工具，自然也是以上不同开发场景中工具链的相同部分。
这些工具基本上都是以lib提供，使用的时候只需要在项目配置文件中声明依赖，进行简单的配置既可以使用。根据这些工具解决的问题，可以分成保证代码规范、质量的工具如Eslint【检查修复代码中常见的不规范写法】；Prettier【保证工程的代码格式规范的工具】；husky是管理git仓库的hooks的方法。基于这个工具，可以自动化一些操作保证入库的代码符合规范，甚至我们可以约束commit的message的规范。当然还有很多这类工具，这里只是介绍几个有代表性的。另外一部分工具是测试框架，比较流行的如Jest框架。最后是typescript，为JS增添了类型系统，可以避免很多因为JS语言本身弱类型导致的很多问题，也是大型项目必备的工具。
CLI工具项目使用上面的工具链基本上就够用了，而对于NodeJS服务器项目，需要例如进程管理PM2，Docker等工具。
需要明确的时候cli和服务器项目JS执行环境是Node，而Web开发JS执行环境是浏览器，有些lib可能只针对特定的环境，如仅能运行在浏览器中比如使用了DOM，那这个lib在node环境中就没办法运行了。
这就引入了一个问题，就是开发lib的时候，针对浏览器、node或者通用的lib。其中开发中需要那些不同的配置呢？可以另开一篇详细讨论。
web开发的工具链
回到Web开发的讨论，Web开发的特殊之处在于，浏览器的实现有很多种，并且随着浏览器的迭代有很多兼容性的问题。为了降低开发成本，babel工具能够转换代码实现，提供兼容性最好的实现。
而把babel工具集成到开发流程中，就需要另一种工具bundler——打包器，常见的有webpack、rollup、esbuild、parcel等。当然打包器的功用不只是这个，还包括将多个文件中的代码整合，tree-shaking，代码混淆，代码分隔等等，最终目标是输出生产环境的代码，生成发布的Web程序包。保障最终的代码的安全、性能、兼容符合上线标准。
Web应用需要三部分代码，HTML、JS、CSS。其中CSS也有一些工具，提升CSS编码体验，不如sass，less，tailwind等工具。当然还有各种Web开发的框架，JQuery，Angular，react，vue，svelte等等。梳理这部分内容，也需要很多的气力，这里不深究了。
另按：有的项目可能会看到gulp和grunt工具，这两个工具属于task runner。可以把开发中的流程分成一个个的task，然后组合编排task为一个workflow，类似与Make工具。 但是随着npm script，以及很多流程都集成到bundler中，这两个工具使用的场景也越来越少了。