업데이트:

알다시피 Jekyll은 Javascript ES6 문법을 읽지 못한다. 때문에 ES6을 읽을 수 있게 처리를 해줘야 하는데, jekyll-babel 등의 플러그인으로 해결하려 했었다. 대단히 길고 길었던 삽질의 여정을 하고 있었다는 것을 알지 못한채…

문제 발생 과정

jekyll-babel의 사용설명서를 읽고 그대로 따라한 과정을 기록한다.

  1. Gemfile에 gem ‘jekyll-babel’ 코드를 추가하였다.
  2. 내 블로그(여기말고 현재 제작 중인 테마) 루트경로에서 $ bundle 명령어를 실행하였다.
  3. config.yml 파일의 plugins(gems) 라인에 jekyll-babel을 추가하였다.
  4. 컴파일하려고 하는 Javascript 파일의 최상단에 YAML front-matter를 추가 후 빌드를 시도하였는데, front-matter를 인식하지 못하는 에러가 뜨며 컴파일이 되지 않는다.

왜 안됐던 걸까? 해답은 의외의 곳에 있었다. 등잔 밑이 어둡다더니…

해답

일단 jekyll-babel 플러그인은 Github pages에서 사용할 수 없다. Github pages Dependency에 포함되어 있지 않기 때문… 그냥 처음부터 Netlify 같은 걸 썼어야 했다..

그렇다면 왜 안되는가?
사용 중인 uglifyJS라는 Javascript 소스 압축 도구가 ES6를 지원하지 않으므로 별 짓을 해보아도 안됐던 것임. 따라서 다른 툴을 사용해야 하는데, 검색을 해보니 terser 라는 좋은 녀석을 발견, babel(webpack)과 함께 설치 후 테스트 결과 정상적으로 컴파일이 되었다.

1
2
3
4
5

"scripts": {
    "uglify": "terser js/_plugins/_jquery-3.5.0.min.js js/_function.js js/_js.js -c -m -o js/js.min.js",
    "watch:js": "onchange \"js/**/*.js\" -e \"js/js.min.js\" -- npm run build:js",
    "build:js": "npm run uglify"
}

설치 후 package.json 파일의 해당 부분에서 uglifyjs를 지우고 terser로 바꿔주면 세팅 완료. 근데 모종의 이유로 다시 ES5 환경으로 되돌림… 나중에 다시 해봐야지~

참고 글

Hero image from Alltechbuzz