Titanium Alloy에서 ES6를 사용할 수 있게 해주는 3가지 방법


(InGrowth) #1

1. Alloy 1.10.0 + Titanium SDK 6.1.0.GA

Alloy 1.10.0 이상 버전에서는 babel 트랜스코딩이 포함되어 있네요.

Titanium SDK 6.1.0.GA 이상이 필요하구요.

http://docs.appcelerator.com/platform/latest/#!/guide/ES6_in_Titanium_SDK_6.1.0

이 문서에서 처럼 ios는 tiapp.xml에 jscore를 사용하는 지정을 해주어야 합니다.

<ti:app>
    <ios>
        <use-jscore-framework>true</use-jscore-framework>
    </ios>
</ti:app>

장점은 가장 진보된 방법이고, 디바이스가 지원하는 ES6를 사용하기 때문에 깔끔합니다.
단점은 iOS8~9는 버려야 합니다. ES6 지원율이 낮아서 쓰기 어렵습니다.


2. Grunt를 활용한 JAST Stack을 이용

2년전에 dbankier가 공개한 JAST Stack을 이용하면 babel의 ES6>ES5 트랜스코딩과 tishadow를 조합해서 사용할 수 있습니다.

grunt를 이용하는데 제법 편리합니다. 제가 최근에 사용하려고 업데이트 했어요.

덤으로 이녀석은 STSS도 지원하는군요. STSS도 좋은데요.

장점은 ES6를 ES5로 트랜스코딩하기 때문에 iOS8 부터 모두 사용가능하고 호환성이 좋습니다.
단점은 Grunt를 약간 학습해야 더 잘 쓸 수 있다는 것과, 두번 컴파일 되기에 아주 약간의 시간을 더 사용합니다.


3. Alloy.babel이라는 hook을 이용

Alloy 1.10.0 미만 버전에서는 최근에 등장한 alloy.babel 플러그인이 있어요.

Alloy가 hook하기 전에 먼저 babel로 트랜스코딩을 해주는 녀석입니다.

Alloy 1.10.0, Ti SDK 6.1.0.GA 미만 버전에서도 쓸 수 있구요.

이녀석도 STSS도 지원하는군요.

장점은 JAST와 같이 호환성이 좋습니다.
단점은 tishadow를 사용할 수 없어서 liveview를 써야 합니다.


위에서 서술한것처럼 Titanium SDK 6.1.0+에서는 트랜스코딩 없이 네이티브적으로 ES6를 지원하긴 합니다.
하지만 아직은 하위호환 등의 문제로 인해서 사용하기가 꺼려졌거든요.
위의 2,3번 플러그인은 babel을 사용해서 ES5로 바꿔주기 때문에 좀더 범용적으로 사용할 수 있을것 같습니다.

저는 일단 2번의 JAST를 사용하고 있습니다. Gruntfile.js만 수정하면 원하는 Babel Preset도 추가할 수 있고 좋습니다.
주의할점은 2,3번의 방법은 Promise와 같이 polyfill이 필요한 기능은 사용하시면 안됩니다.
Promise는 Q.js를 사용하세요. new Promise 대신에 Q.Promise를 사용하면 코드는 똑같습니다.