むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
•
12 recomendaciones•7,193 vistas
デモの手順は、こちらにまとめましたので実際に手を動かして試す場合には参考にしてください。 http://qiita.com/civic/items/82c0184bcadc50965f91 JavaScript初心者向けの、はじめの一歩として覚えたらいいということを紹介 jQueryをscriptタグ挿入で使っているような開発者向けの内容です。npmとwebpackでビルドをするという使い方の提案です。
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Destacado (20)
Similar a むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
Similar a むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8 (20)
Último
Último (10)
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
- 3. 今日話す内容
- 5. 初心者向けの内容です
- 7. いくつチェック？ jQueryを使ったことがある Chrome Developer Toolを使ったことがある nodejs, npmを使っている ES6やAltJS系を使っている（ことがある） browserify, webpackなどのモジュールシステムを使って いる grunt, gulpなどのタスクランナーを使っている
- 14. ステップアップのツール ○ パッケージマネージャー ○ モジュールシステム ー タスクランナー ー 各種フレームワーク （今回 対象外）
- 17. パッケージマネージャー npm
- 20. demo
- 22. npmの場合 npm initで初期設定 npm installでライブラリをダウンロード node_modulesに配備 --save でpackage.jsonという設定ファイルに モジュール名とバージョンを記録
- 24. demo
- 25. <script>の問題は？ <script>タグのsrcはnode_modules? <script>タグだらけの問題は変わらない？ ライブラリの依存関係は？ 次に説明するモジュールシステムで解決！
- 28. WebPack モジュールシステムの1つ npmで入れたライブラリ（モジュール）を使う時 var $ = require("jquery"); ビルドという作業を行う → JavaScriptの依存関係解決、連結
- 29. ビルドのやり方 $ webpack (ソースjs) (出力するJS) $ webpack main.js bundle.js
- 30. demo
- 31. ね、簡単でしょ？
- 33. さらに便利に
- 34. ファイルの連結時に 圧縮したい
- 37. ビルドされたら デバッグしにくい！ デバッグするときにソースが読めないじゃん source-mapを使う 元のJSと、ビルド後のJSの行とを対応づける --devtool source-map
- 40. webpack.config.js module.exports = { entry: './main.js', output: {filename: 'bundle.js'}, devtool: 'source-map', };
- 42. ファイル編集のたびにコマ ンドを実行するのが面倒! ファイルの変更を監視 webpack --watch Webサーバーとして動作・自動リロード webpack-dev-server --inline
- 43. demo
- 46. webpack.config.js ... module: { loaders: [{ test: /.jsx?$/, exclude: /node_modules/, loader: 'babel' }] } （※babel6では babel?presets[]=es2015）
- 49. まとめ
- 51. 今日学んだこと ライブラリ 管理 ビルド コマンド npm webpack 設定ファイル package.json webpack.config.js