xeira

One web-dev-stack command to rule them all

xeira aims to group all the Web Dev stack processes you need from a single, zero config command. Under the hoods, it calls well known, community-trusted tools:

• linting trough ESLint
• transpiling with Babel
• minifying with Uglify
• bundling with Rollup
• serving dev servers both with Rollup or Nollup
• testing with Mocha and Chai
• building static site for your package trough arredemo

It supports working with monorepos.

Future versions will try to add more tools (so, for example, letting you to pick your preferred bundler). It's also very opinionated, using pretty standard configurations.

Install

  npm i -D xeira

Commands

xeira usage is always like:

  npx xeira <command> [...options] [...config] [--filter]

xeira commands will provide some particular [...options] depending on each case.

[...config]: you can also pass any value from xeira's config as parameter, taking priority over xeira.json file (if any).

--filter: working with monorepos?

help

In case of doubts, --help is always there for you:

  npx xeira --help
  npx xeira <command> --help

init

This one-shot command will guide you in the creation of xeira's config file (xeira.json).

  npx xeira init [--force] [config] [--filter]

If --force=true, you will be asked about values even if they already exist on your xeira.json.

This command will also update some values of your package.json file (just... trust xeira!).

lint

  npx xeira lint [--folder=./] [config] [--filter]

transpile

  npx xeira transpile [--source_folder=./src] [config] [--filter] [--watch]

bundle

  npx xeira bundle [config] [--filter] [--watch]

test

  npx xeira test [--files] [--timeout] [config] [--filter]

dev

  npx xeira dev [--host] [--port] [config] [--filter]

demo

  npx xeira demo [--init [--force]] [--port] [config] [--filter]

version

  npx xeira version [--type | --number] [config] [--filter]

static site

  npx xeira site [config] [--filter]

Configuration

Alongside your package.json, in your main folder, xeira.json will store your xeira' configuration.

This file may be automatically generated by running init command.

Notice this xeira.json is not mandatory. You can specify [options] when running any xeira command. For example, you could do the next, and xeira will just work as expected:

  npx xeira bundle --source_index=./src/index.mjs --bundle_folder=./dist --verbose=true

Existence of a xeira.json may be a good idea, though:

• more explicit (and transparent) usage of xeira
• simpler npm run scripts!

product

Can be package (default) or app. It determines how bundle files are made (and which ones).

target

Can be node (default), browser or both. It determines how bundle files are made (and which ones).

source_index

Entry point to your source code. Default value is ./src/index.js.

linter

Which tool to use for linting your code. Default is eslint.

transpile_folder

Destination folder for your transpiled code. Default is ./lib.

transpiler

Tool in charge of transpiling. Default is babel.

minifier

Tool in charge of minifying transpiled code and bundled files. Default is uglify.

If you wanna disable it for transpiling, just specify null.

bundle_folder

Destination folder for bundle files. Default is ./dist.

bundle_name

Base name for the built bundles. Default value is package.json's name field.

bundle_extension

xeira will bundle output files based on target prop. But if you want to bundle a single output format, you may pass bundle_extension. Possible values are: cjs, mjs, mjs.min, umd, umd.min, umd.bundle, umd.bundle.min, iife, iife.min, iife.bundle, iife.bundle.min.

bundle_inline_dynamic_imports

Sets the rollup's inlineDynamicImports option. true by default.

If false, each bundle will consist on several files (xeira will create subdirectories, like ./dist/cjs, ./dist/mjs...).

umd and iife bundles cannot be split. So, if your target is browser, this option will be ignored.

bundle_node_polyfill

If true, Polyfills Node builtin modules for your rollup bundle. It applies just to esm, umd and iife bundles.

It is false by default.

If xeira's output shows a warning like this:

Creating a browser bundle that depends on Node.js built-in modules ("node:<module>")...

Consider setting this option as true or, if possible, try to remove your dependencies on Nodes modules.

bundler

Tool in charge of source code bundling. Default is rollup.

test_folder

Folder where your test files are at. Default is ./test.

dev_server

Tool in charge of bundling, serving and watching your dev app. Possible values are rollup (default) or nollup.

demo_mode

Mode for demo --init command. Default is auto.

demo_demoer

Tool in charge of bundling, serving and watching your demo app. Possible values are rollup (default) or nollup.

verbose

If true, xeira will just print more logs in the console output. Default is false.

Working with monorepos

When working with monorepos, you may --filter folders to apply the command on.

When using this option, by default, packages folder is inspected. So, for example:

  npx xeira lint --filter=react-*

will filter all the ./packages/react-* folders.

If you want to search on another folder, just specify it with a relative path. So:

  npx xeira lint --filter=./custom_folder/react-*

will filter all the ./custom_folder/react-* folders.

API

xeira's commands are also available as JS calls.

import {
  xeiraInit,
  xeiraLint,
  xeiraTest,
  xeiraDemo,
  xeiraTranspile,
  xeiraBundle,
  xeiraVersion,
  xeiraSite
} from 'xeira'


await xeiraInit(options)
await xeiraLint(options)
await xeiraTest(options)
await xeiraDemo(options)
await xeiraTranspile(options, callback)
await xeiraBundle(options, callback)
await xeiraVersion(options)
await xeiraSite(options)

options parameters are the same as for the commands.

callback param is useful if you call transpile or bundle in watch mode. It must be an asyncfunction, and will be called accordingly.

Others

Define aliases just once

You may have find yourself having to duplicate your aliases configuration:

• first on bundler files (.babelrc or similar)
• then on your editor's config (jsconfig.json or similar)

With xeira, just do it once. Define your aliases just for your editor. In your root folder, file jsconfig.json:

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "*": ["src/*"],
        "test/*": ["test/*"],
        "underscore": ["lodash"]
      }
    }
  }

And xeira will use them both for transpiling and bundling.