Download as PDF, PPTX
![Babel導入の手順
1. $ npm install -g babel-cli
2. $ npm install --save-dev babel-preset-es2015
3. $ npm install --save-dev babel-loader babel-core
1. グローバルにBabelをインストール
2. Babel-preset-es2015のインストール
3. .babelrc（JSONファイル）をつくる
4. 必要なパッケージをnpmでインストール
5. $ webpack とコマンドを打てばOK
{
“Presets” : [“2015”]
}
.babelrc
コマンド](https://image.slidesharecdn.com/js-170507110226/75/Webpack-32-2048.jpg)
Webpackにトライ 基本編
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 8.
- 9.
- 10.
- 11.
- 12. webpackでできること ▷ JSファイルを分割して読み込める ▷ JS以外のCSSとかもモジュールとして読み込める ▷ダウンロードの最適化とかもできる ▷ Gulpとかの連携もできる らしい
- 13.
- 14.
- 15.
- 16. JSファイルの分割のメリット ▷ コードの管理がしやすくなる ▷ 再利用しやすい ▷module.exports外の変数は参照されないので「変数が置 き換わってしまっていた！」とならない ※モジュール化にはCommonJSを使う
- 17. Webpackのインストール 1. グローバルにWebpackをインストール 2. ディレクトリにpackage.jsonをつくる 3.ローカルにもnpmでWebpackをインストール 1. $ npm install -g webpack 2. $ npm init 3. $ npm install --save-dev webpack
- 18.
- 19.
- 20.
- 21.
- 22. common.js sub1.js sub1.js sub1.js メインの JSファイル モジュールの JSファイル ① ①CommonJSで読み込む var sub1 =require(“./modules/sub1.js”); var sub2 = require(“./modules/sub2.js”); sub1.hello( ); sub1.goodmorning( ); sub2( ); module.exports.hello( ) = function( ){ console.log(“hello!”); }; module.exports.goodmorning( ) = function(){ console.log(“goodmorning”); }; sub1.js common.js require(“path”) で読み込む module.exports で出力
- 23. webpack.config.js Webpack 設定ファイル 手伝うよ！ ②ブラウザが読み込める記法に変換 module exports ={ entry : “ . / common.js ”, output : { path : “ . / ”, filename : “ bundle.js ” } }; ▷ webpack.config.js に設定を記述 ▷ $ webpack で bundle.js がビルドされる ▷ $ webpack --watch だと監視してくれる
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. Babel導入の手順 1. $ npminstall -g babel-cli 2. $ npm install --save-dev babel-preset-es2015 3. $ npm install --save-dev babel-loader babel-core 1. グローバルにBabelをインストール 2. Babel-preset-es2015のインストール 3. .babelrc（JSONファイル）をつくる 4. 必要なパッケージをnpmでインストール 5. $ webpack とコマンドを打てばOK { “Presets” : [“2015”] } .babelrc コマンド
- 33.
- 34.
- 35.
- 36. Thanks! Any questions? You canfind me at: @username user@mail.me