[npm] 보일러 플레이트를 npx 로 설치

Ahnjh·2022년 9월 28일
0

npm

목록 보기
1/2
post-thumbnail

이글은 [Next.js] Custom Express Server 설정 (보일러 플레이트, boilerplate) 다음글이다.

개요

보일러 플레이트를 만든 이유는 매번 거의 똑같은 폴더 구조, 똑같은 패키지 들을 만드는것이 지루해서 보일러 플레이트를 만들었다.
이번 글도 비슷한데서 시작한다. 보일러 플레이트를 만들었다 한들 매번 똑같은 git clone 부터 저장소 연결을 끊고 새로 연결하는 작업을 매번 하기 싫어서 작성한다.

시작

이전글에서 만들었던 보일러 플레이트 프로젝트로 이동 후 package.json 파일과 새로운 파일 하나를 만들어야 한다

$ mkdir bin
$ cd bin
$ cat > generate-app.js

generate-app.js 파일에 내용은 아래와 같다.

#!/usr/bin/env node

const { execSync } = require('child_process');
const path = require('path');
const fs = require('fs');

if (process.argv.length < 3) {
    console.log('You have to provide a name to your app.');
    console.log('For example :');
    console.log('    npx create-my-boilerplate my-app');
    process.exit(1);
}

const projectName = process.argv[2];
const currentPath = process.cwd();
const projectPath = path.join(currentPath, projectName);
const git_repo = "https://github.com/juhwannn/next-express-boilerplate";

try {
  fs.mkdirSync(projectPath);
} catch (err) {
  if (err.code === 'EEXIST') {
    console.log(`The file ${projectName} already exist in the current directory, please give it another name.`);
  } else {
    console.log(error);
  }
  process.exit(1);
}

async function main() {
    try {
      console.log('Downloading files...');
      execSync(`git clone --depth 1 ${git_repo} ${projectPath}`);

      process.chdir(projectPath);

      console.log('Installing dependencies...');
      execSync('npm install');

      console.log('Removing useless files');
      execSync('npx rimraf ./.git');
      fs.rmdirSync(path.join(projectPath, 'bin'), { recursive: true});

      console.log('The installation is done, this is ready to use !');

    } catch (error) {
      console.log(error);
    }
}
main();

package.json 에 추가

"bin": {
    "create-next-express": "./bin/generate-app.js"
},

generate-app.js파일의 내용은 아래와 같다.

  • 필요한 패키지 선언
  • 인수가 제대로 들어왔는지 확인 ex)npx create-next-express ${FOLDER_NAME}
  • 깃허브 저장소와 경로등 필요한 변수 선언
  • 프로젝트 이름을 사용할 수 있는지 확인.
  • git clone, npm install, .git 폴더 삭제를 순차적으로 진행

NPM 에 배포

npm 에 로그인

$ npm login

로그인이 정상적으로 되었는지 확인

$ npm whoami
ahnjh

npm에 패키지 배포

npm publish

배포가 정상적으로 완료되면 아래와 같이 나오게 된다.

테스트

테스트폴더를 하나 만든 후 우리가 배포한 패키지가 정상적으로 등록이 되었고 정상적으로 작동하는지 확인해본다.

$ mkdir npxTest
$ cd npxTest
$ npm install create-next-express
$ npx create-next-express npxTest

⛔️ 주의할점
1. package.json 안에 bin 에 등록된 변수와 name이름이 같아야한다.
2. 기존에 존재하는 npm 명과 겹치면 안된다.
3. 패키지 업데이트는 npm publish 로 배포 했을때와 명령어랑 똑같은데 업데이트시 버전을 기존의 버전과 다르게 해야한다 (필자는 경우에 따라 패치 번호만 변경 예정)

참고 : Generate your web-app boilerplate like create-react-app does.

profile
Clean Code & Clean Architecture

0개의 댓글