Error: SyntaxError: Unexpected token: name (변수명)

지킬에서 위와 같은 에러를 받으면 굉장히 황당하다. 어디에 syntax error가 있다는 거지? 하며 방금 수정한 코드에 오타가 있는지 살펴보지만 어디에도 에러는 없다. 나같은 경우 Error: SyntaxError: Unexpected token: name (header) 라고 에러가 떠서 혹시나 하고 애꿎은 header.html 을 거듭 확인해봤지만 문제를 찾을 수 없었다.

해답은 구글링을 통해 꽤 쉽게 찾을 수 있었는데, 원인 제공자는 바로 EcmaScript6이었다. 지킬은 기본적으로는 ES6+ 코드를 이해하지 못한다. 나의 경우 아래와 같이 header 라는 let 변수를 선언했는데, 이것이 문제가 되었던 것이다.

let header = document.querySelector(".header");

Jekyll-Babel을 깔자

어쨌거나 이 문제를 핸들링하는 것은 굉장히 쉽다. 지킬을 위한 Babel 컨버터가 이미 만들어져 있으니 설치만 하면 되기 때문이다. 늘 그렇듯 다음과 같은 과정을 거치면 완성이다.

# Gemfile
gem 'jekyll-babel'

# terminal
bundle

# _config.yml
plugins:
	- jekyll-babel

또한 이러한 설정이 적용되려면 컴파일하려는 해당 파일 상단에 아래처럼 yml front matter를 포함시켜주어야 한다.

---
---

Ref

https://github.com/babel/jekyll-babel