Build tools for FE

Universal front-end automation tools

Install

npm install qu-build -g

Usage

Usage: qu-build [options]

Options:

    -v, --version                output the version number
    -o, --output-path <path>     output path
    -w, --watch [delay]          watch file changes and rebuild
    -d, --dev                    start develop server
    -p, --port [port]            develop server port, default is 8080
    -b, --build                  build this project
    -t, --test                   test this project, use jest
    -c, --component <component>  quickly create components
    --pwa                        use pwa
    --hash                       build with hash and output map.json
    --publicPath <publicPath>    publicPath for webpack
    --devtool <devtool>          sourcemap generate method, default is null
    --config <path>              custom config path, default is webpack.config.js
    --cwd <path>                 custom context path
    --no-compress                build without compress
    --json                       running webpack with --json, ex. result.json
    --verbose                    run with more logging messages.
    --init <template> <project>  generate a new project from a template. template: [vue, pages]
    -h, --help                   output usage information

Template Create

# vue template project
qu-build --init vue project-name

# multi page template project
qu-build --init pages project-name

Mock

Use mockjs, mock storage directory ./src/api, support .js,.json.

/**
 * @url /order/addOrderComment.do
 *
 */
module.exports = function (req) {
  return {
    success: Math.random() < 0.5 ? false : true,
    msg: '@word',
    code: Math.random() < 0.5 ? -200 : 0,
  };
}

or

{
    "msg": "@word",
    "code": 200,
}

If you use jsonp, request parameters increase callback. The return data will be jsonp.

/**
 *  http://localhost:8080/?callback=jQuery1513158553653
 */
jQuery1513158553653({
  "msg": "abc",
  "code": 200,
})

Directory

./public                # static resource directory;
./api                   # mock directory;
./src                   # development source code;
./package.json          # project info
./webpack.config.js     # custom webpack configuration

Config

webpack.config.js

// get webpack
var webpack = require('qu-build/lib/webpack');

module.exports = function(webpackConfig) {
  webpackConfig.plugins.push(
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify('true')
    });
  );
  return webpackConfig;
};