Skip to content

bullhorn/express-compile

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

express-compile

express-compile is middleware that compiles JS and CSS on the fly within your express application. This project is based off electron-compile project and uses the same compilers.

For JavaScript:

  • JavaScript ES6/ES7 (via Babel)
  • TypeScript
  • CoffeeScript

For CSS:

  • LESS
  • Sass/SCSS

For HTML:

  • Jade

For JSON:

  • CSON

How does it work? (Slightly Harder Way)

Put this at the top of your Express app:

import {Compiler} from 'express-compile';

app.use(Compiler({
    root: '.',
    cwd: 'public',
    paths: ['public/**/*'],
    ignore: ['public/node_modules/**/*'],
    ignoreStyleCache: true
}));
app.use(express.static('/public'));

I did it, now what?

From then on, you can now simply include files directly in your HTML, no need for cross-compilation:

<head>
  <script src="main.coffee"></script>
  <link rel="stylesheet" href="main.less" />
</head>

or just require them in:

require('./mylib')   // mylib.ts

Something isn't working / I'm getting weird errors

express-compile uses the debug module, set the DEBUG environment variable to debug what express-compile is doing:

## Debug just express-compile
DEBUG=express-compile:* npm start

## Grab everything except for Babel which is very noisy
DEBUG=*,-babel npm start

How do I set up (Babel / LESS / whatever) the way I want?

If you've got a .babelrc and that's all you want to customize, you can simply use it directly. express-compile will respect it, even the environment-specific settings. If you want to customize other compilers, use a .compilerc file. Here's an example:

{
  "application/javascript": {
    "presets": ["stage-0", "es2015", "react"],
    "sourceMaps": "inline"
  },
  "text/less": {
    "dumpLineNumbers": "comments"
  }
}

.compilerc also accepts environments with the same syntax as .babelrc:

{
  "env": {
    "development": {
      "application/javascript": {
        "presets": ["stage-0", "es2015", "react"],
        "sourceMaps": "inline"
      },
      "text/less": {
        "dumpLineNumbers": "comments"
      }
    },
    "production": {
      "application/javascript": {
        "presets": ["stage-0", "es2015", "react"],
        "sourceMaps": "none"
      }
    }
  }
}

The opening Object is a list of MIME Types, and options passed to the compiler implementation. These parameters are documented here:

How can I precompile my code for release-time?

express-compile comes with a command-line application to pre-create a cache for you.

Usage: express-compile --appDir [root-app-dir] paths...

Options:
  -a, --appdir  The top-level application directory (i.e. where your
                package.json is)
  -v, --verbose  Print verbose information
  -h, --help     Show help

Run express-compile on all of your application assets, even if they aren't strictly code (i.e. your static assets like PNGs). express-compile will recursively walk the given directories.

express-compile --appDir /path/to/my/app ./src ./static

About

middleware that compiles JS and CSS on the fly within your express application

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published