estrattonbailey / alio

A little compiler utililty.

alio

A little compiler utility.

npm i -D alio

Features

1. glob & multi-entries
2. modern JS
3. modern CSS
4. live-reload
5. convenient CLI
6. extensible via presets

Usage

alio can be used programmatically, or via its built-in CLI.

CLI

Alio supports two commands:

alio build
alio watch

Entries should be specified next:

alio watch src/foo.js

And you can have more than one:

alio watch src/foo.js src/bar.js

Or use a glob:

alio watch src/*.js

Output is specified with a flag after your entries:

alio watch src/*.js --out dist/

CLI Usage

If installed locally to a project, define an npm script:

{
  "scripts": {
    "build": "alio build src/*.js --out /dist"
  }
}

Or use your local copy directly:

./node_modules/.bin/alio build src/*.js --out /dist

If you'd like to use as a globally installed binary, use npx:

npx alio build src/*.js --out /dist

Configuration

alio also accepts a config in place of CLI flags. Here's an example:

module.exports = {
  in: "src/*.js",
  out: "/dist",
  env: {
    API_KEY: process.env.API_KEY
  },
  alias: {
    "@": process.cwd()
  },
  banner: "/** Added to top of file */",
  reload: false
};

By default, it looks for alio.config.js in the current working directory. To specify a different config, use the --config flag:

alio --config ./alio.production.js

config.in

The entrypoint in alio is mapped directly to Webpack.

It supports a single file:

module.exports = {
  in: "src/foo.js"
};

A glob:

module.exports = {
  in: "src/*.js"
};

An object:

module.exports = {
  in: {
    foo: "src/foo.js"
  }
};

An array:

module.exports = {
  in: ["src/foo.js", "src/bar.js"]
};

Or a combo, as an array:

module.exports = {
  in: ["src/*.js", "public/util.js"]
};

config.out

The out prop is also mapped directly to Webpack.

By default, you can just specify a directory:

module.exports = {
  out: "/dist"
};

But for more control, you can supply a Webpack-compatible output object:

module.exports = {
  out: {
    filename: "[name].[hash].js"
  }
};

config.env

Accepts an object with keys and values, which are passed to Webpack's Define Plugin.

config.alias

Creates handy aliases for imports. See Webpack docs.

config.banner

Adds a string to the top of all compiled files.

config.reload

In watch mode only, inserts a tiny live-reload script that will refresh you browser every time a file change is made.

Presets

In alio, presets are functions that apply groups of related settings. They make it easy to use alio in different contexts – like the web or node – and using different technologies – like PostCSS or SASS.

To use a preset, first install it:

npm i @alio/preset-postcss

Then reference it using its shortname:

module.exports = {
  presets: ["postcss"]
};

Available Presets

• @alio/preset-web - applies a solid foundation for most basic modern web needs
• @alio/preset-node - for compiling programs to run in node.
• @alio/preset-serverless - applies some helpful transforms specific to. serverless functions. Should be used in conjuction with @alio/preset-node.
• @alio/preset-postcss - allows you to import a CSS file and output a transpiled version according to your out settings.
• @alio/preset-sass - supports scss and sass dialect.
• @alio/preset-tailwind - enables usage of Tailwind CSS.

Creating Presets

Coming soon. For now, have a look at the existing presets in this repo for examples.

Multi-config

alio supports multiple configs using the config file as well. This allows you to run two or more compilation tasks at the same time.

module.exports = [
  {
    in: "frontend/index.js"
  },
  {
    in: "backend/index.js"
  }
];

API

Your can also use alio in a node script.

First, pass a config object, or array of configs, to the alio factory:

const alio = require("alio");

const bundle = alio([{ in: "src/foo.js" }]);

Then, call either build or watch:

bundle.build();

License

MIT License © Eric Bailey

alio's Issues

clean up server/listener creation so it can be tested

alio/packages/alio/index.js

Line 14 in afe9fb8

// TODO write tests for reloading

re-evaluate best map options + preset?

alio/packages/alio/lib/mergeConfig.js

Line 21 in afe9fb8

devtool: 'eval-source-map',

allow for different ports

Originated here: the-couch/slater#26

add tailwind preset

the-couch/slater#32

presets should be last evaluated

alio/packages/alio/lib/mergeConfig.js

Lines 60 to 72 in afe9fb8

	if (!watch) {
	wc.mode = 'production'
	wc.devtool = 'nosources-source-map'
	wc.optimization = {
	minimizer: [
	new TerserPlugin({
	terserOptions: {
	mangle: false
	}
	})
	]
	}
	}

docs for preset creation

alio/packages/alio/lib/mergeConfig.js

Line 58 in afe9fb8

if (conf.presets) resolvePresets(conf.presets, { watch }, wc)

map return value only, do side-effects in separate loop

Just a code quality thing

alio/packages/alio/index.js

Lines 19 to 52 in afe9fb8

	const configs = confs
	.map(conf => {
	if (conf.reload) {
	conf.__port = port++
	conf.banner = conf.banner || ''
	conf.banner += clientReloader(conf.__port)
	}
	return conf
	})
	.map(conf => mergeConfig(conf, true))
	.map(([ conf, wc ]) => {
	if (conf.modify) conf.modify(wc)
	return [ conf, wc ]
	})
	.map(([ conf, wc ]) => {
	const hash = Object.keys(wc.entry).join(':')
	if (conf.reload) {
	servers[hash] = require('http').createServer((req, res) => {
	res.writeHead(200, { 'Content-Type': 'text/plain' })
	res.write('socket running...')
	res.end()
	}).listen(conf.__port)
	sockets[hash] = require('socket.io')(servers[hash], {
	serveClient: false
	})
	}
	process.env.DEBUG && console.log(JSON.stringify(wc, null, ' '))
	return wc
	})

should allow for user-land presets

If a user passes in a full path, should try to resolve that after the @alio scope, then fail. Should also allow a node module instance here.

alio/packages/alio/lib/resolvePresets.js

Lines 6 to 17 in afe9fb8

	presets.map(p => {
	try {
	const preset = require(path.join(cwd, './node_modules', `@alio/preset-${p}`))
	preset()(wc, args)
	} catch (e) {
	log.hydrate({
	configError: [
	`cannot find '${p}' preset, please make sure it's installed`
	]
	})()
	}
	})

should include an emitter for watch mode

alio/packages/alio/index.js

Lines 87 to 96 in afe9fb8

	return {
	close () {
	return new Promise(r => {
	compiler.close(() => {
	closeServer()
	r()
	})
	})
	}
	}

docs for backdoor

alio/packages/alio/index.js

Line 103 in afe9fb8

if (conf.modify) conf.modify(wc)