1.2.9-alpha.1 • Published 4 years ago

@nsea/cli v1.2.9-alpha.1

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
4 years ago

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.

FieldDefault ValueRemark
build.stageDEV使用哪个 STAGE 的配置
build.devbuild.stage is DEV是否处于开发模式
build.debugDEV
build.vueDebugDEV是否开启 vue debug 模式
build.verboseDEV是否开启 webpack verbose 模式
build.modeDEV ? 'development' : 'production'webpack mode
build.framework'react'react/vue/angular/none
build.typescriptfalse是否包含 typescript
build.hashDEV ? 'hash' : 'chunkhash'
build.cssHashDEV ? 'hash' : 'contenthash'
build.srcMapDEV
build.packageJsonPath'package.json'copy 的 package.json 的路径
build.publicPath'/'webpack output.publicPath
build.aliassee blowused by webpack.resolve
build.globalsee blowused 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.providesee blowused 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.cleansee blowyqg clean config
build.copysee blowyqg copy config
build.devProxy'/api', '/admin', '/api-web', '/chidori'dev server proxy prefix list
run.apiHost''
run.webHost''
run.port8080

build.global

keyvalue
__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
keyvalue
vue$vue/dist/vue.common.js

build.provide

framewok: angular
keyvalue
$jquery
jQueryjquery
window.jQueryjquery
framework: react
keyvalue
Reactreact

build.clean

keyvalueremark
removebuildstring or array of strings
ensurebuildstring or array of strings

build.copy

keyvalueremark
pathssee blowsrc —> dest map
replacetruewhether to replace package.json scripts field

build.copy.paths

srcdest
configbuild/config
publicbuild/public
staticbuild/public/static
[PACKAGE_JSON_PATH]build/package.json