Framework7 自訂建置

自訂建置

Framework7 附帶 Gulp 建置器，可建置自訂函式庫版本，您可以在其中只包含必要的元件/模組。我們需要下列項目

1. 下載並解壓縮 Framework7 GitHub 儲存庫 到本機資料夾

2. 安裝 Node.js（如果尚未安裝）

3. 在終端機執行下列指令，安裝 Gulp（如果尚未安裝）

   $ npm install --global gulp

4. 現在，我們需要安裝必要的相依性。前往已下載並解壓縮的 Framework7 儲存庫資料夾，並在終端機中執行

   $ npm install

5. 將 scripts/build-config.js 檔案複製到已下載資料夾中的某個位置，並將其重新命名為，例如 scripts/my-config.js
6. 開啟此檔案並移除您不需要的元件，或修改色彩主題和包含的色彩

   /* my-config.js */
   const config = {
     rtl: false, // change to true to generate RTL styles
   
     // remove any components you don't need
     components: [
       // Modals
       'dialog',
       'popup',
       'login-screen',
       'popover',
       'actions',
       'sheet',
       'toast',
   
       // Loaders
       'preloader',
       'progressbar',
   
       // List Components
       'sortable',
       'swipeout',
       'accordion',
       'contacts-list',
       'virtual-list',
       'list-index',
   
       // Timeline
       'timeline',
   
       // Tabs
       'tabs',
   
       // Panel
       'panel',
   
       // Card
       'card',
   
       // Chip
       'chip',
   
       // Form Components
       'form',
       'input',
       'checkbox',
       'radio',
       'toggle',
       'range',
       'stepper',
       'smart-select',
   
       // Grid
       'grid',
   
       // Pickers
       'calendar',
       'picker',
   
       // Page Components
       'infinite-scroll',
       'pull-to-refresh',
   
       // Data table
       'data-table',
   
       // FAB
       'fab',
   
       // Searchbar
       'searchbar',
   
       // Messages
       'messages',
       'messagebar',
   
       // Swiper
       'swiper',
   
       // Photo Browser
       'photo-browser',
   
       // Notifications
       'notification',
   
       // Autocomplete
       'autocomplete',
   
       // Tooltip
       'tooltip',
   
       // Gauge
       'gauge',
   
       // Skeleton
       'skeleton',
   
       // Color Picker
       'color-picker',
   
       // Tree View
       'treeview',
   
       // WYSIWYG Editor
       'text-editor',
   
       // Pie Chart
       'pie-chart',
   
       // Area Chart
       'area-chart',
   
       // Breadcrumbs
       'breadcrumbs',
   
       // Typography
       'typography',
     ],
     // include/exclude dark theme styles
     darkTheme: true,
     // include/exclude light theme styles
     lightTheme: true,
     // include/exclude themes
     themes: [
       'ios',
       'md',
     ],
   };
   
   module.exports = config;
   

7. 現在，我們準備好建置 Framework7 的自訂版本。我們需要執行

   $ npm run build-core:prod -- --config scripts/my-config.js --output path/to/output/folder

8. 全部完成。現在您應該會在指定的輸出資料夾中看到新產生的 js 和 css 檔案

ES 模組

如果您使用 Webpack 或 Rollup 等套件管理工具，您可以只使用必要的 Framework7 JS 元件，而不需要建置程序，並只匯入必要的元件

// 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';

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

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

下列元件可供匯入（所有其他元件都是核心的一部分）

Less.js

Framework7 樣式是用 Less.js 建立的。如果您在應用程式/專案中使用 Less 和 NPM，則可以輕鬆建立自訂 Framework7 樣式表，僅包含您需要的元件。

建立您自己的 framework7.less 檔案

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

我們可以更進一步，在自訂 framework7.less 檔案中指定 Framework7 的主色主題和所需的顏色

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

// include/exclude themes
@includeIosTheme: true;
@includeMdTheme: true;

// include/exclude dark theme
@includeDarkTheme: true;
// include/exclude light theme
@includeLightTheme: true;

// Theme color
@themeColor: #007aff;

// Extra colors
@colors: {
  red: #ff3b30;
  green: #4cd964;
  blue: #2196f3;
  pink: #ff2d55;
  yellow: #ffcc00;
  orange: #ff9500;
  purple: #9c27b0;
  deeppurple: #673ab7;
  lightblue: #5ac8fa;
  teal: #009688;
  lime: #cddc39;
  deeporange: #ff6b22;
  gray: #8e8e93;
  white: #ffffff;
  black: #000000;
};

// change to true to generate RTL styles
@rtl: false;