cloudbase-apptpl

cloudbase app template

Usage no npm install needed!

<script type="module">
  import cloudbaseApptpl from 'https://cdn.skypack.dev/cloudbase-apptpl';
</script>

README

Cloudbase-apptpl

cloudbase项目模板基类，用于自定义create-cloudbase-app的项目模板。

安装

# npm
npm i cloudbase-apptpl -D
# yarn
yarn add cloudbase-apptpl -D

API

CloudBaseApp

abstract class CloudBaseApp {
  protected _appname;
  protected _lang;
  protected _options;
  constructor(appname: string, lang: LANGUAGES, options?: KV<any>);
  abstract run(): any;
  protected _installDeps(path: string, packageTool: string, dependencies: string[]): void;
}
  • CloudBaseApp是一个抽象类，子类必须实现抽象方法run()。App实例化之后会自动调用run()方法；
  • CloudBaseApp类提供安装依赖的工具方法_installDeps；
  • protected类型的属性和方法可在子类中直接访问。

renderTpl()

工具函数，将ejs模板文件渲染并写入目标文件

function renderTpl(filePath: string, targetPath: string, locals?: KV<any>): void;

validPattern()

此函数用来验证pattern的合法性，一般用于调试。

function validPattern(pattern: string): boolean;

pattern是匹配依赖的协议字符串，格式如下

<pre>|<content>
  • pre指的是工具类模块，比如webpack、rollup等。这类模块与content包含的功能模块通常有综合依赖关系，比如webpack与less搭配额外依赖less-loader。
  • content指的是项目依赖的第三方模块，比如vue、vue-router等等。 pre和content的格式一致，如下：
pre1&pre2|content1&content2

matchDeps()

工具函数，在depsMap中匹配pattern的依赖模块，以数组的形式返回。

function matchDeps(pattern: string, depsMap: DepsMap): string[];

LANGUAGES-自定义类型

可选语言

enum LANGUAGES {
  ZH = "zh",
  EN = "en"
}

DepsMap-自定义类型

必须包含common值。

type DepsMap = KV<string[]> & {
  common: string[];
};

示例

import CloudBaseApp,{LANGUAGES,renderTpl} from 'cloudbase-apptpl';

class VanillaApp extends CloudBaseApp{
  constructor(appname,lang,options){
    super(appname,lang,options);
    // ...
  }
  /**
   * 实现抽象方法run
   */
  run(){
    // ...
    // 调用父类方法
    this._installDeps('./myapp','yarn',['vuex','vue']);
  }
}