front-end with node · 2014/11/15tokyonodefest2014 @ahomu front-end with node.js for beginners ←...
TRANSCRIPT
![Page 1: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/1.jpg)
Front-end with Node.js for Beginners
2014/11/15����������� ������������������ Tokyo����������� ������������������ Node����������� ������������������ Fest����������� ������������������ 2014����������� ������������������ @ahomu
![Page 2: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/2.jpg)
2014/11/15����������� ������������������ Tokyo����������� ������������������ Node����������� ������������������ Fest����������� ������������������ 2014����������� ������������������ @ahomu
Front-end with Node.js for Beginners ← 重要!!
![Page 3: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/3.jpg)
佐藤 歩さとう あゆむ
![Page 4: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/4.jpg)
本名
ahomu@
![Page 5: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/5.jpg)
http://aho.mu年間維持費 ¥8,480
![Page 6: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/6.jpg)
![Page 7: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/7.jpg)
Front-end Tooling かつてのフロントエンド開発
![Page 8: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/8.jpg)
良い仕事は全て単純な作業の堅実な積み重ね
![Page 9: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/9.jpg)
地道な手作業の連続
![Page 10: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/10.jpg)
自動化・効率化する手段
![Page 11: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/11.jpg)
_人人人人人人人_ > 突然の死死 < ‾Y^Y^Y^Y^Y^Y‾
![Page 12: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/12.jpg)
1.パッケージマネージャー
2. タスクランナー
3. モジュールシステム
![Page 13: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/13.jpg)
Package Manager パッケージマネージャー
![Page 14: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/14.jpg)
Before
👤💻 配布サイトを開く
👤💻 ダウンロードする
👤💻 作業ディレクトリにコピー
![Page 15: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/15.jpg)
After
👤💻 コマンド叩いてインストール
% npm install normalize.css
% bower install jquery
![Page 16: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/16.jpg)
Node land Browser land
![Page 17: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/17.jpg)
Node land Browser land
![Page 18: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/18.jpg)
npm Node.js標準の
パッケージマネージャ
Bower フロントエンド向けの パッケージマネージャ
% npm install -g bower
![Page 19: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/19.jpg)
{ "name": "best-practices", "version": "1.0.0", "description": "package using versioning practices", "author": "Charlie Robbins <[email protected]>", "main": 'index.js', "dependencies": { "colors": "0.x.x", "express": "2.3.x", "optimist": "0.2.x" }, "devDependencies": { "vows": "0.5.x" }, "engine": "node >= 0.4.1"}
package.json
![Page 20: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/20.jpg)
{ "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<test-framework-name>": "<version>" }}
bower.json
![Page 21: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/21.jpg)
2つのリポジトリと設定ファイル
% npm install % bower install
📄package.json bower.json
📄
![Page 22: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/22.jpg)
![Page 23: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/23.jpg)
http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging
![Page 24: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/24.jpg)
Node land Browser land
![Page 25: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/25.jpg)
![Page 26: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/26.jpg)
すべてのエコシステムに対応する?
% npm install express underscore # server% npm install jquery backbone # client% npm install grunt-browserify # build task
📄package.json
![Page 27: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/27.jpg)
![Page 28: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/28.jpg)
解決すべき問題は多い もしかしたら実現するかも
![Page 29: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/29.jpg)
http://havelog.ayumusato.com/develop/others/e630-npm_meets_frontend.html
![Page 30: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/30.jpg)
‣ いつものコマンドを短縮してみる(bowerも同じ)
Tips: shortcuts
% npm install --save <package-name>% npm i -S <package-name>
% npm remove --save-dev <package-name>% npm rm -D <package-name>
![Page 31: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/31.jpg)
‣ 現在の node_modules 内のバージョンを記録して固定
Tips: npm-shrinkwrap
% npm shrinkwrapwrote npm-shrinkwrap.json
"name": "A","version": "0.1.0","dependencies": { "B": { "version": "0.0.1", "dependencies": { "C": { "version": "0.1.0" ...
![Page 32: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/32.jpg)
‣ バージョンの競合で依存解決できないとき
Tips: bower.json resolutions
Unable to find a suitable version for angularplease choose one:
"resolutions": { "angular": "1.3.0"}
![Page 33: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/33.jpg)
Task Runner タスクランナー
![Page 34: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/34.jpg)
Before
👤💻 JSHint で文法チェックする
👤💻 画像のファイルサイズを最適化する
👤💻 JavaScript をコードミニファイする
% jshint src1.js src2.js
% imageoptim --directory ~/images
% uglifyjs src1.js src2.js
![Page 35: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/35.jpg)
After
👤💻 まとめて自動で実行
% grunt some-task
% gulp some-task
![Page 36: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/36.jpg)
‣ CSS Sprites の生成 ‣ 画像のファイルサイズ最適化 ‣ 開発用ローカルサーバの起動 ‣ スタイルガイドの生成 ‣ テストスイートの実行 ‣ JSHint / CSSLint の実行 ‣ JavaScript / CSS のミニファイ ‣ ファイルの結合・モジュールシステムのビルド etc...
多彩なタスクを実行してくれる
![Page 37: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/37.jpg)
Grunt Node.js タスクランナー
Gulp Streaming ビルドシステム
% npm install -g gulp% npm install —-save-dev gulp
% npm install -g grunt-cli% npm install —-save-dev grunt
![Page 38: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/38.jpg)
3,827 plugins
![Page 39: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/39.jpg)
1,254 plugins
![Page 40: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/40.jpg)
grunt.loadNpmTasks()require('gulp-***')
% npm i —-save-dev
📄Gruntfile.js Gulpfile.js package.json
📄
タスクの設定とプラグインの管理
![Page 41: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/41.jpg)
grunt.initConfig stylus: dist: files: 'temp/index.css': 'src/index.styl' autoprefixer: dist: files: 'temp/index.css': 'temp/index.css' cssmin: dist: files: 'dist/index.min.css': 'temp/index.css'!grunt.registerTask('build-css', ['stylus, autoprefixer', 'cssmin']);
Configuration over code
![Page 42: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/42.jpg)
📄index.styl
⚙stylus
⚙autoprefixer
⚙cssmin
📄index.min.css
📄 📄temp.css temp.css
![Page 43: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/43.jpg)
!!var gulp = require('gulp');var sass = require('gulp-stylus')var autoprefixer = require('gulp-autoprefixer')var cssmin = require('gulp-cssmin')!gulp.task('cssbuild', function () { gulp.src('src/index.styl') .pipe(stylus()) .pipe(autoprefixer()) .pipe(cssmin()) .pipe(gulp.dest('dist'))});
Code over configuration
![Page 44: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/44.jpg)
📄index.styl
⚙stylus
⚙autoprefixer
⚙cssmin
📄index.min.css
Stream (in memory)
![Page 45: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/45.jpg)
grunt.initConfig jsduck: options: 'builtin-classes': false 'warnings' : ['-dup_member', '-type_name'] 'external' : ['XMLHttpRequest'] dist: src : ['dist/phalanx.debug.js'] dest : 'docs' plato: options: jshint : grunt.file.readJSON('.jshintrc') dist: src : ['src/**/*.js'] dest : 'reports'!grunt.loadNpmTasks 'grunt-jsduck'grunt.loadNpmTasks 'grunt-plato'
Gruntfile.coffee
![Page 46: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/46.jpg)
http://cowboy.github.io/state-of-grunt-fe-summit-2014-talk/
![Page 47: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/47.jpg)
‣ jit-grunt - タスク実行時までロードを遅延させる
‣ grunt-conccurrent - タスクの実行を並列化して高速化
‣ grunt-parallelize - タスクの入力ファイル水平分割して高速化
‣ load-grunt-config - 設定ファイルの分割とタスクのオートロード
Tips: Grunt plugins
![Page 48: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/48.jpg)
設定が肥大化して 辛くなってしまったら
![Page 49: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/49.jpg)
‣ [email protected] で引数も渡せるようになった
FYI: npm run <command>
% npm run lint
"scripts": { "lint": "jshint **.js", "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"}
![Page 50: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/50.jpg)
Goooood!!
![Page 51: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/51.jpg)
"scripts": {
"prepublish": "marked-man --name gulp docs/CLI.md > gulp.1",
"lint": "jshint lib bin index.js --reporter node_modules/jshint-stylish/stylish.js --exclude node_modules",
"test": "npm run-script lint && mocha --reporter spec",
"coveralls": "istanbul cover _mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | coveralls && rm -rf ./coverage"
}, https://github.com/gulpjs/gulp/blob/master/package.json
gulpjs/gulp: package.json
![Page 53: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/53.jpg)
Task centric configuration - JSON設定ライク 統合タスクランナーとしてバランスが良い
Target centric configuration - JSコードライク 1ファイルに複数の処理をするビルドプロセス向き
`npm run` は意外に使える Node.js 環境なら確実に利用できて手軽&シンプル
![Page 54: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/54.jpg)
Module System モジュールシステム
![Page 55: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/55.jpg)
Before
👤💻 再利用性が低い長大なコード
👤💻 ページ単位?くらいで分割してるかも
👤💻 <script> 要素を順番に並べよう
![Page 56: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/56.jpg)
After
👤💻 クライアントサイドMVC / Flux(キリッ
👤💻 モジュール管理(キリッ
👤💻 依存解決(キリッ
![Page 57: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/57.jpg)
‣ 分割されたコード(ファイル)をモジュールとして管理 ‣ ビルドプロセス or ランタイム に依存解決
モジュールシステムに求めるもの
📄📄📄📄
Module management Resolve dependencies
⚙%
![Page 58: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/58.jpg)
![Page 59: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/59.jpg)
Browserify CommonJS をブラウザで実行
% npm install —-g browserify
![Page 60: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/60.jpg)
📄 ⚙Browserify
📁
📄bundle.js
node_modules
📁 node built-ins
📄📄📄📄📄Modules
(CommonJS)
![Page 61: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/61.jpg)
!# module.jsmodule.exports = function (n) { return n * 111};!# index.jsvar module = require('./module');console.log(module(5));!# cmd$ browserify index.js > bundle.js$ node bundle.js # => 555
example:CommonJS
![Page 62: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/62.jpg)
{ "name": "mypkg", "version": "1.2.3", "main": "main.js", "browser": { "foo": "./vendor/foo.js" }, "browserify": { "transform": "browserify-shim" }, "browserify-shim": { "foo": "FOO" }}
package.json
![Page 63: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/63.jpg)
Require.js AMD と呼ばれる一連の仕組み
% bower install requirejs% npm install -g r.js
![Page 64: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/64.jpg)
💻⚙Browser
RequireJS📄
'Server📄📄📄📄
Modules (AMD)
Async loading
![Page 65: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/65.jpg)
!# html<script src="require.js" data-main="main.js" async></script>!# main.jsdefine([‘module’], function(module) { alert(module.foo); // ‘bar’});!# module.jsdefine(function() { return {foo: ‘bar’}});
example:AMD
![Page 66: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/66.jpg)
require.config({ paths: { jquery : "libs/jquery.min", backbone : "libs/backbone.min", underscore : "libs/underscore.min", }, shim : { underscore : { exports : "_" }, backbone : { deps : [ "jquery", "underscore" ], exports : "Backbone" } }});
require.config
![Page 67: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/67.jpg)
webpack AMD, CommonJS に両対応+α
% npm install —-g webpack
![Page 68: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/68.jpg)
📄 ⚙webpack
📄📄📄
Modules (CommonJS/AMD)
📄📄AB
Entry point
📄A.bundle.js
📄B.bundle.js
📄common.js
A B
![Page 69: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/69.jpg)
📄 ⚙webpack
📄📄📄
Modules (CommonJS/AMD)
📄📄AB
Entry point
📄A.bundle.js
📄B.bundle.js
📄common.js
📄chunk.js
Async loading
A B
![Page 70: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/70.jpg)
!!var path = require("path");var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");module.exports = { entry: { pageA : "./pageA", pageB : "./pageB" }, output: { path : path.join(__dirname, "js"), filename : "[name].bundle.js", chunkFilename : "[id].chunk.js" }, plugins: [ new CommonsChunkPlugin("commons.js") ]}
webpack.config.js
![Page 72: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/72.jpg)
duo パッケージ管理+ビルドシステム
% npm install —-g duo
![Page 73: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/73.jpg)
📄⚙duo
📄bundle.js📄
📄📄
Modules (CommonJS)
(Github
⚙duo
![Page 74: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/74.jpg)
!# JavaScriptvar uid = require('matthewmueller/uid');var fmt = require('yields/fmt');!var msg = fmt('Your unique ID is %s!', uid());window.alert(msg);!!# CSS@import 'necolas/normalize.css';@import './layout/layout.css';!body { color: teal; background: url('./background-image.jpg');}
example:CommonJS & CSS
![Page 75: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/75.jpg)
http://ameblo.jp/principia-ca/entry-11932522962.html
![Page 76: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/76.jpg)
CommonJSスタイルさえ理解していれば一番ラク 設定ファイルもほぼ必要ないので導入も容易
PCならAMDも悪くないが、モバイルではどうか パス解決の設定が分厚くなりがち&独自記法△
大艦巨砲主義 設定はもちろん分厚くなるが、分割ビルドは魅力的
GitHubからのインストール&ビルドがシームレス◎ 現状だと npm + Browserify と比べて優位性が低い
※個人の感想です
![Page 77: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/77.jpg)
Conclusion まとめ
![Page 78: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/78.jpg)
‣ パッケージリポジトリは npm に 集約されるかもしれないし、されないかもしれない
‣ Gruntタスクランナー と Gulpビルドシステム は 好きに使い分けたら良いのでは
‣ npm run 便利だよ(個人的な推し)
‣ 今は CommonJS スタイルがフロントでもオススメかも
‣ モジュール管理は WebComponents とか ES6 とか 色々あるから色々変化しやすそう
![Page 79: Front-end with Node · 2014/11/15TokyoNodeFest2014 @ahomu Front-end with Node.js for Beginners ← 重要!!](https://reader035.vdocument.in/reader035/viewer/2022070720/5edfd216ad6a402d666b1f93/html5/thumbnails/79.jpg)
Thanks! http://aho.mu
@ahomu
github.com/ahomu
!
!
"
⌂