什么，你連一個Node.js腳本都不會寫！！！

沒有一個會的

在晨會上，我要求我的團隊成員小林編寫一個 Node.js 腳本，自動化地將組件庫 components 文件夾中的組件按以下格式在根目錄的index.ts文件中導(dǎo)出：

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

他有些為難地看著我說：“這個Node.js沒學(xué)過，不會，要不要讓其他人做？”

我掃視了一圈，沒有得到回應(yīng)，于是我一個一個點名，結(jié)果沒有一個人表示能夠完成，都說不熟悉Node.js。我感到困惑，畢竟他們作為有五六年前端經(jīng)驗的團隊成員，連一個簡單的 Node.js 腳本都不會寫！

不要過度神秘化 Node.js 腳本

有些人可能會誤解 Node.js 腳本，認(rèn)為它是用 Node.js 編寫的。他們可能會覺得如果不懂 Node.js 的語法就無法編寫 Node.js 腳本，感覺會寫 Node.js 腳本就很神秘。實際上，Node.js 腳本只是在 Node.js 環(huán)境中運行的 JavaScript 腳本而已。

Node.js是一個基于Chrome V8引擎的JavaScript運行時環(huán)境，使得您可以在服務(wù)器端運行JavaScript代碼。

在Node.js環(huán)境中，您可以編寫JavaScript腳本來執(zhí)行各種任務(wù)，比如文件操作、網(wǎng)絡(luò)通信、數(shù)據(jù)處理等。這些腳本可以被稱為Node.js腳本，因為它們是在Node.js環(huán)境中運行的JavaScript代碼，僅此而已，沒有什么神秘的。

在前端工程中，Node.js 腳本最常用于文件操作，比如讀取、寫入、刪除、新建文件等等操作。

如何運行Node.js腳本

非常簡單，只要你的電腦中有裝 Node.js，隨便找個地方創(chuàng)建一個 index.js 文件，然后在文件中寫入以下代碼：

console.log('我是一個Node.js腳本');

接著，打開命令行工具，并進入該文件所在的目錄。最后，在命令行中輸入 node ./index.js 并按下回車鍵。你將會在命令行工具中看到輸出 我是一個Node.js腳本。

如果你想將這個 Node.js 腳本作為 npm 腳本運行，可以將其添加到 package.json 文件中的 scripts 部分。假設(shè)你的腳本文件相對于 package.json 的路徑是 ./scripts/index.js，你可以添加以下內(nèi)容到 package.json 的 scripts 部分：

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

這樣，你就創(chuàng)建了一個名為 my-script 的自定義腳本，可以通過在命令行中輸入 npm run my-script 來運行你的 Node.js 腳本。

如何引入第三方Node.js包

要實現(xiàn)晨會中所說的功能，首先得對工程中的文件進行操作，雖然可以直接使用 Node.js 內(nèi)置的 fs 模塊來實現(xiàn)，但是為了避免處理文件操作時出現(xiàn)的常見錯誤和邊界情況，同時確保跨平臺兼容性。還是選擇 fs-extra 這個第三方 Node.js 包來進行文件操作，那我們該如何引入呢？

首先要看 Node.js 的版本，在 12 版本之前，只支持 require() 函數(shù)來引入。在 12 版本之后，就可以使用 ES6 的 import 語法來引入。但需要在 package.json 文件中設(shè)置 "type": "module"。如果這樣設(shè)置不方便，還可以將 Node.js 腳本的后綴改為 .mjs。

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

首先，在組件工程的根目錄下創(chuàng)建一個名為scripts的文件夾，并在其中創(chuàng)建一個名為autoExport.mjs的文件。

接著，在工程的package.json文件中的scripts部分添加以下內(nèi)容：

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

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

import fs from 'fs-extra';

實現(xiàn)晨會上的功能

要實現(xiàn)晨會上的功能非常簡單，只需要利用 fs-extra 中 readdir 和 writeFile 這個兩個方法就可以實現(xiàn)。

• readdir：讀取目錄下的文件名和文件夾名稱。
• writeFile：往文件中寫入內(nèi)容。

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)
  );

當(dāng)然以上的代碼，太過理想化了，要增加對components文件夾中的文件和文件夾名稱的檢查。只有符合大駝峰命名規(guī)范且包含 index.tsx 文件的文件夾才會被添加到導(dǎo)出文件中。這樣可以確保只有符合要求的組件會被導(dǎo)出，避免處理不符合要求的文件夾。

所以還要用 fs-extra 中 lstatSync 和 existsSync 這個兩個方法來實現(xiàn)優(yōu)化。

• lstatSync：用于獲取文件或文件夾的狀態(tài)信息，包括文件類型、大小、權(quán)限等，它會返回一個 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 => {
        // 檢查是否為文件夾且文件夾名稱符合大駝峰命名規(guī)范且包含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 代碼一樣，只是運行環(huán)境不同。

在腳本開發(fā)或BUG排查過程中，肯定會涉及到調(diào)試。調(diào)試 js 代碼我們都很熟悉，那調(diào)試Node.js 腳本呢，是不是也跟調(diào)試 js 代碼一樣？下面給大家介紹一下。

如何調(diào)試Node.js腳本

當(dāng)調(diào)試 Node.js 腳本時，雖然可以使用 console.log 來調(diào)試，但這種方法具有侵入性，個人不推薦使用。我們可以使用 VS Code 中自帶的調(diào)試功能，可以像在瀏覽器中調(diào)試 js 一樣方便地調(diào)試 Node.js 腳本。下面來介紹一下如何使用 VS Code 中自帶的調(diào)試功能。

在VS Code中先點擊下圖中標(biāo)識為①的圖標(biāo)后，在點擊標(biāo)識為的②的地方，創(chuàng)建launch.json文件。

選擇 Node.js 類型的調(diào)試器

按下圖選擇要調(diào)試的腳本的執(zhí)行命令，先按下圖點擊這個菜單。

然后輸入之前在package.json文件中的scripts屬性中定義的命令名稱，來搜索要調(diào)試的腳本。

點擊下圖標(biāo)識為①的圖標(biāo)，開始調(diào)試。

調(diào)試過程就跟用瀏覽器的DevTools調(diào)試js代碼一樣，如下圖所示。

最后

最后，除了fs-extra給大家分享一些常用的第三方 Node.js 包，大家可以去實踐一下，寫各種各樣的用于前端工程中自動化操作的 Node.js 腳本。

• yargs: 用于解析命令行參數(shù)。它提供了簡單易用的 API，可以幫助您定義和解析命令行參數(shù)，支持選項、標(biāo)志和參數(shù)的定義和解析。
• chalk：用于給命令行輸出添加顏色，可以讓輸出更具有可讀性和吸引力。
• cli-table：用于在命令行中創(chuàng)建漂亮的表格，方便展示數(shù)據(jù)。
• ora：用于在命令行中顯示加載動畫，可以提示用戶正在進行某些操作。
• inquirer：用于在命令行中創(chuàng)建交互式命令行界面，方便用戶輸入信息或進行選擇。
• boxen：用于在命令行中創(chuàng)建帶邊框的框，可以突出顯示某些信息。
• progress：用于在命令行中顯示進度條，方便展示任務(wù)的進度。
• figlet：用于在命令行中生成藝術(shù)字體，可以讓輸出更具有視覺效果。
• execa：一個更強大的子進程管理工具，它提供了更多的選項和功能，例如并發(fā)執(zhí)行、流控制、更好的錯誤處理等。它是一個跨平臺的替代方案，可以替代 Node.js 的 child_process 模塊。
• shelljs：一個 Unix shell 命令的包裝器，它允許你在 Node.js 中以類似于 Shell 腳本的方式執(zhí)行命令。它提供了簡單的接口來執(zhí)行命令、獲取輸出和處理錯誤。