작고 유용한 마이크로 제너레이터 - plop

작성일   |   In   |  

screenshot

개요

plopjs는 yeoman과 같은 템플릿을 기반으로한 scaffolding generator 프레임워크 이다. plopjs는 inquirer.js를 기반으로 사용자의 입력을 처리하고, handlebar 템플릿을 이용해 파일을 생성한다.

설치

plop을 사용하기 위해서는 CLI를 설치하고, 프로젝트에 plop을 devDependencies에 추가해야 한다.

1
2
npm install -g plop
npm install --save-dev plop

그리고, 기본적인 plopfile.js 설정 파일을 프로젝트 루트 디렉토리에 생성한다.

1
2
3
4
5
6
7
8
module.exports = function (plop) {
    // create your generators here
    plop.setGenerator('basics', {
        description: 'this is a skeleton plopfile',
        prompts: [],
        actions: []
    });
};

이것이 가장 기본적인 형태의 설정파일이다. prompt는 사용자의 입력이고, action은 그에 따른 결과라고 볼 수 있다. prompt는 input, confirm, list, checkbox, rawlist, password를 지원하고 action은 단지 add와 modify만 지원한다.

사용

riot tag를 생성하는 plopfile.js 를 만들어 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = function (plop) {
     /**
      * tag generator
      */
     plop.setGenerator('tag', {
         description: 'tag generator',
         prompts: [{
              type: 'input',
              name: 'name',
              message: 'What is the name of the new tag',
              validate: function (value) {
                 if ((/.+/).test(value)) { return true; }
                 return 'name is required';
             }
         }],
         actions: [{
             type: 'add',
             path: 'src/app/components/{{dashCase name}}.tag',
             templateFile: 'templates/tag.txt'
        }]
    });
};

templates/tag.txt에 템플릿을 작성한다.

1
2
3
4
5
6
7
8
9
10
11
<{{name}}>
	<span>{{name}} tag</span>
	<script type="es6">
		// your JS code
	</script>
	{{#isStateless type}}
	<style>
		/* your styling */
	</style>
	{{/isStateless}}
</{{name}}>

이제, plop을 실행하면 아래와 같이 tag 생성자를 선택할 수 있다.

1
2
3
$ plop
 ? [PLOP] Please choose a generator. (Use arrow keys)
 > tag - tag generator

파일명은 입력한 name에 따라 “/src/app/components/“ 아래에 생성된다. 이때, 파일명 생성 규칙은 dash case 형태가 되며 “dash-case.tag”와 같은 형식이 된다. 파일명 패턴은 아래의 형식중 한가지로 지정할 수 있다.

* camelCase: changeFormatToThis
* snakeCase: change_format_to_this
* dashCase/kabobCase: change-format-to-this
* dotCase: change.format.to.this
* pathCase: change/format/to/this
* properCase/pascalCase: ChangeFormatToThis
* lowerCase: change format to this
* sentenceCase: Change format to this,
* constantCase: CHANGE_FORMAT_TO_THIS
* titleCase: Change Format To This
* pkg: package.json 파일을 참조.

mocha test spec파일이 필요하면 actions에 추가하면 된다.

1
2
3
4
5
6
7
8
9
10
11
...
 actions: [{
        type: 'add',
        path: 'src/app/components/{{dashCase name}}.tag',
        templateFile: 'templates/tag.txt'
    },{
        type: 'add',
        path: 'test/app/components/{{dashCase name}}.js',
        templateFile: 'templates/tag-test-spec.txt'
    }]
 ...

yeoman vs. plop

yeoman은 이미 알려진대로 수많은 generator를 보유하고 있다. plop과 유사하게 sub generator도 제공한다. 하지만, 초기 코드베이스를 시작하기에는 적합할지 모르나, 프로젝트가 리팩토링이 되거나 디렉토리 구조가 변경되는등의 수정사항이 발생했을때, seed project와 sub generator간의 일관성을 유지하기가 어렵다.

이에반해, plop은 프로젝트내에서 소스파일을 추가하고 관리하는데 중점을 두고 있다. plop은 초기 프로젝트 초기 구축에 사용되는 40시간보다 프로젝트기간내 매일매일의 개발시간을 단축하는것이 더 효과적이라고 믿기 때문이다.