Polymer.co-edo day 2019 春を開催しました
Thursday, May 02, 2019 09:12:00 PM
2019年4回目となる Polymer.co-edo ミートアップ を開催しました。
edo-blogcardに最初のコードをアップしました。 developブランチにpushしています。
まだ何も動きはないのですが、LitLoader を使ってビルドするところまで実装しています。
ES Module import との戦い
Web Components はHTMLファイルからだと以下のように読み込みます。
<script type="module" src="node_modules/xx-element/xx-element.js"></script>
独自のカスタムエレメントから別のエレメントを利用する場合は、以下のように記述します。
import '@polymer/iron-ajax/iron-ajax.js';
ここでブラウザは @polymer/iron-ajax/iron-ajax.js のようなパスを解決できないため、webpackでコンパイルすることが必要になります。
この話は、以前の記事PHPer Kaigi 2019に参加しましたでも書いているとおり、import maps待ちな状況です。
2つのビルド結果
そこで、2つのビルド結果を保持するようにしました。
/dist/edo-blogcard.js
これは
import '@edo-elements/edo-blogcard/dist/edo-blogcard.js';
のように利用するためのビルド結果で、LitLoader形式で記述された .lit ファイルを .js にコンパイルしたものです。
/dist/edo-blogcard.bundle.js
これは
<script type="module" src="node_modules/@edo-elements/edo-blogcard/dist/edo-blogcard.bundle.js"></script>
のように利用するためのビルド結果で、HTMLからブログパーツとして利用したい（webpackなどを実行しないWebページで使いたい）場合のためにコンパイルしたものです。 LitLoaderとwebpackを使ってHTMLから利用可能な状態になっています。
工夫したところ
後者の bundle.js については、普通にLitLoaderとwebpackを使うやり方なので、特にはありません。
LitLoaderはwebpackのloaderとして実装されているので、configに設定を追加するだけです。
一方前者はwebpackのloaderようにできているLitLoaderを、webpack使わずにどうやって呼び出すか？というところを工夫しました。
それが build.js です。
そして loader-runner という webpack のモジュールを使っています。
このモジュールは Runs (webpack) loaders という説明のとおり、loaderを実行することに特化しています。
const fs = require("fs");
const path = require("path");
const { runLoaders } = require("loader-runner");
runLoaders(
{
resource: path.resolve(__dirname, "edo-blogcard.lit"),
loaders: [require.resolve("lit-loader")]
},
function(err, result) {
if (err) throw err;
fs.writeFileSync("dist/edo-blogcard.js", result.result[0]);
}
);
これだけで .lit ファイルを .js ファイルに(webpackなしで)コンパイルできます。
次回
通常どおりの、もくもく会として開催予定しています。 皆様の参加をお待ちしております。