インストール

はじめにでは、最初のアプリを一歩ずつ作っていきます。このページはリファレンスです。$mol プロジェクトがどう構成され、ビルドがどう動くかを説明します。

必要環境

Node.js 18+ と git。それ以外にグローバルへインストールするものはありません。

$mol アプリは MAM（ビルドツール兼モジュールレジストリ）の中で動きます。一度クローンし、その中で自分のモジュールを開発します。1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start は http://localhost:9080/ で監視付きの開発サーバーを起動します。保存するたびに再ビルドし、依存関係を自動で解決します。バンドラーの設定を保守する必要は一切ありません。

モジュールの命名規則

すべてのコンポーネント名はフォルダのパスに対応し、アンダースコアはそれぞれフォルダの区切りです。1$my_app → my/app/2$my_app_header → my/app/header/モジュールのフォルダ名にアンダースコアを含めることはありません。複数単語の名前には入れ子のフォルダを使ってください。使っているコンポーネントがバンドルに現れない場合、ほぼ必ずフォルダのパスとクラス名が一致していません。

モジュールの構造

コンポーネントは、最大 4 つのファイルを持つフォルダです。ファイル役割name.view.tree宣言的なレイアウトname.view.ts振る舞い（TypeScript）name.view.css.ts型付きスタイルname.view.tree、index.htmlアプリモジュールのエントリポイントアプリの index.html はルートコンポーネントをマウントします。1<body mol_view_root>2 <div mol_view_root="$my_app"></div>3 <script src="web.js"></script>4</body>

本番用ビルド

開発サーバーは都度ビルドしますが、ワークスペースのルートから任意のモジュールを明示的にビルドすることもできます。1npm run start my/app出力は my/app/-/ に生成され、web.js、web.css、web.audit.js が含まれます。必ず監査ファイルを確認してください。クリーンな web.audit.js は、未使用の依存も型エラーもないことを意味します。

npm パッケージの追加

require でパッケージを参照すると、MAM が次回のビルド時にインストールします。1const dayjs = require( 'dayjs' ) as typeof import( 'dayjs' )

ワークスペースが整ったら、UI 自体をどう記述するかを学びましょう。

ビューへ進んでください。GitHub でこのページを編集役に立ちましたか？はいいいえ前へツール次へビューこのページの内容必要環境 MAM ワークスペースモジュールの命名規則モジュールの構造本番用ビルド npm パッケージの追加次へ