Google Apps Script에서 ES Module (Babel)을 사용할 때 Tips

지난 1년 정도로 Browserify + Babel , Webpack + Babel의 조합으로 ES2015를 사용한 Google Apps Script 개발을 소개하는 블로그를 살펴보게 되었습니다.

「Babel6을 사용하면 GAS를 업로드할 때에 에러가 발생하기 때문에 Babel5를 사용했습니다」라고 하는 기사도 있었기 때문에 무엇이 되지 않는지 조사해 보았습니다. 결론에서 말하면 Babel6도 사용할 수 있습니다.

Babel6의 문제

ES Module(import/export)로 작성하여 Babel6에서 변환한 경우 변환 후 스크립트를 스크립트 편집기에 복사하거나 node-google-apps-script로 업로드할 때 오류가 발생할 수 있습니다.

오류의 원인

로컬에서 ES2015에서 다음과 같이 코딩합니다.

ES2015에서 작성한 JS

export default {}

그것을 Babel6로 변환한 결과(필요한 곳만 발췌)는 다음과 같습니다.

babel6로 변환한 결과

exports.default = {};

이 변환 후의 default 라는 키워드가 문제로, GAS 업로드시의 밸리데이션에 걸려 에러가 되어 버립니다.
Babel5까지는 다음과 같이 변환되어 있었기 때문에 밸리데이션으로 에러가 되지 않고 끝났습니다.

export["default"] = {};

오류 해결 방법

default 라는 키워드가 문제이므로 Babel6 로 변환한 결과가 다음과 같이 되면 에러는 일어나지 않을 것입니다.

export["default"] = {};

정확히 말해서, Babel에는 다음과 같은 플러그인이 있으며, 이것을 사용하면 바로 export.default를 export["default"]로 바꿉니다.

transform-es3-member-expression-literals

transform-es3-property-literals

이러한 플러그인은 다음 명령으로 설치할 수 있습니다.

npm install --save-dev transform-es3-member-expression-literals transform-es3-property-literals

.babelrc 에 다음과 같이 쓰면 지금까지 대로의 커멘드로 이용할 수 있습니다.

.babelrc

{
  "presets": ["es2015"],
  "plugins": [
    "transform-es3-member-expression-literals",
    "transform-es3-property-literals"
  ]
}

babel-gas-preset 소개

여러 플러그인 설치와 .babelrc에 대한 설명이 번거롭기 때문에 이러한 플러그인을 정리 한 babel-preset-gas이라는 babel-preset을 만들었습니다.
GAS용 플러그인을 정리해 도입하는데 편리하다고 생각합니다. (정리해도 지금은 2개밖에 없습니다만 )

설치는 다음 명령으로 완료됩니다.

npm install --save-dev babel-preset-gas

.babelrc 에 다음과 같이 쓰면 위와 같이 사용할 수 있습니다. 설명이 줄어들고 조금 깨끗이 했네요.

.babelrc

{
  "presets": ["es2015", "gas"]
}

Babel을 사용하여 GAS를 개발하는 사람은 사용해보십시오.

es3ify-webpack-plugin 에서도 같은 것을 실현할 수 있을 것이다.