motivation

사이드 프로젝트를 위한 빌드 도구로 task runner -gulp- 와 bundler -webpack- 사이에서 고민하다, 후자 못지 않게 전자도 보일러플레이트 코드 - 무한 패키지 설치와 task 세팅 - 가 필요했고, hmr 버프를 별도 설정 없이 - 어차피 기본설정만 쓰지만 - 쉬운 bundler를 선택... 그러나 mpa 방식으로 만들 생각이어서 plugin에 페이지 마다 세팅을 밀어넣었던 예전 공포가 떠올라 config가 매우 간략하고 번들링 속도가 더 빠르다는 vite를 써보기로 했다. 뭔가 굉장히 간단할 거라는 생각으로...

Start

...거짓말이었다.
bundler인 이상 vite, 이 아이도 entry point 개념이 있어서 build 옵션을 일일히 걸어줘야 했다. 그리고 include를 위해선 template engine이 필요해서 plugin에 세팅을 태워야 하는 건 같았다.

...그래도 loader 코드가 없는 게 어디냐.

...ing 1

다행히도 html 자체로 include를 쓸 수 있는 handlebars 엔진의 vite 버전이 있었다.

vite-plugin-handlebars
Thank you! alexla froscia!

샘플 코드와 vite의 mpa build 작성법을 넣어보니 2가지 issue가 있었는데,

handlebars에선 경로에 index.html을 사용하는 경우, 모두 root 페이지로 보고 앞쪽 경로를 다 잘라먹는다.

/index.html
/nested/work/index.html

이 두가지를 모두 /index.html로 판단하는 것이다. index.html을 사용해서 context - 경로 - 별로 데이터를 분리할 방법이 막혔다. 모든 서브 페이지는 [route].html로 가야 했다.

다른 issue는 build하는 entry point의 path와 페이지 설정의 path가 서로 같아야 해서 이를 변수로 만드는 작업이 필요한 것이었는데, 하다보니 redux toolkit을 사용해서 feature별로 정의하는 것과 어쩐지 비슷한 느낌이 있었다.

const page_data = [
	{
		name : "main",
		path : '/index.html',
		context_data : {
			title : "Main page"
		}
	},
	{
		name : "people",
		path : '/pages/people.html',
		context_data : {
			title : "People page"
		}
	}
];
const page_configuration = page_data.reduce((config, entry)=>{
	config[entry.path] = entry.context_data;
	return config;
}, new Object());

const page_build_option = page_data.reduce((input, entry)=>{
	input[entry.name] =  resolve(__dirname, entry.path.substring(1));
	return input;
}, new Object());

우선은 entry 기준으로 데이터를 만들고 필요한 형태로 조정했는데, 아마 다듬다 보면 createSlice라는 함수가 나오지 않을까...

오늘은 여기까지...