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

@frontainerFront-end Engineer

林　優一

株式会社LIG - CTO （フロントエンドチームリーダー)

AngularJS Japan User Group

フロントエンド開発・フロントエンドエンジニア育成を担当し デザイン分野からサーバーサイド分野まで幅広く対応。 AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitでスピーカーを務める。得意言語はJavaScript。

2015年6月にフロントエンドチームリーダー兼務のままCTO就任。 自社開発チームのエンジニアとしても活動。

LIGフリースペース

いいオフィス

LAMP

ES2015のブラウザ実装状況

・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 => ES5ES2015で記述されたJSをES5の形式に変換

10/29に6.0.0がリリース

サポートしている機能が多い => 71%他のトランスパイラと比べてサポート範囲が広い

Traceur 59%, Closure 30% , JSX 18%TypeScript + core-js 51%, es6-shim 17%

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

・Iterators

・Generators

・Map + Set + WeakMap + WeakSet

・Symbols[一部対応]

・Math + Number + String + Object APIs[一部対応]

・Promises

・Reflect API

https://kangax.github.io/compat-table/es6/

Babel-Polyfillはそのまま使わないbrowser-polyfill.min.js => 56KB 参考: jquery.min => 84KB

※ 詳しくは後ほどのbabel-runtimeで

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

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

Browserify?require();したものを依存解決して結合するのは同じ

WebPackはconfigファイル（json）で設定管理でき、JS以外のファイルも同じように扱うことができるのが特徴

Loader読み込んだファイルに何かしらの処理をかませる

ex. babel-loader, ts-loader, html-loader など

html-loadervar example = require(‘html!./example.html’);

↓

var example = “<h1>Example HTML</h1>”;

webpack.config.js設定を外部ファイルに記載して再利用が可能

module.exports  =  {  

       entry:  "./js/main",  

       output:  {  

               filename:  "example.js"  

       },  

       module:  {  

         loaders:  [  

            {  

              test:  /\.html$/,  

              loader:  'html'  

            }  

         ]  

       }  

};

WebPack + Babel

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

babel-loaderWebPackでBabelを使う場合はbabel-loaderを利用する

https://github.com/babel/babel-loader

npm install babel-loader

webpack.config.jsloadersにbabel-loaderを追加する

module.exports  =  {  

       entry:  "./js/main",  

       output:  {  

               filename:  "example.js"  

       },  

       module:  {  

         loaders:  [  

            {  

              test:  /\.html$/,  

              loader:  'html'  

            },  

             {  

                   test:  /\.js$/,  

                   loader:  'babel'  

             }  

         ]  

       }  

};

babel-runtimebabel?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

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

Runtime + Babel = 27.6KB

Babel = 3.83KB

TIPS

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

Gulpで利用する - webpack-streamnpm 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-webpacknpm i grunt-webpack

grunt.loadNpmTasks(‘grunt-webpack'); webpack: { someName: { // webpack options } }

環境構築が面倒な方に

frontplateGulp + 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