Skip to content

Latest commit

 

History

History
195 lines (135 loc) · 6.56 KB

README.md

File metadata and controls

195 lines (135 loc) · 6.56 KB
Raw

drill.js

概要

drill.jsは、フロントエンド開発者がNode.jsに依存しないようにするための強化版ウェブローダーツールです。多機能な拡張機能を提供し、モジュールの宣言的なロードをサポートしています。

従来のフロントエンド開発手法と比較して、drill.jsはモジュールのロードと処理をより柔軟に行うことができ、フロントエンド開発をより便利かつ効率的にします。

公式拡張機能

  • drill-less ：ブラウザで.lessファイルを直接サポートします。

インストール

drill.jsをインストールするには、次のいずれかの方法を使用できます：

  • CDNを使用してインポートする場合： HTMLファイルの<head>セクションで、以下のスクリプトタグをインポートします。
<script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>
  • パッケージマネージャーを使用してインストールする場合： npmやyarnなどのパッケージマネージャーツールを使用してインストールします。
npm install drill.js

初期化

drill.jsを使用する前に、HTMLファイルでdrill.jsスクリプトをインポートして環境を初期化する必要があります。初期化スクリプトはHTMLファイルの<head>セクションに配置することをおすすめします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
    <script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>
    <!-- 他のheadセクションのコンテンツ -->
</head>
<body>
   <!-- ページのコンテンツ -->
</body>
</html>

モジュールのロード

ESモジュール環境では、lmメソッドを使用してモジュールをロードすることができます。以下はtest-module.mjsモジュールをロードする例です：

コードを表示する

デモを表示する

// target/test-module.mjs
export const getDesc = () => {
  return "I am target/test-module.mjs";
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Load Module</title>
    <script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>
  </head>
  <body>
    <script type="module">
      const load = lm(import.meta);

      (async () => {
          const test = await load("./target/test-module.mjs");

        document.write(test.getDesc());
        console.log(test.getDesc()); // => I am target/test-module.mjs
      })();
    </script>
  </body>
</html>

loadメソッドを使用してモジュールをロードすることで、非同期のimportと同じ構文を使用することができます。ロードしたモジュールはtest変数を介してモジュールのエクスポート内容にアクセスすることができます。

宣言的なロード

<load-module>または<l-m>タグを使用して、モジュールを宣言的にロードすることができます。これは<script>タグを使用してモジュールをロードするのと同様の効果を持っています。

<load-module src="path/to/the/module.mjs"></load-module>
<!-- または -->
<l-m src="path/to/the/module.mjs"></l-m>

この方法は、従来の<script>タグと同様の効果を持ち、モジュールの宣言的なロードを簡単に行うことができます。

ファイルタイプのサポートの拡張

lm.useメソッドを使用して、drill.jsが特定のファイルタイプをサポートするように拡張することができます。以下は.jsonファイルのサポートを拡張する例です：

use("json", async (ctx, next) => {
  const { url } = ctx;

  ctx.result = await fetch(url).then((e) => e.json());

  next();
});

Koaのミドルウェアのような仕組みを使用して、ctx.resultを設定して適切なコンテンツを返すことができます。lm.useを使用して、さらに多くのファイルタイプをサポートできます。

公式のサポートされているタイプのサンプルコード を見ることで、さらに多くの情報を確認できます。オンラインデモもご覧いただけます。

モジュールの前処理

lm.useメソッドを使用して、モジュールデータを前処理することができます。以下は前処理コンポーネント登録データの例です：

デモを表示する

コードを表示する

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Module Preprocessing</title>
    <script src="https://cdn.jsdelivr.net/npm/drill.js/dist/drill.min.js"></script>
    <script src="./register-drill.js"></script>
    <l-m src="./test-comp.mjs"></l-m>
  </head>
  <body>
    <test-comp></test-comp>
  </body>
</html>
// register-drill.js
lm.use(["js", "mjs"], async (ctx, next) => {
  const { content, tag, type, style } = ctx.result;

  if (type === "component") {
    class MyElement extends HTMLElement {
      constructor() {
        super();
        this.innerHTML = content;
        style && Object.assign(this.style, style);
      }
    }

    customElements.define(tag, MyElement);
  }

  next();
});
// test-comp.mjs
export const type = "component";

export const tag = "test-comp";

export const content = "Hello, World! This is my custom element.";

export const style = {
  color: "red",
  padding: "10px",
  margin: "10px",
  backgroundColor: "#eee",
};

前処理では、モジュールのタイプと内容に基づいて適切な操作を行うことができます。上記の例では、コンポーネント登録データをカスタム要素に処理しています。

以上がdrill.jsの一部の使用文書の内容です。残りのコンテンツには、例や使用法、よくある質問への回答、APIリファレンスなどが含まれます。

プラグイン開発の詳細については、こちらを参照してください 。