React 어플리케이션의 보일러 보드 CLI 제작 이야기

이 글은 Mixi 그룹 Advent Calendar 2019 5일째 글입니다.
React에서는 CLIcreate-react-app가 유명합니다.
좋은 기초를 만들 수 있지만 개인적으로 패키지에 의존하는 경우가 많아서 자체 CLI를 만들어 사용하고 있습니다.

@yami-beta/create-ts-app

TypeScript를 사용하여 애플리케이션 기반의 대화형 인터페이스를 만드는 CLI 도구입니다.
https://www.npmjs.com/package/@yami-beta/create-ts-app

의외로 각종 패키지를 준비해야 하는 ESLint+Prettier의 설정이 포함되어 있으며, author와 LICENSE도 설정할 수 있습니다.
(개인용이기 때문에 자신의 취향에 따라 만든 보일러판)
지금 React의 간단한 보일러 보드밖에 없어요.

React, React Router, Redux 등을 포함하는 Single Page Application

express를 통한 서버 응용 프로그램

보일러판.

구조

이 CLI는 SAO 라는 라이브러리를 사용하여 구현됩니다.
(create-nuxt-app SAO도 사용)
다음 코드를 작성하면 대화형 인터페이스를 준비하거나 템플릿에서 파일을 복사하고 이름을 바꿀 수 있습니다.

module.exports = {
  prompts() {
    return [
      {
        name: 'name',
        message: 'What is the name of the new project',
        default: this.outFolder,
        filter: val => val.toLowerCase()
      }
    ]
  },
  actions: [
    {
      type: 'add',
      files: '**'
    },
    {
      type: "move",
      patterns: {
        "LICENSE_*": "LICENSE"
      }
    }
  ],
  async completed() {
    this.gitInit()
    await this.npmInstall()
    this.showProjectTips()
  }
}

@yami-beta/create-ts-app 중 이러한 구현.
일부분을 발췌하면 다음과 같이 명령을 실행할 때 패키지에 대답합니다.json에 기재된 의존 관계를 편집할 수도 있습니다.

const config = {
  actions() {
    const { answers } = this;
    return [
      // 略
      {
        type: "modify",
        files: "package.json",
        handler(data: any, filepath: string) {
          return {
            name: answers.name || data.name,
            version: answers.version || data.version,
            main: data.main,
            author: answers.author,
            license: answers.license || data.license,
            scripts: data.scripts,
            dependencies: {
              ...data.dependencies
            },
            devDependencies: {
              ...data.devDependencies,
              "@typescript-eslint/eslint-plugin": answers.features.includes(
                "eslint"
              )
                ? data.devDependencies["@typescript-eslint/eslint-plugin"]
                : undefined,
              "@typescript-eslint/parser": answers.features.includes("eslint")
                ? data.devDependencies["@typescript-eslint/parser"]
                : undefined,
              eslint: answers.features.includes("eslint")
                ? data.devDependencies["eslint"]
                : undefined,
              "eslint-config-prettier":
                answers.features.includes("eslint") &&
                answers.features.includes("prettier")
                  ? data.devDependencies["eslint-config-prettier"]
                  : undefined,
              "eslint-plugin-prettier":
                answers.features.includes("eslint") &&
                answers.features.includes("prettier")
                  ? data.devDependencies["eslint-plugin-prettier"]
                  : undefined,
              prettier: answers.features.includes("prettier")
                ? data.devDependencies["prettier"]
                : undefined
            }
          };
        }
      },
      // 略
    ].filter(Boolean);
  }
};

CLI 를 생성할 수 없는 경우

보일러판을 원하지만 CLI를 만들지 않는 경우도 있다.
이 경우 GitHub의 템플릿 저장소에서 보일러판을 활용하는 방법이 있습니다.

https://help.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-template-repository

https://help.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template

자세한 내용은 위 문서를 참조하십시오.

총결산

React 어플리케이션을 생성하는 보일러 보드를 만드는 CLI

템플릿에서 파일을 복사, 이름 변경, 편집할 수 있으므로 여러 보일러 보드를 생성할 수 있습니다

보일러 보드를 쉽게 제작할 때 GitHub의 템플릿 자료 라이브러리를 활용할 수 있음

비고

SAO 이 익숙한 이름egoist 선생의 창고