플러그인과 프리셋 (Plugins and Presets)

 

Plugins

---

Vue CLI는 플러그인 기반 아키텍처를 사용합니다. 새로 생성된 프로젝트의 package.json 파일을 살펴보면, @vue/cli-plugin- 으로 시작하는 디펜던시를 찾을 수 있을 것입니다. 플러그인은 내부 웹팩 설정을 수정할 수 있고  vue-cli-service  에 명령을 추가할 수 있습니다.

 

플러그인 기반의 아키텍처는 Vue CLI를 더 유연하고 확장성 있게 해줍니다. 직접 플러그인을 개발할 수도 있으니 관심있는 분들은 Plugin Development Guide 참고하세요.

 

 

 

기존 프로젝트에 플러그인 설치하기

---

각각의 CLI 플러그인에는 generator와 runtime plugin으로 구성됩니다. generator는 파일을 생성하는 역할을 하고 runtime plugin은 코어 웹팩 설정을 변경해서 명령어를 추가합니다. 우리가  vue create  를 사용해서 프로젝트를 생성할 때 어떤 플러그인을 추가할지 선택하면 그 플러그인들은 미리 설치됩니다. 하지만 프로젝트 생성 후에도 플러그인을 추가할 수 있습니다.  이때 사용하는 명령어가  vue add  입니다.

 

TIP

 vue add  는 Vue CLI 플러그인을 설치하기 위한 명령이입니다. npm 명령어를 대체할 수 없죠. Vue CLI 플러그인 설치할 때만 사용할 수 있다는 점 기억해주세요 :)  

그리고  vue add  명령어를 사용하기 전에 코드를 커밋하거나 백업해 놓는 것을 추천합니다. 플러그인의 파일 generator가 기존 파일을 바꿀 가능성이 있기 때문입니다.

 

vue add eslint

// 이전 버전에서는 아래처럼 사용했지만 현재 @vue/cli-service-global@4.1.2에서는 오류 발생
vue add cli-plugin-eslint

원래 전체 패키지 이름은 @vue/cli-plugin-eslint  이지만 위 명령어만으로 npm으로부터 해당 플러그인이 설치됩니다. (플러그인의 generator를 호출)

 

 @vue  접두사를 붙이지 않으면 위 명령어는 unscoped package를 대신 설치합니다. (참고로 npm에는 scoped package 개념이 있는데, scope은 그룹을 의미합니다. 예를 들어 @vue/cli-plugin-eslint 패키지는 @vue 라는 이름을 가진 scope안에 포함된 패키지입니다.) 예를 들어 3rd 파티 플러그인인 vue-cli-plugin-apollo  를 설치하려면 아래 명령어를 실행하면 됩니다.

 

vue add apollo

 

apollo만 입력했지만 앞에  vue-cli-plugin-  을 붙인 이름을 가지는 npm 패키지를 찾습니다.

 

만약에 특정 scope에 속하는 3rd party 플러그인을 설치하려면, 

vue add @foo/bar

위와 같이 수행한다. 그러면  @foo/vue-cli-plugin-bar  가 설치됩니다.

 

TIP

여러가지 이유로 플러그인 리스트가 프로젝트 루트 경로의 package.json에 없고 다른 경로에 있는 경우 vuePlugins.resolveFrom 옵션 설정으로 해당 경로를 설정할 수 있다. 

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}

만약 .config/package.json 파일이라면 위와 같이 설정하면 됩니다.

 

 

프로젝트 local 플러그인

---

만약에 프로젝트 안에서 플러그인 API에 접근할 필요가 있지만 그것 때문에 플러그인 전체를 설치하고 싶지 않을 때 package.json의 vuePlugins.service 옵션을 사용할 수 있습니다.

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}

각각의 파일은 플러그인 API를 첫번째 인수로 사용하는 함수를 내보내야 합니다. 플러그인 API와 관련되어서 더 공부하실 분들은 Plugin Development Guide 여기를 참조하세요. 

 

UI 플러그인들처럼 동작하는 파일들도 vuePlugins.ui 옵션에 추가할 수 있습니다. 

{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}

 UI Plugin API를 참조하세요.

 

 

 

Presets

---

Vue CLI 프리셋이란 미리 정의된 옵션과 플러그인을 포함하는 JSON 객체입니다. vue create로 프로젝트를 생성할 때마다 프롬프트 창으로 옵션과 플러그인 설정을 하는데 매번 할 필요 없이 프리셋으로 만들어 놓고 재사용하면 됩니다 :)

 

프리셋 데이터를 보고 플러그인 generator가 프로젝트 파일들을 생성합니다. 통합된 도구를 위한 부가적인 설정도 추가해서 사용할 수 있습니다. 

 

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

 

부가적인 설정들은 package.json에 합쳐지거나 일치하는 설정 파일에 합쳐집니다. 예를 들어 "userConfigFiles": true 이면 configs.vue 내용들은 vue.config.js에 합쳐집니다.

Preset Plugin Versioning

---

프리셋의 플러그인 옵션에 추가된 플러그인의 특정 버전을 지정할 수 있습니다. 지정하지 않으면 공식적인 플러그인의경우 CLI가 자동으로 최신 버전을 사용합지만 3rd 파티 플러그인들은 버전을 명시하는 것을 추천합니다.

 

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... other options for this plugin
    }
  }
}

 

Allowing Plugin Prompts

---

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // let the users pick their own ESLint config
      "prompts": true
    }
  }
}

프리셋을 이용해서 프로젝트 생성 시 프롬프트를 통해서 별도 설정하는 프로세스가 생략되는데 그 과정을 생략하고 싶지 않을 때 사용하는 옵션입니다.

 

Remote Presets

---

git 저장소에 프리셋을 퍼블리시하고 다른 개발자들이랑 공유할 수 있습니다. 저장소는 다음 파일들을 포함할 수 있습니다.

• preset.json : (필수) 프리셋 데이터를 가진 파일
• generator.js : Generator가 프로젝트 파일들을 주입하거나 수정합니다.
• prompts.js : prompts 파일은 generator를 위한 설정들을 가지고 있습니다.

git 저장소에 저장된 프리셋은 다음 명령어로 사용할 수 있습니다.

vue create --preset username/repo my-project

 

GitLab과 BitBucket도 지원합니다. private 저장소에서 fetching 하는 경우 --clone 옵션을 잊지 마세요. 

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

# self-hosted repos
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://git@my-gitlab-server.com/group/projectname.git --clone my-project

 

Local Filesystem Preset

---

remote 프리셋을 푸시하기 전에 테스트가 용이하도록 컴퓨터의 로컬 파일시스템에 프리셋을 우선 저장해서 사용합니다. Vue CLI는 --preset 옵션이 상대 경로 또는 절대 경로거나 .json으로 끝나면 local preset을 로드합니다.

 

# ./my-preset should be a directory containing preset.json
vue create --preset ./my-preset my-project

# or directly use a json file in cwd:
vue create --preset my-preset.json my-project