Framework7 パッケージ構造

パッケージ

Framework7コアライブラリパッケージには、以下のエクスポートが含まれています

framework7/
    components/
        accordion/
            accordion-ios.less
            accordion-md.less
            accordion-rtl.css
            accordion-vars.less
            accordion.css
            accordion.d.ts
            accordion.js
            accordion.less
        ...
    less/
    modules/
    framework7-bundle-rtl.css
    framework7-bundle-rtl.min.css
    framework7-bundle.css
    framework7-bundle.esm.js
    framework7-bundle.js
    framework7-bundle.less
    framework7-bundle.min.css
    framework7-bundle.min.js
    framework7-lite-bundle.esm.js
    framework7-lite.esm.js
    framework7-rtl.css
    framework7-rtl.min.css
    framework7-types.d.ts
    framework7.css
    framework7.d.ts
    framework7.esm.js
    framework7.js
    framework7.less
    framework7.min.css
    framework7.min.js

Liteバージョン

Framework7の「Lite」バージョン（-liteサフィックスが付いたファイル）には、Framework7コンポーネント（ルーターコンポーネント）の機能、ゲージ、パイチャート、エリアチャートコンポーネント用のコアAPIはありません。これは、代わりにVue/React/Svelteコンポーネントを使用するFramework7-Vue/React/Svelteライブラリで使用するように設計されています。

LiteバージョンはESMインポートでのみ利用可能です。

スタイル

メインの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/フォルダーにあり、コア（バンドルではない）バージョンで使用する必要があります。それらの使用方法の詳細については、レイジーモジュールセクションをご覧ください。

ESモジュール

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

import Framework7 from 'framework7';

Framework7にはモジュール構造があり、デフォルトではコアコンポーネントのみを含むコアFramework7のみがエクスポートされます。

追加のコンポーネントが必要な場合は、追加で含める必要があります。

// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/components/searchbar/';
import Calendar from 'framework7/components/calendar/';
import Popup from 'framework7/components/popup/';

// Import components styles
import 'framework7/components/searchbar/css';
import 'framework7/components/calendar/css';
import 'framework7/components/popup/css';

// Install F7 Components using .use() method on class:
Framework7.use([Searchbar, Calendar, Popup]);

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

このようなモジュール構造は、最適なツリーシェイキングの結果とパッケージサイズの最適化を提供します。

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

import Framework7, { getDevice } from 'framework7';

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

var device = getDevice();

"Lite"モジュールも利用可能です。

import Framework7 from 'framework7/lite';

ESモジュールバンドル

すべてのコンポーネントを含むFramework7を含める必要がある場合は、インストールされたすべてのコンポーネントを含む別のスクリプトバンドルを含めることができます。

// Import framework with all components
import Framework7 from 'framework7/bundle';

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

"Lite"バンドルモジュールも利用可能です。

import Framework7 from 'framework7/lite-bundle';

ESモジュールエクスポート

Framework Coreパッケージは純粋なESMパッケージであり、package.jsonに次のexportsフィールドがあります。

{
  "exports": {
    ".": "./framework7.esm.js",
    "./core": "./framework7.esm.js",
    "./bundle": "./framework7-bundle.esm.js",
    "./lite": "./framework7-lite.esm.js",
    "./lite/bundle": "./framework7-lite-bundle.esm.js",
    "./lite-bundle": "./framework7-lite-bundle.esm.js",
    "./less": "./framework7.less",
    "./css": "./framework7.css",
    "./css/rtl": "./framework7-rtl.css",
    "./css/bundle": "./framework7-bundle.css",
    "./css/bundle/rtl": "./framework7-bundle-rtl.css",
    "./types": "./framework7-types.d.ts",
    "./components/dialog": "./components/dialog/dialog.js",
    "./components/dialog/less": "./components/dialog/dialog.less",
    "./components/dialog/css": "./components/dialog/dialog.css",
    "./components/dialog/css/rtl": "./components/dialog/dialog-rtl.css",
    ...
  }
}