uxi-cli

jest + eslint + webpack + babel + webpack-dev-server

• jest + enzyme + snapshot
• eslint (airbnb)
• webpack 4
• webpack-dev-server
• babel, babel-loader:
  • latest ('env', 'react', 'stage-0')
  • react jsx
  • object spread

install:

• npm i uxi-cli

print help:

$ node_modules/.bin/uxi-cli:

Usage:

in the package.json:

  "scripts": {
    "help": "uxi-cli",
    "dev": "uxi-cli dev",
    "build": "uxi-cli build",
    "lint": "uxi-cli lint",
    "test": "uxi-cli test",
    "test:coverage": "uxi-cli test:coverage",
    "test:watch": "uxi-cli test:watch",
    "pack": "uxi-cli pack",
  }

Commands:

• test
• test:watch
• test:coverage
• lint
• build
• dev
• pack

Default behaviour:

• test scans a target directory (default to .src/) for files under a folder named __test__ or files that end in .test.js

• test and lint default to targeting ./src folder, but you can say ortherwise by passing the path as the first argument:

  $ uxi-cli lint ./myFolder or $ uxi-cli test ./source

• build defaults to using ./src/index.js as source and .build/app.js as output

Extending config:

To overwrire webpack config, or some part of it, for example for the dev command, create a uxi.dev.extend.js or a uxi.build.extend.js for the build command. uxi-cli will pick up this file if it exists.

The file must export, as default, a function. This function will be passed the default uxi-cli config for the relevant command. You can extend it at this moment and then return it.

For instance, here's the extended config for the uxi doc website:

const path = require('path');

module.exports = (config) => {
  // here we're ading 'raw-loader' for md files
  config.module.rules.push({
    test: /\.md$/,
    use: 'raw-loader',
    exclude: /node_modules/,
  });

  // custom port for dev server:
  config.devServer.port = 8989;
  config.entry[1].replace(/(:\d*)$/, ':8989');

  // adding aliases
  config.resolve.alias = {
    uxi: path.resolve(__dirname, '../src'),
    'styled-components': path.resolve(__dirname, 'node_modules/styled-components'),
    'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
    'react': path.resolve(__dirname, 'node_modules/react'),
  };

  return config;
};

uxi-cli dev

This is a pre-packaged webpack configuration to get started quickly with any React application.

Please look at the examples folder to see how you can customize the webpack configuration.

Webpack dev-server:

- At the root of the project, create an index.html containg a element with an id of `root` for react to attach to be used by dev-server
  ```HTML
  <div id="root"></div>
  ```

- webpack-dev-server contentBase default is '/'
- default port is `3100`

uxi-cli build

Building your application for a production usage.

uxi-cli pack

The command uxi-cli pack will help you if you want to publish a NPM package. It will build the src folder and will copy the appropriate files that should be present for a valid NPM package (package.json and README.md).