スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

webpackのjade-html-loaderで躓いたところ

// webpack.config.js
module: {
loaders: [{
test: /\.jade$/,
loader: 'jade-html'
}]
}
const htmlString = require('./index.jade');
Unexpected token <
You may need an appropriate loader to handle this file type.

jade-loaderより一手間減りそうな名前のjade-html-loaderを使ってみたらこんなエラーが発生した。jade > htmlの変換には成功しているものの、変換後のhtmlな文字列をwebpackがJSとして解釈しようとして失敗しているようだ。しかしそもそもloaderからの返り値でwebpack自身がコケている場合はどうすればいいのかわからず、readmeを見てもそれらしい事は書いていなかったので諦めてググることにした。

Aurelia + Webpack で Jade 使う - Qiita
というわけで、最終形は preLoaders で Jade ファイルを HTML 文字列に変換し、 loaders 側では通常の HTML と同じ raw loader を使うようにした。 ...


なるほどraw-loaderを挟めばいいのか。

module: {
loaders: [{
test: /\.jade$/,
loader: 'raw!jade-html'
}]
}

こう変えてみたらhtmlな文字列で受け取れるようになった。

require('raw!jade-html?value=hoge!./index.jade');
div(name=value)
.fuga
.piyo
| foobar

"<div name=\"hoge\"><div class=\"fuga\"><div class=\"piyo\">foobar</div></div></div>"

渡した変数もちゃんと展開できている、こりゃ便利。それにしてもUsageをなぞって失敗するとは思わなかった、もしかしてこれenhanced-require環境だけでしかテストしてないんじゃ……。おしまい。
関連記事

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

すポンサードリンク
最新記事
カテゴリ
DN (57)
CSS (2)
いろいろ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。