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
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'));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.tsexpress-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 startIf 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:
- Babel - http://babeljs.io/docs/usage/options
- CoffeeScript - http://coffeescript.org/documentation/docs/coffee-script.html#section-5
- TypeScript - https://github.com/Microsoft/TypeScript/blob/v1.5.0-beta/bin/typescriptServices.d.ts#L1076
- LESS - http://lesscss.org/usage/index.html#command-line-usage-options
- LESS - http://lesscss.org/usage/index.html#command-line-usage-options
- Jade - http://jade-lang.com/api
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 helpRun 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