fes.js Documentation

Fes.js is a frontend application solution designed around the principles of Convention over Configuration, Configuration-driven, and Component-based design.

Key characteristics include:

• Plugin-based Architecture: A complete plugin system covering the entire lifecycle (compilation and runtime). It is inspired by Umi's mechanism.
• Routing-centric: Supports both configuration-based routing and convention-based routing.
• Vue.js 3.0 Based: Leverages the rich Vue ecosystem with a smooth learning curve.
• Extensible: Plugins can manage both build-time and runtime capabilities, coordinated by the Fes.js core.

The fes command is the primary entry point for managing your Fes.js project. It must be executed from the project root directory. It provides commands for development, production builds, environment inspection, and configuration debugging.

Usage: fes <command> [options]

Fes.js works by encapsulating common technology stacks into individual plugins. This convergence allows developers to complete the majority of daily tasks using only the Fes.js core and its ecosystem.

Plugins and Plugin Sets

Fes.js supports both individual Plugins and Plugin Sets. Plugin sets are used to group related plugins together to provide specialized support for different business types or application requirements, helping to manage dependencies efficiently.

The dir option allows you to specify a path to extract data from the enum's value object. It supports object properties, array indices, and mixed access:

• Object properties: A, A.B
• Array indices: [0], [0][1]
• Mixed: A[0], [0].A, A[0].B

Note: If the enum value is a primitive type, dir rules are ignored and the value itself is returned.

Fes.js unifies all API entry points. All runtime APIs, including built-in Fes.js APIs and those provided by plugins, are exported through the @fesjs/fes package. You should use this package as your primary import source for runtime functionality.

import { someApi } from '@fesjs/fes';

Fes.js is designed to solve the overhead of setting up front-end environments, routing, API encapsulation, and authority management. Its core philosophy includes:

• Fast: Built-in routing and development tools with a wide array of plugins for daily development needs.
• Easy: Based on Vue 3.0 and follows the "Convention over Configuration" principle. It provides a unified plugin configuration entry and consistent APIs.
• Strong: Focuses on reducing bugs by allowing developers to focus on page content, supported by unit testing and coverage capabilities.
• Expanded: Implements a complete lifecycle and plugin mechanism (inspired by Umi) that manages both compile-time and runtime processes.
• Future-proof: Built on modern technologies like Vue 3.0 and Webpack 5, with ongoing exploration of Vite.

In your package.json, @fesjs/fes is the core dependency. Fes.js automatically registers dependencies based on their naming prefixes:

• Plugins/Presets: Dependencies starting with @fesjs/preset-, @fesjs/plugin-, @webank/fes-preset-, @webank/fes-plugin-, fes-preset-, or fes-plugin- are automatically registered as plugins or plugin sets.
• Builders: Dependencies starting with @fesjs/builder- are automatically registered as builders.

Plugins can hook into different stages of the Fes.js lifecycle:

• onPluginReady: Triggered when plugin initialization is complete. Note that config and paths are not yet parsed at this stage.
• onStart: Triggered before command registration. config and paths are available here.
• onGenerateFiles: Triggered before Webpack compilation. This is the recommended place for generating or writing temporary files.
• onExit: Triggered when the development server exits.