大家好，很高兴又见面了，我是”高级前端进阶“，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
高级前端进阶
今天给大家带来的主题是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 JackNode.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.tsESLint 插件-拼写检查（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
https://blog.appsignal.com/2023/02/01/5-nodejs-tools-to-learn-in-2023.html
原文链接：
https://blog.appsignal.com/2023/02/01/5-nodejs-tools-to-learn-in-2023.html
原文作者：Camilo Reyes
翻译作者：头条高级前端进阶
- 最新
- 最热
只看作者