2023年最值得掌握的5款Node.js工具！

发表时间: 2023-11-17 06:20

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端进阶

今天给大家带来的主题是2023 年值得学习的 5 个 Node.js 工具，话不多说，直接开始！

前言

Node 生态附带了多年来不断发展的各种工具。这些工具通过 NPM 包交付并在命令行中运行，使任何开发人员都可以访问使用，从而避免花哨的 IDE 。

本篇文章将带着大家探索 2023 年值得学习的 5 个 Node 工具：TypeScript、ES 模块、ESLint、ESLint SpellCheck 插件和 Mocha。这些工具都是可以通过命令行运行的，从而帮助开发者在处理 Node 项目时提高工作效率。

Node.js 添加 TypeScript 支持

TypeScript 是 JavaScript 的超集，其建立在 JavaScript 之上。开发者预先编写 TypeScript，然后使用 TypeScript 编译器将代码编译为纯 JavaScript 代码。拥有纯 JavaScript 代码后，可以将其部署到允许 JavaScript 运行的任何环境中。

需要注意的是：TypeScript 文件扩展名是 .ts ，而不是 JavaScript 文件的 .js 扩展。

如果目前还没有在项目中尝试过 TypeScript，那么确实值得尝试一下。 TypeScript 为项目增加了类型安全性，并且更容易发现代码中的潜在错误，在进行大量代码更改时充分利用编译器的功能是很有价值的。

需要首先通过 npm init 创建一个 package.json 文件，然后在里面添加 TypeScript 依赖项。

> npm i typescript --save-dev

此时，可以将 tsc（全称为 TypeScript Compiler）命令作为构建脚本添加到 package.json 中。如果有一堆现有的 JavaScript 文件，任何以 .ts 扩展名重命名的文件都会成为 TypeScript 文件，编译器会自动完成剩余的工作。

大多数开发工作流都需要对编译器配置进行一些调整，可以通过实例化一个项目来完成。

> npx tsc --init

以上代码将创建一个具有默认配置的 tsconfig.json 文件。此文件中详细记录了每个配置，以便开发者可以根据需要定制该工具。在该配置文件中，可以更改 TypeScript 配置。

"compilerOptions": {    // 编译配置  "module": "esnext",  "target": "esnext"}

接下来可以在项目中声明强类型接口和类，比如下面的 Animal 类代码：

class Animal {  name: string;  constructor(name: string) {    this.name = name;  }  sayHi(): string {    return `My name is ${this.name}`;  }}let a: Animal = new Animal('Jack');console.log(a.sayHi());// 输出结果：My name is Jack

Node.js 和浏览器中的 ES 模块

主流浏览器很早就实现了 ESM 模块系统，而直至 2020 年 5 月，Node.js v12.17.0 才为所有 Node.js 应用程序提供 ESM 支持，同时彻底告别了实验标志。

node --experimental-modules

目前 Node.js 和浏览器都可以通过 import、export 实现同等功能的导入导出。 ESM 模块系统允许开发者简单地从不同的文件中导入代码，并且无需转译器就可以在本地工作。

在 Node 中，将 package.json 文件 type 更改为 module 即可。

{    "type": "module"    //表示使用 ESM}

这相当于告诉 Node 在没有 TypeScript 转译器的情况下开始使用 ES 模块。在浏览器中，可以直接在 index.html 中修改 <script> 标签，添加 type 属性值，比如下面的示例：

<script src="dist/src/index.js" type="module"></script>// 注意type属性配置为module

以上代码相当于完成了两件事情：

TypeScript 不会破坏导出/导入代码
浏览器可以使用相同的模块系统，即 ESM 来解决依赖关系

这里有一个问题，即 TypeScript 和浏览器之间存在一些差异。 ESM 规范说导入的模块必须声明文件扩展名，而 TypeScript 在没有像 .js 这样的扩展名也能正确解析。

要解决此问题，只需在 TypeScript 代码中将所有依赖项声明为 JavaScript 文件即可。编译器足够聪明，知道开发者要将导入声明为 JavaScript 文件。

import { A, B, C } from './myConstants.js';// JavaScript 文件导入

用于 Node.js 应用程序的带有 TypeScript 的 ESLint

linter 工具 ESLint 静态分析代码，同时支持大多数文本编辑器，可以在命令行中直接运行。

ESLint 添加了代码气味检查（Code Smell Checks）、潜在错误检查，甚至使代码风格保持一致。非常建议启用 ESLint 默认提供的所有功能。

首先，需要初始化配置包：

> npm init @eslint/config

此 CLI 工具会自动引导完成一组选项，可以在其中自定义一些配置。一定要选择所有三个：检查语法、发现问题和强制代码风格。选择标准的、最流行的风格指南 ESM 作为模块系统和 TypeScript。

配置文件具有三种风格：

JavaScript：本示例使用该配置
JSON
YAML

为了使 ESLint 与 TypeScript 编译器一起工作，它需要在配置文件中设置 parserOptions。另外，由于在 package.json 中使用的是 ES 模块系统，所以必须将配置文件重命名为.eslintrc.cjs。

在 .eslintrc.cjs 中一定要设置 parserOptions：

{    "parserOptions": {        "project": ["tsconfig.json"],        "tsconfigRootDir": __dirname,          // JavaScript代码         "ecmaVersion": "latest"          // 使用 ECMAScript 最新版本        }}

请注意 __dirname 的使用，这允许 linter 从项目文件夹结构中的任何位置找到 tsconfig.json 文件。此技术只能通过 JavaScript 配置文件实现，现在在 src 文件夹中检查一个文件：

npx eslint constant.ts

ESLint 插件-拼写检查（SpellCheck）

ESLint 可以通过插件进行功能扩展，这里将重点安装拼写检查插件。该插件用于对 javascript 文件的标识符、字符串和注释进行拼写检查，可以通过下面的命令快速安装：

npm i eslint-plugin-spellcheck --save-dev// 安装插件

要在 ESLint 中明确启用拼写检查器，比如下面的 .eslintrc.cjs 文件：

{ "plugins": [   "spellcheck"    // 明确启动插件],"rules": {   "spellcheck/spell-checker": [1,{           "comments": true,           "strings": true,           "identifiers": true,           "templates": true,           "lang": "en_US",        //    不检查的单词数组           "skipWords": [               "dict",               "aff",               "hunspellchecker",               "hunspell",               "utils"           ],            //    Array of Regular Expressions 插件将尝试匹配 js 节点元素值           "skipIfMatch": [               "http://[^s]*",               "^[-\w]+\/[-\w\.]+$"           ],        //    正则表达式数组插件将尝试匹配在节点中找到的每个单词           "skipWordIfMatch": [               "^foobar.*$"           ],        //    字符数量小于 minLength 的单词将不会进行拼写检查。           "minLength": 3        }    ]}

当发现拼写错误时， ESLint 会发出警告，如果有在字典中找不到的有效单词，只需将它们添加到 skipWords 的列表中。使用 ESLint，大多数捕获的问题都会触发错误，并且导致构建失败。这使得该 CLI 非常适合本地开发和构建服务器上的持续集成。

要自动启用这些检查，请将 ESLint 添加到 package.json 中的预构建脚本。

{  "scripts": {      // eslint脚本，构建之前运行      "prebuild": "eslint ."    }}

用于在 Node.js 中进行测试的 Mocha

如果没有实践过测试驱动开发 (TDD，全名为 Test-driven development)，可以尝试下 Mocha。 Mocha 能与本文目前介绍的所有工具无缝集成，可以在秒级运行数百个单元测试。

要开始使用 Mocha，请安装以下依赖项：

npm i @types/mocha jsdom jsdom-global ts-node mocha --save-dev// 安装mocha依赖包

注意依赖项中 ts-node 和 jsdom， jsdom 允许在没有无头浏览器的情况下模拟浏览器元素，如 window 对象。

因为使用的是 TypeScript，所以 ts-node 是一个执行引擎，不需要预编译，直接在 Node 上执行 TypeScript。这两个依赖项对于在 Mocha 中运行单元测试非常有用。

要在 Mocha 中启用这些工具，请使用以下配置创建一个 .mocharc.json 文件：

{  "require": ["jsdom-global/register"],   //jsdom-global  "loader": "ts-node/esm",   //ts-node  "extensions": ["ts"],   //扩展后缀  "spec": ["tests/**/*.test.ts"]}

以上配置告诉 Mocha 启用三项功能：jsdom、带有 ES 模块的 ts-node 和 TypeScript 扩展。规范支持设置测试的位置，还可以使用 glob 模式。然后，使用 TypeScript 编写单元测试。

it('移动', () => {  // 运行逻辑  player.moveRight();  player.moveDown();  player.moveDown();  equal(2, player.x);  // 断言库});it('设置位置', () => {  // 内部运行逻辑  player.placeBomb();  map.update();  equal(1, player.bombs);});

请注意，Mocha 没有附带断言库，但是 Node 内置了一个，因此开发者也不必添加其他依赖项。如果已经熟悉 Chai，那么过渡将是无缝的。最后，一定要在 package.json 中包含 Mocha：

"scripts": {  "test": "mocha"  //添加到scripts中}

.mocharc.json 配置文件已经告诉 Mocha 如何运行测试，同时使 package.json 文件保持整洁。

一个问题是 Mocha 在 watch 模式下不支持 ESM，希望在未来的版本中可以解决此限制。

请记住，linter 和编译器与在持续集成管道中运行的单元测试是分开的。 ts-node 中的执行引擎不是编译器，不做任何代码检查。因此，一个好的技术是先运行 ESLint 和 TypeScript 编译器，然后在构建服务器上最后运行单元测试。

本文总结

本文探讨了今年值得学习的 5 个 Node 工具：TypeScript、ES 模块、ESLint、ESLint SpellCheck 插件，最后是用于运行测试的 Mocha。

这些 Node 工具提供了在没有 IDE 的情况下使用的可能性，从而实现自动化、持续集成，最终受益于整个团队。因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://blog.appsignal.com/2023/02/01/5-nodejs-tools-to-learn-in-2023.html

https://formidable.com/blog/2021/node-esm-and-exports/

https://github.com/aotaduy/eslint-plugin-spellcheck