closure compiler updates for es6
TRANSCRIPT
![Page 1: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/1.jpg)
Closure Compiler Updates for ES6
@teppeis
Meguro.es #2 2016/02/10
![Page 2: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/2.jpg)
Hello!• Teppei Sato, @teppeis
• Cybozu, Inc. / kintone
• from Nihonbashi.es
![Page 3: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/3.jpg)
http://azu.github.io/slide/2016/jser5years/sc22-ecmascript-ahodc.html
![Page 4: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/4.jpg)
Closure Compiler
It compiles from JavaScript to better JavaScript.
![Page 5: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/5.jpg)
本当のClosure Compiler
• 圧縮&最適化
• JSDocベースの静的型チェック
• ES6 Transpiler & Polyfills
• GitHubで超アクティブに進化中https://github.com/google/closure-compiler
![Page 6: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/6.jpg)
Compile ES6 to ES5
java -jar compiler.jar \ --language_in ES6 \ --language_out ES5 \ foo.js
![Page 7: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/7.jpg)
![Page 8: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/8.jpg)
![Page 9: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/9.jpg)
core-jsずるいよ!
![Page 10: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/10.jpg)
core-js とは
• Polyfillライブラリ (ES5/6/7, DOM, 独自)
• 機能検出が細やかnative実装をなるべく使ってくれる
• ES6のPolyfillとしてはほぼ完成単体でcompat-table 30%ぐらい稼ぐ
![Page 11: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/11.jpg)
![Page 12: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/12.jpg)
TypeScriptずるい
• ぜんぜん関係ないくせにcompat-tableではcore-jsでスコアを水増し
• babelはデフォルトでセットになってるからまあしょうがない気がするけど
![Page 13: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/13.jpg)
Closure Compilerにも
core-js を追加してみた(ローカルで)
![Page 14: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/14.jpg)
![Page 15: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/15.jpg)
勝った!
![Page 16: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/16.jpg)
Conclusion
• Closure Compiler の ES6トランスパイル機能は、TypeScript や Traceur より強い程度には使えるレベルにあるよ。
• でもClosure Compiler、最近ES6 polyfillを独自実装し始めたってよ。大丈夫か。。。https://github.com/google/closure-compiler/tree/master/test/com/google/javascript/jscomp/js/es6
![Page 17: Closure Compiler Updates for ES6](https://reader033.vdocuments.site/reader033/viewer/2022051520/58ef58ae1a28ab9b4f8b458d/html5/thumbnails/17.jpg)
Thanks!