Framework7のパッケージ構造

パッケージ

Framework7コアライブラリには、以下のファイルとフォルダが含まれています。

framework7/
    bundle/
       package.json
    cjs/
        components/
        modules/
        shared/
        framework7-bundle.js
        framework7-lite-bundle.js
        framework7-lite.js
        framework7.js
    components/
        accordion/
            accordion-aurora.less
            accordion-ios.less
            accordion-md.less
            accordion-rtl.css
            accordion-vars.less
            accordion.css
            accordion.d.ts
            accordion.js
            accordion.less
            package.json
        ...
    core/
        package.json
    esm/
        components/
        modules/
        shared/
        framework7-bundle.js
        framework7-lite-bundle.js
        framework7-lite.js
        framework7.js
    less/
    lite/
        package.json
    lite-bundle/
        package.json
    modules/
    types/
    framework7-bundle-rtl.css
    framework7-bundle-rtl.min.css
    framework7-bundle.css
    framework7-bundle.js
    framework7-bundle.js
    framework7-bundle.less
    framework7-bundle.min.css
    framework7-bundle.min.js
    framework7-bundle.min.js
    framework7-rtl.css
    framework7-rtl.min.css
    framework7.css
    framework7.d.ts
    framework7.js
    framework7.js
    framework7.less
    framework7.min.css
    framework7.min.js
    framework7.min.js

ライト版

Framework7のLite版(接尾辞が-liteのファイル)は、Framework7 Component(Router Component)の機能や、ゲージ、パイチャート、エリアチャートのコンポーネントのCore APIがありません。Framework7-Vue/React/Svelteライブラリで、Vue/React/Svelteコンポーネントを代わりに使用するために設計されています。

Lite版は、ESMとCJSのパッケージでのみ利用可能です。

スタイル

Framework7 の主要なスタイルはパッケージのルートフォルダにあります。

• framework7.css - 最小限のコンポーネントで構成された、最小限（コア）の Framework7 スタイルが含まれています。
• framework7-rtl.css - 同じですが RTL レイアウト用です。
• framework7-bundle.css - Framework7 のコアバージョンのスタイルを含み、すべてのコンポーネントのスタイルを含みます。
• framework7-bundle-rtl.css - 同じですが、RTL レイアウト用です。

スクリプト (UMD)

ルートフォルダにはいわゆる UMD と呼ばれる JavaScript ファイルがあり、ブラウザで直接使用することができます (例: <script src="...">)。

• framework7.js - 必要最小限のコンポーネントセットを含む、最小限の (コア) Framework7 バージョンを含みます。
• framework7-bundle.js - Framework7 とそのコンポーネント全体を含みます。

Lite バージョンは UMD 形式では提供されていません。

コンポーネント

すべてのコンポーネントは components/ フォルダに入っており、コアバージョン (バンドルバージョンではない) で使用する必要があります。コンポーネントの使用方法については、lazy modulesのセクションで詳しく説明します。

ESモジュール

Framework7は、ES-nextモジュールとしてインポートすることもできます。

import Framework7 from 'framework7';

Framework7はモジュール構造になっていて、デフォルトではコアコンポーネントを持つコアFramework7のみをエクスポートします。

追加のコンポーネントが必要な場合は、それらを追加でインクルードする必要があります。

// コアフレームワークのインポート
import Framework7 from 'framework7';

// 追加コンポーネントのインポート
import Searchbar from 'framework7/components/searchbar/';
import Calendar from 'framework7/components/calendar/';
import Popup from 'framework7/components/popup/';

// クラスの.use()メソッドを使ってF7コンポーネントをインストールします。
Framework7.use([Searchbar, Calendar, Popup]);

// アプリの初期化
var app = new Framework7({/*...*/});

このようなモジュール構造にすることで、ツリーシェイクの効果とパッケージサイズの最適化を実現しています。

default のエクスポートに加えて、Dom7, request, getDevice, createStore, utils, getSupport` ヘルパーのための名前付きのエクスポートがあります。

import Framework7, { getDevice, request } from 'framework7';

var app = new Framework7({/*...*/});

var device = getDevice();

if (device.ios) {
  request.get('http://google.com');
}

"Lite" module is also available:

import Framework7 from 'framework7/lite';

ESモジュールバンドル

すべてのコンポーネントと一緒にFramework7をインクルードする必要がある場合には、すべてのコンポーネントをインストールした状態で、別のスクリプトバンドルをインクルードすることができます。

// すべてのコンポーネントを含むフレームワークのインポート
import Framework7 from 'framework7/bundle';

// アプリの起動
var app = new Framework7({/*...*/});

"Lite" bundle module is also available:

import Framework7 from 'framework7/lite-bundle';