FFBT: Fluix Frontend Build Tools
CLI utility for compiling, testing and linting your TypeScript code.
npm i ffbt
- Webpack (With preconfigured cache busting for production builds)
- Webpack Dev Server
- Node-Sass with import-once plugin
- Karma + Jasmine (With Console and TeamCity reporters)
- Tslint + Stylelint with ready to use configs (linters dir)
- WebWorkers support (experimental, will be stable in 1.0)
What I need to do to build my project?
npm i ffbt
- Create an entrypoint for your app. Call it
- Create a
ffbt-config.jsfile near the
moduleexports =profiles:dev:// custom variables for index.html in DEV profileproduction:// custom variables for index.html in PRODUCTION profilesupportedBrowsers: "last 2 versions" // strictly supports Autoprefixer's config formatvendorContents:// list of packages in your vendor bundlealiases:// aliases, if you need themnoParse:// list of absolute pathsbuildPath: "./public/build" // path to your dist directory//You can specify the path to your custom lint config if the default config doesn't fit your needstsLintConfigPath: ""styleLintConfigPath: ""devServer:// Here you can override DevServer's settings.// FFBT proxies this object directly to the Webpack config// More info:moveBuildArtifactsToSubfolder: "build" // you can move your compiled js, css and images to the subdirectory;
dev. Watches your files and recompile them after each change
dev-server. The same as
dev, but starts the local development server.
build. Builds the project for production and staging servers
test. Run unit tests
lint-style. Lints SASS files
lint-ts. Lints TS files
Each command has the following options:
ci. Enabling CI mode, now it useful only in pair with the test command. It changes the Karma output by running the Teamcity reporter
output. You can override buildPath config property via this option
analyze. Runs webpack-bundle-analyzer plugin that displays a map of your dependencies
Info for developers
I Want to make an improvement/fix, but I don't understand how it works. What I have to do?
Firstly, you need to open the
cli/cli.js file. It's the main entrypoint for all commands.
Each CLI command executes the corresponding command file.
There are two types of command:
lint. The commands are just the JS functions.
buildcommands (dev, dev-server, build, test) need the webpack to work, so they received the build config as a first parameter
lintcommands doesn't need the build config, so they received a
library root pathand a
working directory pathas a parameters
The command functions return nothing. You can do anything inside them. They are just containers for commands code
Command files are stored in
The lint commands are stored deeply in