pitch loaderについて

Transcript

1. webpack のpitch loader について @rchaser53

2. webpack のpitch loader についてです cache-loader の調査中に気になったの調べました 自作、バグ修正の足がかりに役立てば幸いです

3. loader とは? いつものアレ(babel-loader とかcss-loader とか) module のソースコードを変換するもの 同期/ 非同期の両方に対応している loader

   は任意のファイルを出力できる(file-loader とか)

4. loader の処理順 { test: '/.js$/', use: [ 'abc-loader', 'def-loader' ]

   } 1. def-loader 2. abc-loader ではない正確にはpitch loader が先に実行される

5. pitch loader とは default loader の前に実行されるoptional なloader 値を返すとdefault loader まで処理が省略される

   この時点ではまだソースは読み込まれていない

6. default loader の前に実行されるoptional なloader // webpack.config.js { test: '/.js$/', use:

   [ 'abc-loader', 'def-loader' ] } 以下が正しい処理順 1. abc-loader -- pitch 2. def-loader -- pitch 3. (read the sources) 4. def-loader -- default 5. abc-loader -- default

7. default loader の前に実行されるoptional なloader dom のevent bubling からデザインされたもの

8. 値を返すとdefault loader まで処理が省略される module.exports = { pitch: function() { //

   値 返 default 処理 省略 // 返 値 String Buffer return 'something' // 非同期 // const callback = this.async(); // callback(null, 'something'); // return 何 返 (undefind) 次 loader 処理 移 } default: function(sources) { return sources[0] // Array 来 単純 return } }

9. 値を返すとdefault loader まで処理が省略される 例1 abc-loader.pitch return "abc" def-loader.pitch ( 省略)

   def-loader.loader ( 省略) abc-loader.loader ( 省略)

10. 値を返すとdefault loader まで処理が省略される 例2 abc-loader pitch return def-loader pitch return

    "somethingA" def-loader default ( 省略) abc-loader default return "somethingB"

11. 値を返すとdefault loader まで処理が省略される 使用例 cache-loader 1. pitch loader でcache と依存ファイルのmtime

    を比較 2. 差異がない場合はcache を読みこみreturn 3. defalult loader でそれまでの生成物と依存ファイルの path 、mtime からcache を作成

12. 値を返すとdefault loader まで処理が省略される mtime … 最終変更時刻 (modify time) 最後にファイルを変更した時刻のこと 正確にはファイルにwrite(2)

    、またはtruncate(2) した場合 に変更されるもの

13. この時点ではまだソースは読み込まれていない path は取得できるので取得はできる( 非推奨) loader-utils やschema-utils は使用できるのでoption など は取得できる 第3

    引数経由で他のloader に値を渡すことはできる

14. この時点ではまだソースは読み込まれていない 正直cache-loader くらいしか第3 引数を使っている loader を見かけない cache の依存情報やfile がコンパイル中に変更されてい ないか確認するために使用している

    そもそもpitch loader 自体ほとんど使われてない(script- loader, style-loader とか)

15. まとめ まとめ 使う機会はあるのか? webpack に対してはないかもしれない しかしフェイズを2 つに分けて、片方ではcache 管理な どを行うという設計の仕方は使えそう まぁその時楽しめれば良いよね

    が作成できた! awesome-prettier-loader

16. 参考リンク 公式ページ( かなり充実している) Documentation for pitch vs normal loader isn't

    very clear UNIX/Linux の部屋 用語集: タイムスタンプ cache-loader

17. ご静聴ありがとうございました! ご静聴ありがとうございました!