Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ffbt

Package Overview
Dependencies
Maintainers
7
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ffbt

Build a Typescript app without pain

  • 1.0.0-beta.8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12
increased by500%
Maintainers
7
Weekly downloads
 
Created
Source

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

NameDescriptionType
browserlistCurrently used only in CSS Aftoprefixer.string Syntax Docs
outputPathDestination path, your bundle will be created herestring
sourceMapTypeSource map type.string Docs
staticFilesSizeThresholdKbAll assets with a size lower than the limit will be inlined, otherwise, they will be copied to the destination folder as isnumber (Kilobytes)
entrypointNameAn entrypoint file name without ts/tsx extensionstring
tsconfigPathPath to tsconfig filestring
devServerConfigSettings for the WebpackDevServer.object Docs
buildVersionA string represents the version of the bundle. Accessible in your code via FFBT_BUILD_VERSION constantstring
showBuildNotificationsEnable/Disable build and type checker system notificationsboolean
enableTypeCheckingEnable/Disable typechecking for Typescriptboolean
cleanDistFolderBeforeBuildThe name speaks for itselfboolean
optimizeBundleMinify and three-shake the outputboolean
enableCacheBustingAdd hashes to the output file namesboolean
buildStatsStyleControl what bundle information gets displayedminimal, normal, verbose
noParseWebpack's module.noParse (Docs)[]
aliasesWebpack'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:

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

Keywords

FAQs

Package last updated on 26 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc