BabelとWebPackを使ってES6からブラウザで動く環境を作るための登壇資料。半分ライブコーディング的に動かしているので、スライドだけだと少々わかりにくいかもしれません。 ※ 後日LIGブログで記事にするかもです

1. ブラウザで今すぐES6を使おう
∼ Babel & WebPack ∼

2. @frontainer
Front-end Engineer
林 優一
株式会社LIG - CTO （フロントエンドチームリーダー)
AngularJS Japan User Group
フロントエンド開発・フロントエンドエンジニア育成を担当し
デザイン分野からサーバーサイド分野まで幅広く対応。
AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitで
スピーカーを務める。得意言語はJavaScript。
2015年6月にフロントエンドチームリーダー兼務のままCTO就任。
自社開発チームのエンジニアとしても活動。

4. LIGフリースペース

5. いいオフィス

6. LAMP

7. ES2015のブラウザ実装状況

8. ・IE10で10%。IE11で20%
・Chromeも65%程度
・Android 5.1で29%。4.4は12%。
・iOS8で21%。iOS9で54%。
・class実装済みはEdge13とWebkitのみという状況
https://kangax.github.io/compat-table/es6/

9. Babel https://babeljs.io/
npm install babel-cli -g

10. ES2015 => ES5
ES2015で記述されたJSをES5の形式に変換
10/29に6.0.0がリリース

11. サポートしている機能が多い => 71%
他のトランスパイラと比べてサポート範囲が広い
Traceur 59%, Closure 30%, JSX 18%
TypeScript + core-js 51%, es6-shim 17%

12. 一部機能はPolyfillが必要
Promiseなど変換だけでは対応しきれないものについては
別途Polyfillが必要になる。(babel-polyfill) http://babeljs.io/docs/usage/polyfill/

13. ・Iterators
・Generators
・Map + Set + WeakMap + WeakSet
・Symbols[一部対応]
・Math + Number + String + Object APIs[一部対応]
・Promises
・Reflect API
https://kangax.github.io/compat-table/es6/

14. Babel-Polyfillはそのまま使わない
browser-polyfill.min.js => 56KB
参考: jquery.min => 84KB
※ 詳しくは後ほどのbabel-runtimeで

15. WebPack https://webpack.github.io/
npm install webpack -g

16. Module Bundler
require();したものなどの依存関係を解決して結合するツール

17. Browserify?
require();したものを依存解決して結合するのは同じ
WebPackはconfigファイル（json）で設定管理でき、
JS以外のファイルも同じように扱うことができるのが特徴

18. Loader
読み込んだファイルに何かしらの処理をかませる
ex. babel-loader, ts-loader, html-loader など

19. html-loader
var example = require(‘html!./example.html’);
↓
var example = “<h1>Example HTML</h1>”;

20. webpack.config.js
設定を外部ファイルに記載して再利用が可能
module.exports = {
entry: "./js/main",
output: {
filename: "example.js"
},
module: {
loaders: [
{
test: /.html$/,
loader: 'html'
}
]
}
};

21. WebPack + Babel

22. ES2015 -> ES5 -> for Browsers
ES2015のimportはBabelによってrequireに変換され
WebPackによって依存解決されて結合されたJSになる

23. babel-loader
WebPackでBabelを使う場合はbabel-loaderを利用する
https://github.com/babel/babel-loader
npm install babel-loader

24. webpack.config.js
loadersにbabel-loaderを追加する
module.exports = {
entry: "./js/main",
output: {
filename: "example.js"
},
module: {
loaders: [
{
test: /.html$/,
loader: 'html'
},
{
test: /.js$/,
loader: 'babel'
}
]
}
};

25. babel-runtime
babel?optional[]=runtime
module.exports = {
entry: "./js/main",
output: {
filename: "example.js"
},
module: {
loaders: [
{
test: /.html$/,
loader: 'html'
},
{
test: /.js$/,
loader: 'babel?optional[]=runtime'
}
]
}
};
npm install babel-runtime

26. ファイルサイズに注意
Promise + Runtime + Babel = 57.2KB
Runtime + Babel = 27.6KB
Babel = 3.83KB

27. TIPS

28. ファイルの変更を監視する
webpack —watch

29. Gulpで利用する - webpack-stream
npm i webpack-stream
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('src/entry.js')
.pipe(webpack())
.pipe(gulp.dest('dist/'));
});

30. Gruntで利用する - grunt-webpack
npm i grunt-webpack
grunt.loadNpmTasks(‘grunt-webpack');
webpack: {
someName: {
// webpack options
}
}

31. 環境構築が面倒な方に

32. frontplate
Gulp + WebPack + Babel
SASS,EJS,スプライトイメージ生成など
https://github.com/frontainer/frontplate

33. ・Babel
・WebPack
・html-loader
・babel-loader
・webpack-stream
・grunt-webpack
・frontolate
https://webpack.github.io/
https://babeljs.io/
https://github.com/webpack/html-loader
https://github.com/babel/babel-loader
https://github.com/shama/webpack-stream
https://github.com/webpack/grunt-webpack
https://github.com/frontainer/frontplate

34. ご静聴ありがとうございました
@frontainer