webpack5.x対応loaderの作り方
3792 ワード
動機
- htmlは静的なものを使うんだけど、ejsのincludeが使いたい。
- できればdejsでも同じejsを処理したい(
<%-await include()%>
)
。。。deno移行する時のための準備。denoって有望なんでしょうかね?
-
バッチでejsコマンドとwebpack呼べばいいだけなんだけどwebpackで完結したい
どうするか
<%-await include()%>
)。。。deno移行する時のための準備。denoって有望なんでしょうかね?
npmで「ejs loader」で検索すると、、、、
たっくさん出てくる。
でも、いくつか使ってみようとしても動かない
とりあえず、自分で作ってみる
-
module.exports = function (content, map, meta)
の形で書けば良いらしい
- webpackで設定したoptionsは
require("loader-utils").getOptions(this)
で取れるらしい
-
await include
するためには
- ejs
- ejs.render()を非同期呼び出し(
await ejs.render()
)
- ejs.render()の第三引数に
{"async":true}
が必要
- webpack
- callback関数を取得(
const callback = this.async()
)
- 非同期処理終了後に
callback(error, ejs.renderの戻り, map, meta)
module.exports = function (content, map, meta)
の形で書けば良いらしいrequire("loader-utils").getOptions(this)
で取れるらしいawait include
するためには
- ejs
- ejs.render()を非同期呼び出し(
await ejs.render()
) - ejs.render()の第三引数に
{"async":true}
が必要
- ejs.render()を非同期呼び出し(
- webpack
- callback関数を取得(
const callback = this.async()
) - 非同期処理終了後に
callback(error, ejs.renderの戻り, map, meta)
- callback関数を取得(
ということを調べて作ってみたけど
「getOptionsはないよ!」
と言って、怒られる。
原因はこれ
3.0.0 (2021-10-20)
⚠ BREAKING CHANGES
...
removed getOptions in favor loaderContext.getOptions (loaderContext is this inside loader function), note - special query parameters like ?something=true is not supported anymore, if you need this please do it on loader side, but we strongly recommend avoid it, as alternative you can use ?something=1 and handle 1 as true
...
loaderの中のthisにgetOptionsが生えてるから、それ使ってねってことですね。
他にも色々変わってますが、基本、this使えってことらしいです。
const getOptions = (ctx) => {
return ctx.getOptions
? ctx.getOptions()
: require("loader-utils").getOptions(ctx);
};
module.exports = function ejsLoader(content, map, meta) {
const options = getOptions(this);
// ~~~~
}
最終的には、こうやって、webpack4でも5でもoptions取ってこれるようにしてみた。
npmに公開してみた
@coneyware/ejs-loader
でもね。。。ejs loaderで検索すると山ほど出てくるってことは、
みんな、それぞれ自分で作るんだろうなぁと思って作った時にハマったところをココに書いておく。
Author And Source
この問題について(webpack5.x対応loaderの作り方), 我々は、より多くの情報をここで見つけました https://qiita.com/himox_x/items/2c004ce22c0b1779a348著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .