Advertisement
ビルド職人の朝は早い
Report
Masashi MATSUIFollow
Apr. 23, 2016•0 likes•3,737 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
ビルド職人の朝は早い
Apr. 23, 2016•0 likes•3,737 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Niigata.js #1の発表内容です。
Masashi MATSUIFollow
Advertisement
ビルド職人の朝は早い
- ビルド職人の朝は早い Matsui Masashi niigata.js #1
- • 松井 正志 (Matsui Masashi) • twitter: @circled9, @ma_2_i • 仕事は８割方JavaScriptを書いてます 自己紹介 2
- みなさんJSで 消耗してませんか？ 3
- 激流のような トレンドの移り変わり 4
- 矢継ぎ早に襲いかかる バージョンアップ 5
- 特にビルド 6
- 各ツールの依存関係で 動かなくなってつらい 7
- Babelを5から6にしたら あれこれ動かなくなったとか 8
- 登場人物の紹介 9
- node.js • サーバーサイドJavaScriptの実行環境 • ブラウザで動作するJavaScriptを開発する時もビル ドツールの動作環境としてよく使われる 10
- npm • node.jsのモジュールを管理するツール • Node Package Manager • node.jsに標準でついてくる 11
- タスクランナー • ビルドやテストなどのタスクを定義し、実行するツ ール • grunt、gulp、flyなどのツールが有る • 具体的な処理は、それぞれプラグインを使って処理 をする 12
- モジュール管理 • モジュールの依存関係を解決する • 主にブラウザ上で動作するJavaScript対象 • browserify、webpack、rollupなど • このカテゴリーのツールもプラグインがたくさんあ る 13
- ビルド職人の朝は早い 14
- ビルド職人の朝は早い • 今日は僕の現時点でのJavaScriptのビルドに関する 知見を話したいと思います • 来年くらいには言っていること変わっているかもし れません • 内容に異論は認める 15
- 目次 • npm install -gはやめよう • run-script経由で呼びだそう • preとpostを使おう • 依存は減らそう 16
- npm install -g はやめよう 17
- これ 18
- npm install --global gulp-cli or npm install -g gulp-cli 19
- npm install -g • -g オプションをつけるとグローバルインストール される • パスが通った場所にインストールされ、どこでもそ のコマンドが呼べる 20
- 悲しい例 今年のワイ「よっしゃwebpack使おう」 npm install -g webpack （１年後…） 来年のワイ「よっしゃ時代はwebpack2や」 npm update -g webpack 上司「去年のプロジェクトに機能追加してくれ」 来年のワイ「・・・」 21
- -g のデメリット • グローバルにインストールするので、プロジェクト ごとにバージョンが変えられない • nodebrewなどでnodeのバージョンを切り替えると 、再度インストールし直しになる 22
- 代案 • インストールするときは -D (--save-dev) オプショ ンを使う • 使うときは run script（後述）経由で呼び出す 23
- run-scriptを使おう 24
- Example • Bad!! $ npm install gulp -g $ npm install $ gulp • Good!! $ npm install $ npm start 25
- run-script • package.jsonのscripts内に書いたタスクをnpm run XXXで呼び出すことができる • このときnode_modules/.binにはパスが通っている 26
- メリット • 何を使っているのか気にしなくていい • npm start が node なのか grunt なのか gulp なの か使う側は気にしなくてよい • トラブルになる要素が少ない • 基本シェルで直接叩いているのと同じ 27
- デメリット • 長くなるとメンテしづらい • シェくスクリプトを書いて実行するという技で逃 げられなくもない • うっかりシェル芸に走ると地獄の始まり 28
- TIPS: 引数を渡す • 引数を渡したい場合は--で渡す • 例: npm run test -- --grep="pattern" 29
- preとpostを使おう 30
- preとpostを使おう • preとpostで前処理・後処理が書ける • preXXXでXXXの前に実行される • postXXXでXXXの後に実行される • それでもダメならgulp使う感じで 31
- preとpostのいいところ • 特筆するほどいいところは、ぶっちゃけないです • 強いて言うなら、新しく何かをインストールしなく ていい • 例えばgulpを使うとgulp-XXXが必要になる 32
- 依存はほどほどに 33
- やりたいことはいっぱいある • 画像などのファイルの読み込みをしたい • モジュール管理したい • altJSで書いてトランスパイルしたい • コードを難読化・圧縮したい 34
- そうだツールを使おう • 画像をコピー！よし、Gulpを使おう！ • モジュール管理はWebpackを使おう！ • XXXはGulpのプラグインがある！ • YYYはWebpackのプラグインで！ • （以下繰り返し）
- ツール沼へようこそ 36
- プラグインの依存関係地獄 • webpack • babelify • babel • power-assert • karma
- プラグインの依存関係地獄 • webpack • babelify • babel ←Babelを5=>6に上げたい • power-assert • karma • etc, etc…
- YOU DIED…
- プラグインの功罪 • プラグインを使うと簡単に目的の機能が実現できる • しかし、依存関係が増えるため、バージョンアップ したいときに大変になったりする • XXXが更新されたのに、XXXを呼び出すプラグイ ンが更新されないとか…
- 入れるのは簡単 メンテするのは大変
- ビルド職人が この先生きのこるには 43
- トレンドの変化と バージョンアップ
- それらの闇に 飲み込まれないこと
- ビルドの闇に 飲まれてはならない
- おわり 47
Advertisement