릴리스 0.0.1: 더 일찍 시작했어야 함

제목을 설명하기 위해 나는 사람들이 Bill Gate를 인터뷰한 포스트를 읽었는데 그는 훌륭한 IT 학생이 압력을 받고 일하는 연습을 할 수 있도록 하루 전날 마감일을 시작해야 한다고 주장했습니다. 나는 0.1 출시를 기한 전날 밤에 시작했고 내가 얼마나 녹슬었는지 인식하지 못했습니다. 여름 내내 코딩을 하지 않아 공황 상태에 빠졌고 어디서부터 시작해야 할지 전혀 몰랐습니다. 그 후, 저는 Slack에서 DukeManh와 연결할 기회가 있었고 그는 저를 많이 도와주었습니다. 당신은 그의 코드를 방문할 수 있습니다: OSD_SSG

구현:



Duke와 이야기할 때 그는 명령줄에서 인수를 구문 분석하는 데 도움이 되는 내장 기능을 지원하는 대화형 명령줄 도구를 만들 수 있는 npm 패키지인 yargs npm을 살펴보라고 제안했습니다.

const argv = yargs
  .option({
    input: {
      alias: 'i',
      describe: 'Text file to create an html file',
      type: 'string',
      demandOption: true,
      requiresArg: true,
    },
  })
  .help()
  .alias('help', 'h')
  .version()
  .alias('version', 'v').argv as {
  input: string;
  _: (string | number)[];
  $0: string;
};
const { input } = argv;


Yargs는 이미 내장된 help() 및 version() 함수로 여러분을 도와줍니다. 사용자가 html로 변환해야 하는 텍스트 파일을 입력할 수 있도록 하는 "-i"옵션을 사용자 지정하기만 하면 됩니다.

다음으로, 파일 경로를 필터링하고 주어진 파일의 내용에 대해 정적 HTML 마크업을 생성하는 데 도움이 되는 도우미 함수를 만들어야 합니다.

//Create html markup file from provided text file
const processingFile = (filePath: string): string => {
  const fileExt = path.extname(filePath).toLowerCase();
  if (fileExt !== '.txt') {
    return '';
  }

  const file = fs.readFileSync(filePath, 'utf-8');

  // title is before the first 2 blank lines of the text
  let titleAndContent = file.split(/\n\n\n/);
  let title = '';
  let content = '';

  if (titleAndContent.length >= 2) {
    [title] = titleAndContent;
    content = titleAndContent.slice(1).join('\n\n\n');
  } else {
    [content] = titleAndContent;
  }

  const head = `<meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="index.css"> 
                <title>${title || path.basename(filePath, '.txt')}</title>`;

  const body = `
                ${title ? `<h1>${title}</h1>` : ''}
                ${content
                  .split(/\r?\n\r?\n/)
                  .map((para) => `<p>${para.replace(/\r?\n/, ' ')}</p>`)
                  .join('\n')}
                  `;

  const markup = `<!DOCTYPE html>
      <html lang="en">
        <head>
          ${head}
        </head>
        <body>
          ${body}
        </body>
      </html>`;

  return markup.split(/\n\s+/).join('\n');
};


그런 다음 생성된 모든 html 페이지에 대한 하이퍼링크를 포함하는 인덱스 파일을 생성해야 합니다.

const indexMarkup = `<!DOCTYPE html>
      <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css"> 
        <title>${path.basename(input)}</title>
        </head>
        <body>
          <h1>${path.basename(input)}</h1>
          <ul>
            ${dists
              .map(
                (dist) =>
                  `<li><a href="${path.relative(outputDir, dist)}">${path.basename(
                    dist,
                    '.html'
                  )}</a></li>`
              )
              .join('\n')}
          </ul>
        </body>
      </html>`
    .split(/\n\s+/)
    .join('\n');

  fs.writeFileSync(`${outputDir}/index.html`, indexMarkup, { flag: 'w' });


옵션




옵션
설명


-나
구문 분석할 파일 제공

-시간
도움말 표시 옵션

-V
소프트웨어 버전 표시

좋은 웹페이지 즐겨찾기