pitch loaderについて

Transcript

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

   View Slide

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

   View Slide

3. loader
   とは?
   いつものアレ(babel-loader
   とかcss-loader
   とか)
   module
   のソースコードを変換するもの
   同期/
   非同期の両方に対応している
   loader
   は任意のファイルを出力できる(file-loader
   とか)
   

   View Slide

4. loader
   の処理順
   {
   test: '/.js$/',
   use: [ 'abc-loader', 'def-loader' ]
   }
   1. def-loader
   2. abc-loader
   ではない正確にはpitch loader
   が先に実行される
   

   View Slide

5. pitch loader
   とは
   default loader
   の前に実行されるoptional
   なloader
   値を返すとdefault loader
   まで処理が省略される
   この時点ではまだソースは読み込まれていない
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   }
   }
   

   View Slide

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

   View Slide

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

    View Slide

11. 値を返すとdefault loader
    まで処理が省略される
    使用例 cache-loader
    1. pitch loader
    でcache
    と依存ファイルのmtime
    を比較
    2.
    差異がない場合はcache
    を読みこみreturn
    3. defalult loader
    でそれまでの生成物と依存ファイルの
    path
    、mtime
    からcache
    を作成
    

    View Slide

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

    View Slide

13. この時点ではまだソースは読み込まれていない
    path
    は取得できるので取得はできる(
    非推奨)
    loader-utils
    やschema-utils
    は使用できるのでoption
    など
    は取得できる
    第3
    引数経由で他のloader
    に値を渡すことはできる
    

    View Slide

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

    View Slide

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

    View Slide

16. 参考リンク
    公式ページ(
    かなり充実している)
    Documentation for pitch vs normal loader isn't very clear
    UNIX/Linux
    の部屋 用語集:
    タイムスタンプ
    cache-loader
    

    View Slide

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

    View Slide