WebLog

TypeScriptでmarkdownからHTMLを生成するCLIツールを作る

2023/02/05 20:54

はじめに

最近以下の本を読みました。

実践Node.js入門 | 伊藤 康太 |本 | 通販 | Amazon

実践Node.js入門 | 伊藤 康太 |本 | 通販 | Amazon

Amazonで伊藤 康太の実践Node.js入門。アマゾンならポイント還元本が多数。伊藤 康太作品ほか、お急ぎ便対象商品は当日お届けも可能。また実践Node.js入門もアマゾン配送商品なら通常配送無料。

この本の中で、Node.js で md ファイルを HTML に変換する CLI ツールを作るパートがあったので、今回はそれを TypeScript で書いてみようと思います。

準備

1mkdir cli_test
2cd cli_test
3npm init -y
4npm i yargs @types/yargs marked @types/marked ts-node @types/node
5npx tsc --init
1...
2 "baseUrl": "./" // baseUrlだけ設定しておく(エラーで怒られるので)
3...

中身

1import { readMarkdownFileSync, writeHtmlFileSync } from "./lib/file";
2import { hideBin } from "yargs/helpers";
3import yargs from "yargs";
4import { getPackageName } from "./lib/name";
5import path from "path";
6import { marked } from "marked";
7
8const args = yargs(hideBin(process.argv))
9 .options({
10 name: {
11 type: "boolean",
12 default: false,
13 alias: "n",
14 describe: "CLI名を表示",
15 },
16 file: { type: "string", alias: "f", describe: "Markdownファイルのパス" },
17 out: {
18 type: "string",
19 default: "article.html",
20 alias: "o",
21 describe: "出力するhtmlファイルのファイル名",
22 },
23 })
24 .parseSync();
25
26// nameオプションが指定されていれば、パッケージの名前を出力する
27if (args.name) {
28 const packageName = getPackageName();
29 console.log(packageName);
30 process.exit(0);
31}
32
33// fileオプションが指定されていれば、mdファイルを読み込み、htmlファイルを指定のpathに出力する
34if (args.file) {
35 const markdownStr = readMarkdownFileSync(path.resolve(__dirname, args.file));
36 const html = marked(markdownStr);
37
38 writeHtmlFileSync(path.resolve(__dirname, args.out), html);
39}
1import path from "path";
2import fs from "fs";
3
4export const getPackageName = (): string => {
5 const packageStr = fs.readFileSync(
6 path.resolve(__dirname, "../package.json"),
7 {
8 encoding: "utf-8",
9 }
10 );
11 const parsedPackage = JSON.parse(packageStr);
12
13 return parsedPackage.name;
14};
1import fs from "fs";
2
3export const readMarkdownFileSync = (path: string): string => {
4 const markdownStr = fs.readFileSync(path, { encoding: "utf-8" });
5
6 return markdownStr;
7};
8
9export const writeHtmlFileSync = (path: string, html: string): void => {
10 fs.writeFileSync(path, html, { encoding: "utf-8" });
11};

使ってみる

md ファイルを用意

1# タイトル
2
3hello!
4
5**テスト**
6
7```javascript
8const foo = "bar";
9```

name オプションの指定

1npx ts-node index.ts -n # --nameでもOK

file オプションの指定

1npx ts-node index.ts -f article.md

参考

GitHub - yargs/yargs: yargs the modern, pirate-themed successor to optimist.
GitHub - yargs/yargs: yargs the modern, pirate-themed successor to optimist.

GitHub - yargs/yargs: yargs the modern, pirate-themed successor to optimist.

yargs the modern, pirate-themed successor to optimist. - GitHub - yargs/yargs: yargs the modern, pirate-themed successor to optimist.

最新の投稿