tessl/npm-tarojs--cli

Command-line interface tool for Taro, a cross-platform framework that enables developers to build apps for Mini Programs, Web, and mobile platforms

—

Pending

Overview

Eval results

Files

Project Creation

Name: tessl/npm-tarojs--cli
Author: tessl

Comprehensive project scaffolding system with support for multiple frameworks, templates, and customization options.

Capabilities

Project Class

Main class for creating new Taro projects with complete scaffolding and configuration setup.

/**
 * Project creation and management class extending Creator
 */
class Project extends Creator {
  conf: IProjectConf;
  
  /**
   * Initialize project creator with configuration
   * @param options - Project configuration options
   */
  constructor(options: IProjectConf);
  
  /**
   * Initialize project creation process
   * @returns Promise that resolves when initialization completes
   */
  init(): Promise<void>;
  
  /**
   * Create project from template with full scaffolding
   * @returns Promise that resolves when project creation completes
   */
  create(): Promise<void>;
  
  /**
   * Get CLI version for project metadata
   * @returns Version string
   */
  getCliVersion(): string;
}

Project Configuration

Complete configuration interface for project creation with all supported options.

/**
 * Complete project configuration interface
 */
interface IProjectConf {
  /** Name of the project */
  projectName: string;
  /** Directory where project will be created */
  projectDir: string;
  /** Package manager to use */
  npm: NpmType;
  /** Template source location */
  templateSource: string;
  /** Template name to use */
  template: string;
  /** Project description */
  description?: string;
  /** Enable TypeScript support */
  typescript?: boolean;
  /** Enable ES5 build support */
  buildEs5?: boolean;
  /** CSS preprocessor to use */
  css: CSSType;
  /** Creation date timestamp */
  date?: string;
  /** Source directory name */
  src?: string;
  /** Source root directory */
  sourceRoot?: string;
  /** Environment configuration */
  env?: string;
  /** Enable automatic package installation */
  autoInstall?: boolean;
  /** Hide default template options */
  hideDefaultTemplate?: boolean;
  /** Framework to use */
  framework: FrameworkType;
  /** Compiler type */
  compiler?: CompilerType;
  /** Custom configuration callback */
  ask?: (config: object) => Promise<void> | void;
  /** Enable git clone for templates */
  clone?: boolean;
}

/**
 * Partial project configuration for flexible initialization
 */
type ProjectOptions = CustomPartial<IProjectConf, 
  'projectName' | 'framework' | 'css' | 'npm' | 'templateSource' | 'template'
>;

Usage Examples:

import { Project } from "@tarojs/cli";

// Create React project with TypeScript
const project = new Project({
  projectName: 'my-taro-app',
  projectDir: '/path/to/projects/my-taro-app',
  framework: 'react',
  typescript: true,
  css: 'sass',
  npm: 'pnpm',
  templateSource: 'default',
  template: 'default',
  compiler: 'webpack5',
  autoInstall: true
});

await project.init();
await project.create();

// Create Vue3 project with custom template
const vueProject = new Project({
  projectName: 'vue-mini-app',
  projectDir: '/path/to/vue-mini-app',
  framework: 'vue3',
  css: 'less',
  npm: 'yarn',
  templateSource: 'https://github.com/custom/taro-vue-template.git',
  template: 'vue-custom',
  description: 'Custom Vue3 mini program',
  clone: true
});

await vueProject.create();

Framework Support

Supported frameworks with their specific configurations and features.

/**
 * Supported framework types
 */
type FrameworkType = 'react' | 'vue3' | 'preact' | 'solid';

/**
 * Framework-specific configuration mapping
 */
interface FrameworkConfig {
  react: {
    plugin: '@tarojs/plugin-framework-react';
    templates: ['default', 'mobx', 'redux', 'dva'];
    typescript: boolean;
  };
  vue3: {
    plugin: '@tarojs/plugin-framework-vue3';
    templates: ['default', 'composition-api'];
    typescript: boolean;
  };
  preact: {
    plugin: '@tarojs/plugin-framework-react';
    templates: ['default'];
    typescript: boolean;
  };
  solid: {
    plugin: '@tarojs/plugin-framework-solid';
    templates: ['default'];
    typescript: boolean;
  };
}

Compiler Options

Available compilation systems with their configurations and capabilities.

/**
 * Supported compiler types
 */
type CompilerType = 'webpack5' | 'vite' | 'esbuild';

/**
 * Compiler-specific features and limitations
 */
interface CompilerFeatures {
  webpack5: {
    platforms: ['weapp', 'alipay', 'swan', 'tt', 'qq', 'jd', 'h5', 'rn'];
    features: ['hot-reload', 'code-splitting', 'tree-shaking'];
  };
  vite: {
    platforms: ['h5'];
    features: ['fast-hmr', 'es-modules', 'optimized-deps'];
  };
  esbuild: {
    platforms: ['h5'];
    features: ['fast-build', 'tree-shaking'];
  };
}

Template Management

Template system for project scaffolding with support for local and remote templates.

/**
 * Template source types
 */
type TemplateSourceType = 'git' | 'url';

/**
 * Template information interface
 */
interface ITemplates {
  name: string;
  value: string;
  platforms?: string[];
  desc?: string;
}

/**
 * Get template source type from URL
 * @param url - Template URL or reference
 * @returns Template source type
 */
function getTemplateSourceType(url: string): TemplateSourceType;

/**
 * Available default templates by framework
 */
interface DefaultTemplates {
  react: {
    default: 'Basic React project with Taro';
    mobx: 'React project with MobX state management';
    redux: 'React project with Redux toolkit';
    dva: 'React project with Dva framework';
  };
  vue3: {
    default: 'Basic Vue3 project with Composition API';
    'composition-api': 'Vue3 project optimized for Composition API';
  };
  preact: {
    default: 'Basic Preact project';
  };
  solid: {
    default: 'Basic SolidJS project';
  };
}

CSS Preprocessors

Supported CSS preprocessing options with configuration.

/**
 * Supported CSS preprocessor types
 */
type CSSType = 'sass' | 'stylus' | 'less' | 'none';

/**
 * CSS preprocessor configurations
 */
interface CSSConfig {
  sass: {
    extensions: ['.scss', '.sass'];
    loader: 'sass-loader';
  };
  stylus: {
    extensions: ['.styl', '.stylus'];
    loader: 'stylus-loader';
  };
  less: {
    extensions: ['.less'];
    loader: 'less-loader';
  };
  none: {
    extensions: ['.css'];
    loader: null;
  };
}

Package Managers

Supported package manager configurations and commands.

/**
 * Supported package manager types
 */
type NpmType = 'npm' | 'yarn' | 'pnpm' | 'cnpm';

/**
 * Package manager specific commands and configurations
 */
interface PackageManagerConfig {
  npm: {
    install: 'npm install';
    dev: 'npm run dev';
    build: 'npm run build';
  };
  yarn: {
    install: 'yarn';
    dev: 'yarn dev';
    build: 'yarn build';
  };
  pnpm: {
    install: 'pnpm install';
    dev: 'pnpm dev';
    build: 'pnpm build';
  };
  cnpm: {
    install: 'cnpm install';
    dev: 'cnpm run dev';
    build: 'cnpm run build';
  };
}

Project Structure

Generated project directory structure and key files created during scaffolding.

/**
 * Standard Taro project structure
 */
interface ProjectStructure {
  'src/': {
    'app.tsx' | 'app.vue': 'Main application component';
    'app.config.ts': 'Application configuration';
    'app.scss' | 'app.less' | 'app.styl': 'Global styles';
    'pages/': {
      'index/': {
        'index.tsx' | 'index.vue': 'Index page component';
        'index.config.ts': 'Page configuration';
        'index.scss': 'Page styles';
      };
    };
  };
  'package.json': 'Package configuration';
  'project.config.json': 'Mini program project config';
  'babel.config.js': 'Babel configuration';
  'config/': {
    'index.js': 'Build configuration';
    'dev.js': 'Development configuration';
    'prod.js': 'Production configuration';
  };
}

Install with Tessl CLI