qingtian-cli

一个专注于 react + typescript + electron 开发的工作流

Install

yarn global add qingtian-cli

or

npm install qingtian-cli -g

Contains

• web , electron, nwjs 模板项目生成 ✅
• 一键进入 webpack 开发模式和打包模式 ✅
• 内置 typescript 4.0 支持 ✅
• 内置 sass 支持 ✅
• 内置 postcss 支持 ✅
• webpack 打包分析 ✅
• *.module.scss 格式文件自动启动 css modules ✅
• 支持多页应用构建 ✅
• antd 及 lodash 按需加载 ✅
• splitChunks 拆包自动拆出 antd 相关包 ✅
• 代码热重载 ✅
• 构建进度条 ✅
• 根据 tsconfig paths 配置自动映射到 webpack alias ✅
• moment locale 问题处理 ✅
• styled-components 生成 class 名称优化 ✅

TodoList

• webpack 对 svg 模块单独处理 ❌
• cli 运行速度优化 ❌
• js 打包支持 ❌
• less 支持 ❌

Commands

• qt new： 创建 web , electron, nwjs 项目
• qt dev： 启动项目开发
• qt build： 生产环境构建
• qt info： 查看 cli 基本信息

Config

新建一个 qt.config.js 置于项目根目录，内容如下

module.exports = {
    electron: {
        rendererEntry: './src/renderer/index.tsx', // 配置渲染进程入口
        mainEntry: './src/main/index.ts' // 配置主进程入口
    },
    filenameHashing: true, // 生成的静态资源是否加hash以控制缓存
    template: 'public/index.html',
    filename: 'index.html',
    title: 'Webpack App',
    favicon: 'public/favicon.ico',
    sassResources: ['./src/renderer/sass/vars.scss', './src/renderer/sass/mixins.scss'], // sass工具注入
    pages: {
        // 多页面配置
        index: {
            entry: 'xxx',
            template: 'xxx',
            filename: 'xxx',
            title: 'xxx',
            favicon: 'xxxxx'
        },
        app: {
            entry: 'xxx',
            template: 'xxx',
            filename: 'xxx',
            title: 'xxx',
            favicon: 'xxxxx'
        }
    },
    // webpack配置扩展
    chainWebpack: config => {}
};

Display