今すぐブラウザで贰厂6を使おう
6 likes4,078 views
BabelとWebPackを使ってES6からブラウザで動く環境を作るための登壇資料。半分ライブコーディング的に動かしているので、スライドだけだと少々わかりにくいかもしれません。 ※ 後日LIGブログで記事にするかもです
![?Iterators
?Generators
?Map + Set + WeakMap + WeakSet
?Symbols[一部対応]
?Math + Number + String + Object APIs[一部対応]
?Promises
?Re?ect API
https://kangax.github.io/compat-table/es6/](https://image.slidesharecdn.com/babel-webpack-151031085548-lva1-app6891/85/ES6-13-320.jpg)
![webpack.con?g.js
設定を外部ファイルに記載して再利用が可能
module.exports ?= ?{ ?
? ? ? ?entry: ?"./js/main", ?
? ? ? ?output: ?{ ?
? ? ? ? ? ? ? ?filename: ?"example.js" ?
? ? ? ?}, ?
? ? ? ?module: ?{ ?
? ? ? ? ?loaders: ?[ ?
? ? ? ? ? ? { ?
? ? ? ? ? ? ? test: ?/.html$/, ?
? ? ? ? ? ? ? loader: ?'html' ?
? ? ? ? ? ? } ?
? ? ? ? ?] ?
? ? ? ?} ?
};](https://image.slidesharecdn.com/babel-webpack-151031085548-lva1-app6891/85/ES6-20-320.jpg)
![webpack.con?g.js
loadersにbabel-loaderを追加する
module.exports ?= ?{ ?
? ? ? ?entry: ?"./js/main", ?
? ? ? ?output: ?{ ?
? ? ? ? ? ? ? ?filename: ?"example.js" ?
? ? ? ?}, ?
? ? ? ?module: ?{ ?
? ? ? ? ?loaders: ?[ ?
? ? ? ? ? ? { ?
? ? ? ? ? ? ? test: ?/.html$/, ?
? ? ? ? ? ? ? loader: ?'html' ?
? ? ? ? ? ? }, ?
? ? ? ? ? ? ?{ ?
? ? ? ? ? ? ? ? ? ?test: ?/.js$/, ?
? ? ? ? ? ? ? ? ? ?loader: ?'babel' ?
? ? ? ? ? ? ?} ?
? ? ? ? ?] ?
? ? ? ?} ?
};](https://image.slidesharecdn.com/babel-webpack-151031085548-lva1-app6891/85/ES6-24-320.jpg)
![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](https://image.slidesharecdn.com/babel-webpack-151031085548-lva1-app6891/85/ES6-25-320.jpg)
今すぐブラウザで贰厂6を使おう
- 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. 尝滨骋フリースペース
- 5. いいオフィス
- 6. LAMP
- 9. Babel https://babeljs.io/ npm install babel-cli -g
- 11. サポートしている機能が多い => 71% 他のトランスパイラと比べてサポート範囲が広い Traceur 59%, Closure 30%, JSX 18%? TypeScript + core-js 51%, es6-shim 17%
- 13. ?Iterators ?Generators ?Map + Set + WeakMap + WeakSet ?Symbols[一部対応] ?Math + Number + String + Object APIs[一部対応] ?Promises ?Re?ect API https://kangax.github.io/compat-table/es6/
- 14. Babel-Poly?llはそのまま使わない browser-poly?ll.min.js => 56KB? 参考: jquery.min => 84KB ※ 詳しくは後ほどのbabel-runtimeで
- 15. WebPack https://webpack.github.io/ npm install webpack -g
- 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.con?g.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になる
- 24. webpack.con?g.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
- 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