webcompiler

Lint, type-check, compile, package and gzip JavaScript (ES6 + Flow static types + JSX), for the browser as well as NodeJS; lint, compile, auto-prefix, minify and gzip SASS.

Project Home API Docs

Prerequisites

1. Facebook Flow
2. SCSS-Lint
3. Watchman

Important! Create a .flowconfig file at the root of your project with the following contents:

[ignore]
.*/invalidPackageJson/*
.*/build/*
.*/node_modules/.*/test/*
.*/node_modules/.*/spec/*

[include]

[libs]

[options]
suppress_comment=.*@noflow.*

Installation

npm i webcompiler --save

Exposes 2 main classes

JS - lints, type-checks, compiles, packages, minifies and gzips JavaScript for the browser and NodeJS

interface JS {
  constructor(lintRules: Object = {});
  validate(inPath: string, lintPaths: Array<string>, callback: Function);
  feDev(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
  feProd(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
  beFile(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
  beDir(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
}

SASS - lints, compiles, packages, adds vendor prefixes, minifies and gzips SASS for the browser

interface SASS {
  constructor(excludeLinter: Array<string> = [], importOnceOptions: Object = {}, includePaths: Array<string> = []);
  validate(inPath: string, lintPaths: Array<string>, callback: Function);
  feDev(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
  feProd(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
}

Arguments

1. inPath - a full system path to the input file/directory
2. outPath - a full system path to the output file/directory
3. callback - a callback function, executed after the successful compilation
4. lintPaths - paths to files/directories to lint (the input file is included automatically)

Example usage

import {JS} from 'webcompiler';
import {DirectoryWatcher} from 'simple-recursive-watch';
import {join} from 'path';
import tinylr from 'tiny-lr';

var compiler = new JS(),
    lr = tinylr(),
    libDir = join(__dirname, 'lib'),
    webJS = compiler.feDev.bind(compiler,
      join(libDir, 'app.js'),
      join(__dirname, 'public', 'script.js'),
      function () {
        // notify LiveReload of the file change
        lr.changed({body: {files: ['script.js']}});
      }, libDir);

lr.listen(35729);

// compile at startup
webJS();
// automatically invoke the same compiler if any of the JavaScript files change
DirectoryWatcher.watch(libDir, 'js', webJS);

Important!

The resulting JavaScript and CSS files from feProd are gzip compressed for performance (see Gzip Components), so make sure to provide a "Content-Encoding" header to the browser (e.g. res.setHeader('Content-Encoding', 'gzip');).

Additional info

1. ESLint, babel-eslint, eslint-plugin-babel and ESLint-plugin-React are used to lint the JavaScript
2. Facebook Flow is used to type-check the JavaScript
3. Babel is used to compile the JavaScript
4. webpack is used to package the JavaScript
5. UglifyJS 2 is used to compress the JavaScript
6. SCSS-Lint is used to lint SASS
7. node-sass and Import Once are used to compile SASS
8. PostCSS and Autoprefixer are used to automatically add the browser vendor prefixes to the generated CSS
9. Clean-css is used to compress the CSS