@nsea/cli v1.2.9-alpha.1

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 angular
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/angular
  • vue
  • angular
• 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 or yqg angular, 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
  • component-separated: component with html, javascript, css in separated file
  • modal-base-ui
  • modal-cl
  • modal-ec
  • modal-muse
  • project: standalone project
  • project-user: project can be used only in yqg_web_user
• angular
  • component
  • modal

To be supported in the future:

• [] angular
  • [] project
• [] 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: 'angular', // angular/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.

build.global

build.alias

framework: vue

build.provide

framewok: angular

framework: react

build.clean

build.copy

build.copy.paths