狠狠撸

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

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

今すぐブラウザで贰厂6を使おう

尝滨骋フリースペース

贰厂2015のブラウザ実装状况

?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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

webpack.con?g.js
loadersにbabel-loaderを追加する
? ? ? ?entry: ?"./js/main", ?
? ? ? ?output: ?{ ?
? ? ? ?}, ?
? ? ? ?module: ?{ ?
? ? ? ? ?loaders: ?[ ?
? ? ? ? ? ? { ?
? ? ? ? ? ? ? test: ?/.html$/, ?
? ? ? ? ? ? ? loader: ?'html' ?
? ? ? ? ? ? }, ?
? ? ? ? ? ? ?{ ?
? ? ? ? ? ? ? ? ? ?test: ?/.js$/, ?
? ? ? ? ? ? ? ? ? ?loader: ?'babel' ?
? ? ? ? ? ? ?} ?
? ? ? ? ?] ?
? ? ? ?} ?
};

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

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

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

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/'));
});

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

环境构筑が面倒な方に

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

?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

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

狠狠撸

今すぐブラウザで贰厂6を使おう

More Related Content

今すぐブラウザで贰厂6を使おう