Express Variable lets you automatically transform CSS and JS in Express using Babel and PostCSS.
npm install express-variable
const express = require('express');
const expressVariable = require('express-variable');
const app = express();
app.use(expressVariable('public', {
js: {
plugins: [ /* babel plugins go here */ ],
presets: [ /* babel presets go here */ ],
sourceMaps: 'inline'
/* more babel transform options go here */
},
css: {
plugins: [ /* postcss plugins go here */ ],
map: {
inline: true
}
/* more postcss process options go here */
},
html: {
plugins: [ /* phtml plugins go here */ ]
/* more phtml process options go here */
}
}));
Transformations are cached by the original filename’s modified time.
Add Express Variable to your project:
npm install express-variable --save-dev
The first argument determines the directory being watched. The second option configures the transformers; pHTML, PostCSS, and Babel.
The html
option configures pHTML and its process options.
The html.fileExtensions
option configures which file extensions should be
intercepted by pHTML.
The html.index
option defines a specified directory index HTML file. Setting
this to false to disables directory indexing.
The css
option configures Babel and its process options.
The js.fileExtensions
option configures which file extensions should be
intercepted by PostCSS.
The js
option configures Babel and its transform options.
The js.fileExtensions
option configures which file extensions should be
intercepted by Babel.
The index
option configures the default HTML file loaded by a directory. By
default, index.html
is used. It can be disabled with false
or overridden by
passing in a new string.
The config
option provides the default configuration for html,
css, and js. If defined as a string, the configuration can be
loaded by files matching that string pattern as transformed by cosmiconfig.
The onReady
option defines a callback function to be run once all of the
configurations have finished loading. This function receives the mutatable
options used by Express Variable.
{
onReady(opts) {
// mutate opts here
}
}
The onHTML
option defines an asynchronous callback function to be run
whenever HTML is being transformed. This function receives the mutatable
options passed to Express Variable and returns the string response passed to
the browser.
{
onHTML(opts) {
// mutate opts here
// return the default response for HTML
return opts.defaultOnHTML();
}
}
The onCSS
option defines an asynchronous callback function to be run whenever
CSS is being transformed. This function receives the mutatable options used by
Express Variable and returns the string response passed to the browser.
{
onCSS(opts) {
// mutate opts here
// return the default response for CSS
return opts.defaultOnCSS();
}
}
The onJS
option defines an asynchronous callback function to be run whenever
JS is being transformed. This function receives the mutatable options used by
Express Variable and returns the string response passed to the browser.
{
onJS(opts) {
// mutate opts here
// return the default response for JS
return opts.defaultOnJS();
}
}