Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

今すぐブラウザでES6を使おう

2,753 views

Published on

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

Published in: Technology

今すぐブラウザでES6を使おう

  1. 1. ブラウザで今すぐES6を使おう ∼ Babel & WebPack ∼
  2. 2. @frontainer Front-end Engineer 林 優一 株式会社LIG - CTO (フロントエンドチームリーダー) AngularJS Japan User Group フロントエンド開発・フロントエンドエンジニア育成を担当し デザイン分野からサーバーサイド分野まで幅広く対応。 AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitで スピーカーを務める。得意言語はJavaScript。 2015年6月にフロントエンドチームリーダー兼務のままCTO就任。 自社開発チームのエンジニアとしても活動。
  3. 3. LIGフリースペース
  4. 4. いいオフィス
  5. 5. LAMP
  6. 6. ES2015のブラウザ実装状況
  7. 7. ・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/
  8. 8. Babel https://babeljs.io/ npm install babel-cli -g
  9. 9. ES2015 => ES5 ES2015で記述されたJSをES5の形式に変換 10/29に6.0.0がリリース
  10. 10. サポートしている機能が多い => 71% 他のトランスパイラと比べてサポート範囲が広い Traceur 59%, Closure 30%, JSX 18%
 TypeScript + core-js 51%, es6-shim 17%
  11. 11. 一部機能はPolyfillが必要 Promiseなど変換だけでは対応しきれないものについては
 別途Polyfillが必要になる。(babel-polyfill) http://babeljs.io/docs/usage/polyfill/
  12. 12. ・Iterators ・Generators ・Map + Set + WeakMap + WeakSet ・Symbols[一部対応] ・Math + Number + String + Object APIs[一部対応] ・Promises ・Reflect API https://kangax.github.io/compat-table/es6/
  13. 13. Babel-Polyfillはそのまま使わない browser-polyfill.min.js => 56KB
 参考: jquery.min => 84KB ※ 詳しくは後ほどのbabel-runtimeで
  14. 14. WebPack https://webpack.github.io/ npm install webpack -g
  15. 15. Module Bundler require();したものなどの依存関係を解決して結合するツール
  16. 16. Browserify? require();したものを依存解決して結合するのは同じ WebPackはconfigファイル(json)で設定管理でき、
 JS以外のファイルも同じように扱うことができるのが特徴
  17. 17. Loader 読み込んだファイルに何かしらの処理をかませる ex. babel-loader, ts-loader, html-loader など
  18. 18. html-loader var example = require(‘html!./example.html’); ↓ var example = “<h1>Example HTML</h1>”;
  19. 19. webpack.config.js 設定を外部ファイルに記載して再利用が可能 module.exports  =  {          entry:  "./js/main",          output:  {                  filename:  "example.js"          },          module:  {            loaders:  [               {                 test:  /.html$/,                 loader:  'html'               }            ]          }   };
  20. 20. WebPack + Babel
  21. 21. ES2015 -> ES5 -> for Browsers ES2015のimportはBabelによってrequireに変換され
 WebPackによって依存解決されて結合されたJSになる
  22. 22. babel-loader WebPackでBabelを使う場合はbabel-loaderを利用する https://github.com/babel/babel-loader npm install babel-loader
  23. 23. 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'                }            ]          }   };
  24. 24. 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
  25. 25. ファイルサイズに注意 Promise + Runtime + Babel = 57.2KB Runtime + Babel = 27.6KB Babel = 3.83KB
  26. 26. TIPS
  27. 27. ファイルの変更を監視する webpack —watch
  28. 28. 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/')); });
  29. 29. Gruntで利用する - grunt-webpack npm i grunt-webpack grunt.loadNpmTasks(‘grunt-webpack'); webpack: { someName: { // webpack options } }
  30. 30. 環境構築が面倒な方に
  31. 31. frontplate Gulp + WebPack + Babel SASS,EJS,スプライトイメージ生成など https://github.com/frontainer/frontplate
  32. 32. ・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
  33. 33. ご静聴ありがとうございました @frontainer

×