FFBT: Fluix Frontend Build Tool 🛠

A tool to build a Typescript based web app without pain.

You don't need to install and configure Webpack with a lot of plugins for Typescript, SASS, etc. Everything is already preconfigured for you

Quick start

npx ffbt-init [PATH_TO_NEW_PROJECT]

What's inside?

• Webpack with configurations for development and production environments
• Dev server with live reload
• Typescript
• CSS and SASS with Autoprefixer
• import-once plugin for SASS (removes duplicated imports across the project during compilation)
• TSlint
• Stylelint
• Tools for analyzing bundle structure

Configuration

Usually you don't need config. If you need to change default behaviour - see the config structure below

Create a file with name ffbt-config.js in the root of your project (near the package.json file)

Config structure:

module.exports = {
    // FFBT is the environment-centric tool, almost all configuration is described in environments
    // You can extend environments from each other
    // All environments extend "default" automatically unless you specify "_extends" property.
    // See the example below
    environments: {
        default: {
            // It contains default values for all flags in the environment.
            // See a list of all flags in the table below.

            // Use it if you want to propagate values to all environments
        },
        development: {
            // Used by default in `ffbt dev` command
        },
        production: {
            // Used by default in `ffbt build` command
        },
        customProduction: {
            // Custom env extended from the production. You can have as many custom envs as you need
            // Usage example: ffbt build --env=customProduction
            // Environment extension is a shallow merge

            // For example, you want to make a bundle for production but without source maps
            _extends: "production",
            sourceMapType: "(none)",
        }
    },
    aliases: {
        // Aliases for the modules
        // See resolve.alias in Webpack docs
    },
    noParse: [
        // Restrict parsing of the specific modules
        // Can help if you want to tune build performance
        // See module.noParse in Webpack docs
    ],
    configureWebpack: (projectConfig) => {
        // Hook for customizing Webpack config
        // You have access to the selected environment and helper for path calculation
        // Just return the part of Webpack config and it will be merged with the main config automatically
    },
};

Environment config flags

Name | Description | Type --- | --- | --- browserlist | Currently used only in CSS Aftoprefixer. | string Syntax Docs outputPath | Destination path, your bundle will be created here | string sourceMapType | Source map type. | string Docs staticFilesSizeThresholdKb | All assets with a size lower than the limit will be inlined, otherwise, they will be copied to the destination folder as is | number (Kilobytes) entrypointName | An entrypoint file name without ts/tsx extension | string tsconfigPath | Path to tsconfig file | string devServerConfig | Settings for the WebpackDevServer. | object Docs buildVersion | A string represents the version of the bundle. Accessible in your code via FFBT_BUILD_VERSION constant | string showBuildNotifications | Enable/Disable build and type checker system notifications | boolean enableTypeChecking | Enable/Disable typechecking for Typescript | boolean cleanDistFolderBeforeBuild | The name speaks for itself | boolean optimizeBundle | Minify and three-shake the output | boolean enableCacheBusting | Add hashes to the output file names | boolean buildStatsStyle | Control what bundle information gets displayed | minimal, normal, verbose noParse | Webpack's module.noParse (Docs)| [] aliases | Webpack's resolve.alias (Docs) | {}

Config example

module.exports = {
    environments: {
        default: {
            browserlist: "last 2 versions",
            outputPath: "dist",
            staticFilesSizeThresholdKb: 10,
            showBuildNotifications: true,
            enableTypeChecking: true,
            cleanDistFolderBeforeBuild: false,
            devServerConfig: {
                port: 9393,
            },
        },
        development: {
            sourceMapType: "eval",
            entrypointName: "index"
        },
        production: {
            sourceMapType: "nosources-source-map",
            optimizeBundle: true,
            showBuildNotifications: false,
            enableTypeChecking: false,
            cleanDistFolderBeforeBuild: true,
            entrypointName: "index.prod"
        },
    },
    configureWebpack: () => {
        return {
            plugins: [
                new OfflinePlugin(),
            ]
        }
    }
};

Bundle analysis

To analyze bundle just run ffbt dev|build --analyze We use the following webpack plugins for analyzing:

• bundle-stats-webpack-plugin
• webpack-bundle-analyzer

Once you run the analyze command the generated report from webpack-bundle-analyzer will be opened. You can find the report from bundle-stats-webpack-plugin inside the bundle-report folder inside your project.

Compare bundles

You can compare bundles

# use the current bundle as a base for comparison
BUNDLE_STATS_BASELINE=true ffbt build --analyze
# do some operations with bundle (add/remove libraries, etc.)
# run analyze again
ffbt build --analyze
# open bundle-report/bundle-stats.html and see the comparison