私のSSGのリファクタリング

1 . Lab 5要件
my-ssgは、過去数週間に多くの新機能で更新され、これらの機能は別の貢献者によって書かれた、私のSSGのソースコードは避けられないほどのロジック、矛盾する命名規則などが含まれます.
この研究室では、既存のコードをリファクタにし、構造と保守性を向上させる必要があります.また、これは我々が今週学んだgit rebaseを使用するための良い練習です.
私が私のSSGに適用した若干の修正は、ここにあります:


リファクタリング処理
まず最初に、私はオプション宣言と入力パス合法化が置かれるindex.jsファイルを見始めました.このファイルは少し遅れていたので、checkInput()とtrackDistFolder()を新たにモジュール化することにしました.
第二に、私はグローバル変数を使用する必要はありませんし、いくつかの変数名とファイル名は本当に良いことではないことに気づいた.結果として、私はグローバル変数をスコープ変数に変更し、より意味のある名前を得るためにいくつかの変数/ファイル名に名前を変更しました.
リファクタリングの過程でエラーが発生しました.したがって、エラーがあるときはいつでも、ログメッセージを表示し、この状況を解決するために、非ゼロ終了コードでreturnステートメントを使用します.

 try {
    await fsPromise.mkdir("./dist");
    console.log(chalk.bold.green("--- dist folder is created successfully! ---"));
  } catch (err) {
    console.log(chalk.bold.red("***Cannot create dist folder!***"));
    return process.exit(-1);
  }

次に、前述のように、ソースコードには論理反復を含まないことは避けられない.驚いたことに、私はここでいくつかを見つけることができました

論理を繰り返し、変数名をクリアしません.

const sortedFile = files.filter((file) => path.extname(`${inputPath}/${file}`) === ".txt");

sortedFile.forEach((file) => { 
const fileName = fileModule.readFile(`${inputPath}/${file}`, cssLink, language, outputContainer);
const url = `./${encodeURI(fileName)}.html`;
body += `<a href=\"${url}\">${fileName}</a>\n`;
});

const sortedMDFile = files.filter((file) => path.extname(`${inputPath}/${file}`) === ".md");

sortedMDFile.forEach((file) => {
const fileName = fileModule.readFile(`${inputPath}/${file}`, cssLink, language, outputContainer);
const url = `./${encodeURI(fileName)}.html`;
body += `<a href=\"${url}\">${fileName}</a>\n`;
});

---解決方法:
()-- getbodyhtml ()を作成する

function getBodyHTML(path, stylesheet, language, outputContainer, fileExtension){
  let fileName = fileExtension == ".txt" 
                 ? readFile(path, stylesheet, language, outputContainer) 
                 : readMDFile(path, stylesheet, language, outputContainer) ;
  let url = `./${encodeURI(fileName)}.html`;
  return `<a href=\"${url}\">${fileName}</a><br>\n`;
}

----変数名の変更

const textFile = files.filter((file) => path.extname(`${pathToFile}/${file}`) === ".txt");
textFile.forEach((file) => {
      body += getBodyHTML(`${pathToFile}/${file}`, stylesheet, language, outputContainer, ".txt");
    });

 const mdFile = files.filter((file) => path.extname(`${pathToFile}/${file}`) === ".md");
    mdFile.forEach((file) => {
     body += getBodyHTML(`${pathToFile}/${file}`, stylesheet, language, outputContainer, ".md");
    });

私はちょうどCheckInputモジュールを作成しているので、私は以前のように.jsonで同じチェックロジックをコピーする代わりにindex.jsファイルを読み終えた後にそれを使用することができます

const fs = require("fs");
const check = require("./checkInput");

module.exports.readJson = (pathToFile) => {
  fs.readFile(pathToFile, "utf8", (err, json) => {
    if (err) {
      console.log(chalk.bold.red("***Cannot read the file!***"));
      return process.exit(-1);
    }
    const data = JSON.parse(json);

    const stylesheet = data.stylesheet || "https://cdn.jsdelivr.net/npm/water.css@2/out/water.css";
    const language = data.lang || "en-CA";

    check.checkInput(data.input, stylesheet, language, true);
  });
};

結局、私の最終的なコミットは92e007です

再利用
全体的に、git rebase -iは非常に役立つコマンドです.それは私が単一の1つに複数のコミットをスカッシュするのに役立った.一方、git commit --amendは私がコミットメッセージを加えるか、修正するのを許しました.