Alexios

A lightweight, powerful and zero-configuration React cli based on Webpack and babel.

查看中文版

Why

Alexios is a cli that allows you to quickly start a React project with the minimum cost, almost zero configuration. Based on Webpack 4 and Babel 7, provide a HAPPY development experience.

Docs

• CHANGE_LOG

Features

• 🌟 Out of the box, zero configuration to start.
• 🌟 Contained dev, build and watch commands, support babel, css-modules, mock, hmr, etc.
• 🌟 JSON mode configuration, keeps the API of webpack to the greatest extent, exposing that JS interface that can meet the additional expansion needs.
• 🌟 Friendly graphical console and error information.

Getting started

## Intall locally (globally is not recommmended)
> npm install alexios --save-dev

## Install react and react-dom
> npm install react react-dom --save-dev

// Echo in src/index.js
import Alexios from "alexios";

const App = () => <h1>Hello World</h1>;

const alexios = new Alexios({
  node: App,
});

alexios.launch();

## Start the development server
> alexios dev

## or

## Build your application
> alexios build

Launcher

You can use Alexios's built-in launcher to quickly render your first React node, or you can replace it in any way you like. Alexios's launcher just provides you with a convenient way.

Using Alexios Launcher:

// Import the Alexios launcher's constructor
import Alexios from "alexios";

// Your first React Component
const App = () => <h1>Hellow World</h1>;

// Create launcher instance
const alexios = new Alexios({
  node: App,
});

// Launcher
alexios.launch();

Launcher instantiation parameters:

| name | description | required | | --------- | ------------------------------- | -------- | | elementId | root element id, default root | no | | node | root React Component | yes |

Instance methods:

| name | description | | ------ | -------------- | | launch | launch the app |

If you don't want to use the Alexios launcher, you can do this:

import React from "react";
import ReactDOM from "react-dom";

const App = () => <h1>Hello World</h1>;

// Confirm that the id does exist in HTML
ReactDOM.render(<App />, document.getElementById("root"));

Commands

alexios dev

Start the development server.

Optional params:

## custom port number（if the port is occupied, is will +1 util the port is free）
> alexios dev --port=9999

## open you browser automaticly
> alexios dev --open=true

alexios build

Build your application.

Optional params:

## analyze the package detail, based on BundleAnalyzerPlugin
> alexios build --analyze=true

alexios watch

Watch your file or folder changes, directly to you custom commands or restart the devServer.

## Watch single file and run custom command.
> alexios watch --file=['src/index.js, node a.js']

## Watch single file and run multiple custom command.
> alexios watch --file=['src/index.js, node a.js && node b.js']

## Watch multiple file.
> alexios watch --file=['src/index.js, node a.js', 'src/main.js, node a.js']

## Watch and restart devServer, use a special string '$RESTART$'.
> alexios watch --file=['src/index.js, $RESTART$']

## Watch folder.
> alexios watch --folder=['src/pages, node a.js']

Configuration

If you need a custom configuration, ehco the src/.alexiosrc.js:

module.exports = {
  // Optional
};

Optional:

| Name | Description | | --- | --- | | entry | Project entrance | | resolveExtraExtensions | Extra support for omitted extensions | | extraAlias | Set extra path alias | | outputPath | Packaging output path | | disableHash | Disable packaged hash | | publicPath | Public resource path | | externals | Package exclusions | | devtool | Development tool mode | | html | Configuration of html file | | clearConsole | Compile clear console |

entry

Specify the entry of the program, same as webpack.entry

Default as: <projectPath>/index .

resolveExtraExtensions

Specifies additional extensions that can be omitted.

For example:

module.exports = {
  resolveExtraExtensions: [".json", ".png"],
};

By default, [".js", ".ts", ".jsx", ".tsx"] is preset, and it is unnecessary to specify it again.

extraAlias

Specify additional path aliases.

For example:

module.exports = {
  extraAlias: {
    "@component": "src/component",
    "@utils": "src/utils",
  },
};

{ "@": "src" } is preset by default.

outputPath

Specifies the path to package the output file, same as webpack.output.path.

Default as: <projectPath>/dist .

disableHash

By default, hash is enabled for packed files. If you need to disable it, set this to true.

For example:

module.exports = {
  disableHash: true,
};

publicPath

The path of the public resource of the packed file generally does not need to be set. If there are special requirements, you can specify it.

For example:

module.exports = {
  publicPath: "/a",
};

Default as / .

externals

Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.

Same as webpack.externals.

devtool

Choose a style of sourceMap, same as webpack.devtool.

Default as: eval-source-map .

html

html

clearConsole

clearConsole

TypeScript

We provide the default basic configuration, you don't have to provide additional configuration:

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "sourceMap": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "allowJs": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules", "dist"]
}

If you need to customize, echo tsconfig.json in the root path, It will override our default configuration.

For more detail, click here

Why called Alexios

Alexios, protagonist of "Assassin's Creed: Odyssey" by Ubisoft. Αλέξιος, in ancient Greek it means "defender".