JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q50010F
  • License MIT

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.

Package Exports

  • webcompiler

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webcompiler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 | Discord

Build Status Coverage Status Code Climate Dependency Status devDependency Status npm version downloads

Webpack is an amazing tool, however it requires a lot of boilerplate to properly setup and configure, especially when you use it on more than one project.

ESLint is constantly updated, new rules are added, APIs are changed. Properly configuring it is a routine and time consuming task, which is completely impractical to perform on each project separately.

APIs are sometimes changed without any change in functionality (e.g. Babel 5 vs Babel 6).

This project aims to abstract all of those problems out of the development of applications.

Prerequisites

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

A note about Facebook Flow

Facebook Flow is a static analysis tool used to check your JavaScript code for possible errors at compile time.

It is very smart at understanding your program code, however you should not rely on it being smart enough to just understand your external dependencies too.

It can do that, the problem is that a typical NodeJS project can contain hundreds NPM modules, with thousands of JavaScript files.

It is a very complicated task, even for a tool that smart, to parse all of them and stay performant enough to not only be usable but useful as well.

Which is why it must not be allowed to even try to understand any files that reside in a node_modules directory.

Interface Files must be used instead.

You can find examples of such interface files, as well as the interface file for the tool itself, in the interfaces directory.

Installation

npm i webcompiler --save-dev

Production builds

By default all compilation is done in development mode.

If you wish to compile for production just set the NODE_ENV environment variable to "production", the following additional actions will be performed by the compiler:

  1. advanced compilation time optimizations
  2. minification (only fe in production mode)
  3. g-zip compression (only fe in production mode)

Important!

The resulting JavaScript and CSS files from fe in production mode 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');).