Yqg Command Line Tools

Getting Start

First, install from npm globally,

npm i -g @yqg/cli

Then, you can type the command to use yqg-cli,

yqg vue
yqg shell
yqg vue --debug # debug 模式

And that's all.

Introduction

yqg-cli has 8 commands in total now, which can be divided into three categories:

• scaffold to generate components and projects of vue
  • vue
• shell tool to help saving time
  • clean local release branch
  • clean remote release branch
  • check package json && auto install dependencies when changed
• build tool to start a dev server or build binary code for release
  • clean
  • copy
  • bundle
  • build
  • start

Scaffold

Using scaffold is quiet simple, just type yqg vue, and follow the prompt to type in a few words, you will get your components and projects generated.

Currently supported templates:

• vue
  • component-single: single file component recommanded by Evan You
  • project: standalone project
  • project-user: project can be used only in yqg_web_user

To be supported in the future:

• [] react
  • [] component
  • [] modal
  • [] project
• [] vue project
  • [] auto create soft link
  • [] support create projects standalone which not in yqd_web_admin

Shell Tool

To use shell tool, there are two ways. One is just to type yqg shell without arguments, another is using it with arguments which will be passed to the shell script.

Type yqg shell, you will see currently available shell tool, just enter a number to exec:

1. git-clean-local-branch.sh: clean all local release branches which start with 'release'
2. git-clean-remote-branch.sh: clean remote release to keep a few latest branches per bussiness
3. check-package-json.sh

To using it with arguments, the '../../' will be passed to script 'check-package-json.sh', which means the path of package.json relative to PWD.

yqg shell check-package-json.sh ../../

Build Tool

Build tool come up with five scripts for clean, copy, bunlde, build and start.

• clean: clean the binary files
• copy: copy static files
• bundle: bundle the client (if has) and server javascript file(s)
• build: clean, copy && bundle
• start: start a dev server with HMR

In order to use yqg-cli to build/develop your projects, you need to follow these three steps.

Step 1: setup config

As yqg-cli build tool is depending on node-config to get config, you need to create a folder named config in your project root, and a file named default.js, which will by used by node-config.

/*
 * @file config/default.js
 */

module.exports = {
    build: {
        framework: 'vue', // vue/react/none
        packageJsonPath: './package.json',

        copy: { // src -> dest map
            paths: {
                'src/public': 'build/public'
            }
        },

        global: { // globals used by webpack DefinePlugin
            __WEB_USER_HOST__: JSON.stringify('https://test.yangqianguan.com')
        },

        alias: { // alias used by webpack resolve
            'yqg-common': '../common/src'
        },

        htmlPlugin: { // html plugin options
            template: './src/fe/index.html',
            favicon: './src/fe/fav.png'
        },

        clientEntry: './src/fe/main.js',
        serverEntry: './src/server.js'
    },

    run: {
        port: 62570,
        webHost: 'http://localhost:8000',
        apiHost: 'http://localhost:8001'
    }
};

Step 2: setup dependencies and package.json

Install yqg-cli as a devDependencies:

npm i @yqg/cli -DE

Modify the scripts field in package.json:

"scripts": {
    "clean": "yqg clean",
    "copy": "yqg copy",
    "bundle": "yqg bundle",
    "build": "yqg build",
    "start": "yqg start",
    "prestart": "yqg shell check-package-json.sh ../../"
}

Note: using yqg build --stat can generate a webpack stat html page to help analyzing bundles.

Step 3: send ready signal in server.js

import startServer from '@yqg/cli/dist/start-server';

startServer(server, port);

Step 4(if ssr): using ssr Render

import Render from '@yqg/cli/dist/vue-ssr-render';

const templatePath = path.resolve(__dirname, './index.html');
const render = new Render(server, {templatePath});

server.use(async (ctx) => {
    const context = {title: DEFAULT_TITLE, url: ctx.req.url};
    const renderer = await render.get();
    ctx.set('Content-Type', 'text/html; charset=utf-8');
    ctx.body = await new Promise((resolve, reject) => renderer.renderToString(context, (err, html) => {
        if (err) {
            return reject(err);
        }

        return resolve(html);
    }));
});

After these steps, now cd to your project root dir, and run npm start to start the dev server, or run npm build to build your project for release.

Note: you can use a global yqg command to run yqg start or yqg build, but this is not recommanded, because different projects may use different versions of yqg-cli.

Addition: full config options list

Assum DEV is true when NODE_ENV is not one of test/feat/prod.

| Field | Default Value | Remark | | --------------------- | ------------------------------------------ | ------------------------------------- | | build.stage | DEV | 使用哪个 STAGE 的配置 | | build.dev | build.stage is DEV | 是否处于开发模式 | | build.debug | DEV | | | build.vueDebug | DEV | 是否开启 vue debug 模式 | | build.verbose | DEV | 是否开启 webpack verbose 模式 | | build.mode | DEV ? 'development' : 'production' | webpack mode | | build.framework | 'react' | react/vue/none | | build.typescript | false | 是否包含 typescript | | build.hash | DEV ? 'hash' : 'chunkhash' | | | build.cssHash | DEV ? 'hash' : 'contenthash' | | | build.srcMap | DEV | | | build.packageJsonPath | 'package.json' | copy 的 package.json 的路径 | | build.publicPath | '/' | webpack output.publicPath | | build.alias | see blow | used by webpack.resolve | | build.global | see blow | used by webpack.DefinePlugin | | build.serverEntry | './server.js' | | | build.ssrServerEntry | './server.js' | SSR Server Entry | | build.server | {} | 用于覆盖 server.config.js，不推荐使用 | | build.ssrServer | {} | 用于覆盖 ssrServer.config.js，不推荐使用 | | build.nodeExternalsWhitelist | [] | 提供给 webpack-node-externals 的白名单 | | build.provide | see blow | used by webpack.ProvidePlugin | | build.htmlPlugin | {} | options for html-webpack-plugin | | build.cacheGroups | {} | extra cacheGroups | | build.clientEntry | './common/app/index.js' | | | build.client | {} | 用于覆盖 client.config.js，不推荐使用 | | build.clean | see blow | yqg clean config | | build.copy | see blow | yqg copy config | | build.devProxy | ['/api', '/admin', '/api-web', '/chidori'] | dev server proxy prefix list | | run.apiHost | '' | | | run.webHost | '' | | | run.port | 8080 | |

build.global

| key | value | | ---- | ---- | | __STAGE__ | process.env.NODE_ENV | | __DEBUG__ | DEV | | __VUE_DEBUG__ | DEV | | __CDN_HOST__ | '' | | __API_HOST__ | get from run.apiHost | | __WEB_HOST__ | get from run.webHost | | __CHIDORI_API_HOST__ | decided by stage | | __CHIDORI_HOST__ | decided by stage |

build.alias

framework: vue

| key | value | | ---- | ---------------------- | | vue$ | vue/dist/vue.common.js |

build.provide

framework: react

| key | value | | ----- | ----- | | React | react |

build.clean

| key | value | remark | | ------ | ----- | -------------------------- | | remove | build | string or array of strings | | ensure | build | string or array of strings |

build.copy

| key | value | remark | | ------- | -------- | --------------------------------------------- | | paths | see blow | src —> dest map | | replace | true | whether to replace package.json scripts field |

build.copy.paths

| src | dest | | --------------------- | ------------------- | | config | build/config | | public | build/public | | static | build/public/static | | [PACKAGE_JSON_PATH] | build/package.json |