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 3 main classes

DevServer - A lightweight development server that rapidly recompiles the JavaScript and SASS files when they are edited and updates the page.

interface DevServer {
  constructor(script: string, style: string, devDir: string, port: number = 3000, react: boolean = true);
  watchSASS(watchDir: string);
  watchJS();
  run(watchDir: string);
}

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. script - a full system path to a JavaScript file
2. style - a full system path to a SASS file
3. devDir - a full system path to a directory in which to put any compiled development resources
4. port - a port at which to start the dev server
5. react - false to disable the react hot loader plugin
6. watchDir - the directory in which to watch for the changes in the SASS files
7. inPath - a full system path to the input file/directory
8. outPath - a full system path to the output file/directory
9. callback - a callback function, executed after the successful compilation
10. lintPaths - paths to files/directories to lint (the input file is included automatically)

Example usage

import {DevServer} from 'webcompiler';
import {join} from 'path';

const rootDir = join(__dirname, '..'),
    devDir = join(rootDir, 'development'),
    server = new DevServer(join(devDir, 'script.js'), join(devDir, 'app.scss'), devDir);

server.run(rootDir);

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, ESLint-plugin-React and ESLint-plugin-Lodash 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
10. Watchman is used to watch for directory changes