Nitrogenous Polymorphic Molecule

    @yqg/cli

    5.6.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i @yqg/cli

    DownloadsWeekly Downloads

    495

    Version

    5.6.0

    License

    MIT

    Unpacked Size

    1.86 MB

    Total Files

    107

    Last publish

    Collaborators

    • hongweihu
    • iuwoo
    • ykboluo
    • yqg-owner
    • jxlnljt
    • yulodl
    • center620
    • zhchy
    • guxiaodai
    • northseacoder
    • wenxiujiang
    • zzj5470816
    • lixiaoxue
    • yyh_
    • szll
    • zhayoyang