没有一个会的

在晨会上，我要求我的团队成员小林编写一个 Node.js 脚本，自动化地将组件库 components 文件夹中的组件按以下格式在根目录的index.ts文件中导出：

export { default as BasicTable } from './BasicTable';

他有些为难地看着我说：“这个Node.js没学过，不会，要不要让其他人做？”

我扫视了一圈，没有得到回应，于是我一个一个点名，结果没有一个人表示能够完成，都说不熟悉Node.js。我感到困惑，毕竟他们作为有五六年前端经验的团队成员，连一个简单的 Node.js 脚本都不会写！

不要过度神秘化 Node.js 脚本

有些人可能会误解 Node.js 脚本，认为它是用 Node.js 编写的。他们可能会觉得如果不懂 Node.js 的语法就无法编写 Node.js 脚本，感觉会写 Node.js 脚本就很神秘。实际上，Node.js 脚本只是在 Node.js 环境中运行的 JavaScript 脚本而已。

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，使得您可以在服务器端运行JavaScript代码。

在Node.js环境中，您可以编写JavaScript脚本来执行各种任务，比如文件操作、网络通信、数据处理等。这些脚本可以被称为Node.js脚本，因为它们是在Node.js环境中运行的JavaScript代码，仅此而已，没有什么神秘的。

在前端工程中，Node.js 脚本最常用于文件操作，比如读取、写入、删除、新建文件等等操作。

如何运行Node.js脚本

非常简单，只要你的电脑中有装 Node.js，随便找个地方创建一个 index.js 文件，然后在文件中写入以下代码：

console.log('我是一个Node.js脚本');

接着，打开命令行工具，并进入该文件所在的目录。最后，在命令行中输入 node ./index.js 并按下回车键。你将会在命令行工具中看到输出 我是一个Node.js脚本。

如果你想将这个 Node.js 脚本作为 npm 脚本运行，可以将其添加到 package.json 文件中的 scripts 部分。假设你的脚本文件相对于 package.json 的路径是 ./scripts/index.js，你可以添加以下内容到 package.json 的 scripts 部分：

"scripts": {  "my-script": "node ./scripts/index.js"}

这样，你就创建了一个名为 my-script 的自定义脚本，可以通过在命令行中输入 npm run my-script 来运行你的 Node.js 脚本。

如何引入第三方Node.js包

要实现晨会中所说的功能，首先得对工程中的文件进行操作，虽然可以直接使用 Node.js 内置的 fs 模块来实现，但是为了避免处理文件操作时出现的常见错误和边界情况，同时确保跨平台兼容性。还是选择 fs-extra 这个第三方 Node.js 包来进行文件操作，那我们该如何引入呢？

首先要看 Node.js 的版本，在 12 版本之前，只支持 require() 函数来引入。在 12 版本之后，就可以使用 ES6 的 import 语法来引入。但需要在 package.json 文件中设置 "type": "module"。如果这样设置不方便，还可以将 Node.js 脚本的后缀改为 .mjs。

我的 Node.js 版本是 16.14，所以采用 ES6 的 import 语法来引入。

首先，在组件工程的根目录下创建一个名为scripts的文件夹，并在其中创建一个名为autoExport.mjs的文件。

接着，在工程的package.json文件中的scripts部分添加以下内容：

"scripts": {  "export": "node ./scripts/autoExport.mjs"}

在 autoExport.mjs 文件中添加如下代码，引入 fs-extra 这个第三方 Node.js 包。

import fs from 'fs-extra';

实现晨会上的功能

要实现晨会上的功能非常简单，只需要利用 fs-extra 中 readdir 和 writeFile 这个两个方法就可以实现。

• readdir：读取目录下的文件名和文件夹名称。
• writeFile：往文件中写入内容。

import fs from 'fs-extra';fs.readdir('./src/components')  .then(res => {    if (Array.isArray(res)) {      let exportStr = '';      res.forEach(item => {        exportStr = `${exportStr}\n export { default as ${item} } from './components/${item}';`;      });      fs.writeFile('./src/index.export.ts', exportStr);    }  })  .catch(    err => console.error(err)  );

当然以上的代码，太过理想化了，要增加对components文件夹中的文件和文件夹名称的检查。只有符合大驼峰命名规范且包含 index.tsx 文件的文件夹才会被添加到导出文件中。这样可以确保只有符合要求的组件会被导出，避免处理不符合要求的文件夹。

所以还要用 fs-extra 中 lstatSync 和 existsSync 这个两个方法来实现优化。

• lstatSync：用于获取文件或文件夹的状态信息，包括文件类型、大小、权限等，它会返回一个 fs.Stats 对象，可以通过这个对象获取文件或文件夹的各种属性。其对象的一个方法属性isDirectory，可以用于检查指定路径是否为一个文件夹。
• existsSync： 用于检查指定路径的文件或文件夹是否存在。它会返回一个布尔值，如果文件或文件夹存在则返回 true，否则返回 false。

import fs from 'fs-extra';fs.readdir('./src/components')  .then(files => {    if (Array.isArray(files)) {      let exportStr = '';      files.forEach(item => {        // 检查是否为文件夹且文件夹名称符合大驼峰命名规范且包含index.tsx文件        if (            fs.lstatSync(`./src/components/${item}`).isDirectory() &&            /^[A-Z][a-zA-Z]*$/.test(item) &&            fs.existsSync(`./src/components/${item}/index.tsx`)          ) {            exportStr = `${exportStr}\nexport { default as ${item} } from './components/${item}';`;          }      });      fs.writeFile('./src/index.export.ts', exportStr);  })  .catch(err => console.error(err));

看到这里，是不是觉得 Node.js 脚本并没有什么难度，就跟写 js 代码一样，只是运行环境不同。

在脚本开发或BUG排查过程中，肯定会涉及到调试。调试 js 代码我们都很熟悉，那调试Node.js 脚本呢，是不是也跟调试 js 代码一样？下面给大家介绍一下。

如何调试Node.js脚本

当调试 Node.js 脚本时，虽然可以使用 console.log 来调试，但这种方法具有侵入性，个人不推荐使用。我们可以使用 VS Code 中自带的调试功能，可以像在浏览器中调试 js 一样方便地调试 Node.js 脚本。下面来介绍一下如何使用 VS Code 中自带的调试功能。

在VS Code中先点击下图中标识为①的图标后，在点击标识为的②的地方，创建launch.json文件。

选择 Node.js 类型的调试器

按下图选择要调试的脚本的执行命令，先按下图点击这个菜单。

然后输入之前在package.json文件中的scripts属性中定义的命令名称，来搜索要调试的脚本。

点击下图标识为①的图标，开始调试。

调试过程就跟用浏览器的DevTools调试js代码一样，如下图所示。

最后

最后，除了fs-extra给大家分享一些常用的第三方 Node.js 包，大家可以去实践一下，写各种各样的用于前端工程中自动化操作的 Node.js 脚本。

• yargs: 用于解析命令行参数。它提供了简单易用的 API，可以帮助您定义和解析命令行参数，支持选项、标志和参数的定义和解析。
• chalk：用于给命令行输出添加颜色，可以让输出更具有可读性和吸引力。
• cli-table：用于在命令行中创建漂亮的表格，方便展示数据。
• ora：用于在命令行中显示加载动画，可以提示用户正在进行某些操作。
• inquirer：用于在命令行中创建交互式命令行界面，方便用户输入信息或进行选择。
• boxen：用于在命令行中创建带边框的框，可以突出显示某些信息。
• progress：用于在命令行中显示进度条，方便展示任务的进度。
• figlet：用于在命令行中生成艺术字体，可以让输出更具有视觉效果。
• execa：一个更强大的子进程管理工具，它提供了更多的选项和功能，例如并发执行、流控制、更好的错误处理等。它是一个跨平台的替代方案，可以替代 Node.js 的 child_process 模块。
• shelljs：一个 Unix shell 命令的包装器，它允许你在 Node.js 中以类似于 Shell 脚本的方式执行命令。它提供了简单的接口来执行命令、获取输出和处理错误。

作者：前端大骆
链接：
https://juejin.cn/post/7361687968519700514