QTCli

QTCli 是一款基于 Node.js 的前端工程化底座，提供了完整的项目构建、开发和部署解决方案。

特性

• 🚀 快速创建和初始化项目
• 📦 内置 Webpack 构建配置
• 🔥 支持 React + TypeScript 开发
• 🎨 支持 Less、Sass、CSS Modules
• 📱 支持移动端适配
• 🔍 内置 ESLint、StyleLint 代码规范检查
• 🛠 支持自定义配置和插件扩展

安装

npm install -g qtcli

使用方法

查看帮助

qtcli --help

初始化项目

qtcli init [options]

开发模式

qtcli dev [options]

构建项目

qtcli build [options]

全局选项

• -V, --version: 显示版本号
• -D, --debug: 启用调试模式
• -h, --help: 显示帮助信息

项目结构

my-project/
├── src/                # 源代码目录
├── public/            # 静态资源目录
├── dist/              # 构建输出目录
└── qt.conf.js         # 项目配置文件

配置说明

在项目根目录创建 qt.conf.js 文件进行自定义配置：

export default {
  // 构建类型
  buildType: 'WEB',

  // 解决方案名称
  solutionName: 'my-project',

  // 构建模式
  buildMode: {
    development: 'DEVELOPMENT',
    production: 'PRODUCTION',
    test: 'TEST',
    analyze: 'ANALYZE'
  },

  // 项目配置
  config: {
    // HTML 注入配置
    htmlInject: {
      head: [
        // meta 标签
        {
          tag: 'meta',
          attrs: {
            charset: 'utf-8'
          }
        },
        {
          tag: 'meta',
          attrs: {
            name: 'viewport',
            content: 'width=device-width, initial-scale=1'
          }
        },
        // link 标签
        {
          tag: 'link',
          attrs: {
            rel: 'stylesheet',
            href: '/static/css/global.css'
          }
        }
      ],
      body: [
        // body 中的 script
        {
          tag: 'script',
          attrs: {
            src: '/static/js/init.js'
          }
        }
      ]
    },

    // JavaScript 代码片段注入配置
    jsInject: {
      head: [
        {
          code: `window.APP_CONFIG = {
            version: '1.0.0',
            env: '${process.env.NODE_ENV}',
            apiUrl: '${process.env.API_URL}'
          };`
        }
      ],
      body: [
        {
          code: `document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded');
          });`
        }
      ]
    },

    // 环境变量配置
    env: {
      development: {
        NODE_ENV: 'development',
        API_URL: 'http://dev-api.example.com'
      },
      production: {
        NODE_ENV: 'production',
        API_URL: 'http://api.example.com'
      }
    }
  },

  // webpack 配置
  webpackConfig: {
    // 开发服务器配置
    devServer: {
      port: 3000,
      host: 'localhost'
    },
    // 解析配置
    resolve: {
      alias: {
        '@components': './src/components',
        '@utils': './src/utils'
      }
    },
    // 模块规则
    module: {
      rules: []
    },
    // 插件配置
    plugins: []
  }
}

开发环境要求

• Node.js >= 14.0.0
• npm >= 6.0.0

作者

• yujie.guo - 初始作者

问题反馈

如果你遇到任何问题或有任何建议，请通过以下方式联系我们：

• 提交 Issue: GitHub Issues
• 邮件联系: [email protected]