Nuxt에서 nuxt.config.js에 있는 modules, buildModules, plugins에 대해 알아보자.

개요

nuxt에서 vee-validate를 사용하는데 이하의 코드를 추가안해서 에러가 발생했다.

build: {
  transpile: ['vee-validate/dist/rules'],
},

빌드할 때 발생한 에러인데 webpack의 빌드옵션으로써 추가 설정이 들어가야 했었던 것이다.

webpack 추가설정을 build property에서 이루어지는걸 보고 문득 buildModules와 modules의 차이는 뭐지? 라는 의식의 흐름이 생겨서 하는김에 plugins와 modules의 차이도 알아보려고 한다!

 

Modules 란?

모듈은 Nuxt의 핵심기능을 확장하고 Nuxt 부팅되는 동안 차례로 호출되는 함수이다.

주목해야 할 부분이 있는데 Nuxt가 처리(빌드)하는 동안 각 모듈은 처리를 완료 할 때까지 기다린다. 말이 좀 어려울 수 있는데 이 말인 즉슨 modules들은 Nuxt가 빌드되는 동안 발생하는 거의 대부분의 이벤트들을 트리거로써 활용이 가능하다는 말이다. 이 방법 덕분에 모듈은 Nuxt의 거의 모든 요소들을 사용자 정의를 할 수 있게 되는 것이다. (Webpack의 Tapable 을 기반으로 했다고 한다.)

 

 

Nuxt 모듈 디자인 덕분에 모듈은 빌드 초기화와 같은 특정 엔트리 포인트에 hook을 쉽게 등록 할 수 있으며 모듈은 템플릿 덮어쓰기, webpack 로더 설정, CSS 라이브러리 추가, 플러그인 추가 작업등을 수행할 수 있다.

모듈이 실행되어지는 타이밍

Webpack의 Tapable이란?

왓 더 훅? Tapable에 대하여 알아보자

 

Modules 와 Plugins의 차이

그럼 plugins와 무슨 차이가 있나? 라고 물으면 모듈이 훨씬 광범위하고 유연하다.

그리고 위의 글에서 알 수 있듯이 모듈이 플러그인 보다 빠르게 실행되며 Nuxt는 처음에 모듈을 로드하여 실행하고 Vue 인스턴스($root)와 Nuxt 컨텍스트(context)를 작성한 후 Nuxt 플러그인을 실행한다.

plugins	$root나 context에 인스턴스를 담아서 전역적으로 기능을 제공하는게 가능하다.
modules	빌드 옵션을 바꾸고 싶다거나 설정에 의해 동적인 기능을 가진 플러그인을 제공하는게 가능하다.

Modules 와 buildModules의 차이

이건 아주 간단하다.

배포파일에 필요한 친구이면 Modules에 필요없는 친구이면 buildModules에 넣는다.

 

modules을 만들고 싶을땐 이하의 공식 문서를 참조하자(다양한 훅들, 활용할 수 있는 nuxt 인스턴스등등 적혀있다.)

https://nuxtjs.org/ja/docs/directory-structure/modules

モジュールディレクトリ

 

 

그외 참고한 기사

https://nuxt.com/docs/api/advanced/hooks#nuxt-hooks-build-time

Lifecycle Hooks · Nuxt API

https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time

Lifecycle Hooks · Nuxt Advanced