kaba

A build system, specifically designed for the needs and requirements of Becklyn Studios, built on top of node-sass and webpack.

Supported Features

  • SCSS building + minification
  • Babel with the kaba-babel-preset
  • Typescript
  • ESLint
  • Stylelint
  • Preact support
  • Source Maps

Installation

Use npm to install kaba locally in your project:

yarn add -D kaba
# or
npm install -D kaba

Usage

Just run the executable:

npx kaba
# or
./node_modules/.bin/kaba

CLI Arguments 

npx kaba --dev
parameters
nametypedescription
--devboolDev mode. Equivalent to --debug --watch --lint (short: -d)
--debugboolBuilds the file in debug mode (non-minified and with env development).
--analyze-bundlesboolOpens the bundle analyzer.
--analyzeboolAnalyzes and lints the code. Should be used in CI.
--watchboolStarts the file watcher.
--lintboolLints all compiled files.
--helpboolPrints the help.
--versionsboolPrints the version information. (short: -V)
--verboseboolDisplays all errors in the runner / config file with stack trace.

Source Maps

Source maps are always built, either as hidden source map file or as inlined source map in --debug.

Configuration

First, create a webpack.config.js in the root of your project. Load kaba and export the generate config:

const Kaba = require("kaba");

module.exports = (new Kaba())
    .addEntries({
        app: "assets/js/app.js"
    })
    .extractSharedEntry()
    .getWebpackConfig();

Configuration Methods

.addEntries(mapping)

Defines the entry points for the builds. Similar to webpackConfig.entry. Can add both JavaScript and Sass entries.

kaba.addEntries({
    app: "assets/js/app.js",
    page: "assets/js/page.js",
    test: "assets/scss/test.scss",
});
parameters
nametypedescription
mappingObject<string,string>The mapping object defining the entry points.

.addJavaScriptEntries(mapping)

Defines the JavaScript entry points for the webpack builds. Similar to webpackConfig.entry.

kaba.addJavaScriptEntries({
    app: "assets/js/app.js",
    page: "assets/js/page.js",
});
parameters
nametypedescription
mappingObject<string,string>The mapping object defining the entry points.

.addSassEntries(mapping)

Defines the Sass entry points. Similar to webpackConfig.entry.

kaba.addSassEntries({
    test: "assets/scss/test.scss",
});
parameters
nametypedescription
mappingObject<string,string>The mapping object defining the entry points.

.setExternals(externals)

Adds the given imports as externals. See webpackConfig.externals for details.

kaba.setExternals({
    routing: "window.Routing",
});
parameters
nametypedescription
externalsObject<string,string>The mapping for externals.

By default no externals are registered.

.disableModuleConcatenation()

Disables the module concatenation plugin in webpack.

kaba.disableModuleConcatenation();

.setOutputPath(outputPath)

Sets the output path where all compiled files will be stored. Is relative to cwd(). See webpackConfig.output.path (except that the path is already joined with cwd()).

kaba.setOutputPath("build");
parameters
nametypedescription
outputPathstringThe output path relative to cwd() (default: "build").

.setPublicPath(publicPath)

Sets the public path for dynamic module loading. See webpackConfig.output.publicPath for details.

kaba.setPublicPath("/assets/");
parameters
nametypedescription
publicPathstring(default: "/assets/")

.setBrowserList(list)

Sets the browser list for autoprefixer. See the browserlist docs for details about the format.

kaba.setBrowserList(["last 2 versions", "IE 11"]);
parameters
nametypedescription
liststring[]The browser list to use (default: ["last 2 versions", "IE 11"]).

.enableSassNodeModulesIncludePaths()

Normally, node_modules libraries can just be loaded by prepending them with ~:

@import "~mojave/reset";

Some libraries don’t use this convention however and just import directly from node_modules. This setting can be compatible with these libraries.

kaba.enableSassNodeModulesIncludePaths();

.setJavaScriptDependenciesName(name)

Sets the filename of the JavaScript dependencies file. This file can be read and used by Assets Bundle, for example.

kaba.setJavaScriptDependenciesName("_deps.json");
parameters
nametypedescription
namestringoptional The name of the file. Default is _dependencies.json.

.enableTypeScript(compileJs)

Deprecated since version 7.3: TypeScript will be enabled by default with v8.0 and the method .enableTypeScript(compileJs) has been removed.

Enables TypeScript support for .ts(x) files. If the compileJs flag is true, both .ts and .js are compiled via TypeScript.

kaba.enableTypeScript(compileJs);
parameters
nametypedescription
compileJsbooleanoptional Whether to compile .js files via TypeScript as well. Default is false.
Table of Contents