$30 off During Our Annual Pro Sale. View Details »

pitch loaderについて

pitch loaderについて

rchaser53

March 09, 2018
Tweet

More Decks by rchaser53

Other Decks in Programming

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