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.

Prerequisites

1. Facebook Flow (0.12+)
2. SCSS-Lint

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

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

[include]

[libs]

[options]
suppress_comment=.*@noflow.*

Installation

npm i webcompiler --save

Exposes 3 main functions

1. webJS - lints, type-checks, compiles, packages, minifies and gzips JavaScript for the browser (production ready + Source Maps)
2. nodeJS - lints, type-checks and compiles JavaScript for NodeJS
3. webSASS - lints, compiles, packages, adds vendor prefixes, minifies and gzips SASS for the browser (production ready + Source Maps)

With the same signature

(inPath: string, outPath: string, onCompile: Function = Function.prototype,
 callback: Function = Function.prototype, ...lintPaths: Array<string>): void;

Arguments

1. inPath - the source file path
2. outPath - the path to the compiled output file
3. onCompile - an optional function to execute after each successful compilation
4. callback - an optional function that is executed after the first successful compilation, can accept one argument - an optimized compiler function that can be used for continuous compilation of the same resource (a good candidate for use with a watcher)
5. ...lintPaths - the rest of the arguments, if any, are the paths to files as well as directories that you want the linter to check (the source file being compiled is included automatically)

Example usage

import {webJS} from 'webcompiler';
import watch from 'simple-recursive-watch';

webJS('lib/app.js', 'public/script.js', function () {
  // notify LiveReload of the file change
  lr.changed({body: {files: ['script.js']}});
}, function (compiler) {
  // automatically invoke the same compiler if any of the JavaScript files change
  watch('lib', 'js', compiler);
}, 'lib');

Important!

The resulting JavaScript and CSS files from webJS and webSASS 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 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 Core are used to automatically add the browser vendor prefixes to the generated CSS
9. Clean-css is used to compress the CSS