feat: 数据流模板

-# dependencies
-node_modules
-
-# production
-build
-www
-.deliver
-
-# misc
-.DS_Store
-npm-debug.log
-yarn-error.log
-.vscode
-.idea
-jest

@@ -5,17 +5,19 @@ qx-cli
 ### 快速开始
 
 #### 通过 npx 使用 (推荐)
-1. 安装NPX：`npm install -g npx`
+
+1. 安装 NPX：`npm install -g npx`
 2. 生成项目：`npx qx-cli init`
 3. 查看模板: `npx qx-cli list`
 
 ### 通过 NPM 使用
+
 1. `npm install -g qx-cli`
 2. 在终端输入 `qx-cli`
 
-  Usage: qx <commands>
+Usage: qx <commands>
 
-  Commands:
+Commands:
 
-    list      查看所有的模板  
-    init      通过模板生成项目（需按步骤选择）  
+    list      查看所有的模板
+    init      通过模板生成项目（需按步骤选择）

+#!/usr/bin/env node
+
+const path = require('path');
+const fs = require('fs');
+const execSync = require('child_process').execSync;
+const chalk = require('chalk');
+const getConfigContent = require('../config/defaultConfig.js');
+
+const umircCwdFilePath = path.resolve(process.cwd(), '.umirc.js');
+
+async function writeFile() {
+  const content = await getConfigContent();
+  fs.writeFile(umircCwdFilePath, content, (err) => {
+    if (err) {
+      console.log(chalk.red(`文件写入失败, ${err}`));
+      process.exit(1);
+    } else {
+      execSync(`npx cross-env ${process.argv.slice(2).join(' ')} umi build`, { stdio: 'inherit' });
+      fs.unlinkSync(umircCwdFilePath);
+    }
+  });
+}
+
+writeFile();

 #!/usr/bin/env node
 
-const program = require('commander')
+const program = require('commander');
 
 // 定义CLI命令
 program
@@ -8,5 +8,7 @@ program
   .usage('<command> [options]')
   .command('list', '列出所有的模板')
   .command('init', '通过模板初始化新项目')
-  
-program.parse(process.argv)
\ No newline at end of file
+  .command('build', '打包项目')
+  .command('start', '启动本地服务');
+
+program.parse(process.argv);

 #!/usr/bin/env node
 
-const inquirer = require('inquirer')
-const chalk = require('chalk')
+const inquirer = require('inquirer');
+const chalk = require('chalk');
 const exec = require('child_process').exec;
 
-const templateMap = require(`${__dirname}/../template`)
+const templateMap = require(`${__dirname}/../template`);
 
 const templateOptions = Object.keys(templateMap).reduce((list, key) => {
   list.push({
     name: `${templateMap[key].name} (${key})`,
     value: key,
     short: templateMap[key].name,
-  })
-  return list
-}, [])
+  });
+  return list;
+}, []);
 
 const questions = [
   {
@@ -23,65 +23,67 @@ const questions = [
     choices: templateOptions,
   },
   {
-    name: "projectName",
+    name: 'projectName',
     type: 'input',
-    message: "请输入系统名称",
+    message: '请输入系统名称',
     validate(val) {
-      if (val === '') return '请输入系统名称'
-      return true
-    }
+      if (val === '') return '请输入系统名称';
+      return true;
+    },
   },
-]
+];
 
 function initAsk() {
-  inquirer.prompt(questions).then(answers => {
+  inquirer.prompt(questions).then((answers) => {
     const result = {
       template: answers.template,
       projectName: answers.projectName,
-    }
-    const template = templateMap[result.template]
+    };
+    const template = templateMap[result.template];
 
-    initProject(result.projectName, template)
-  })
+    initProject(result.projectName, template);
+  });
 }
 
 function initProject(projectName, template) {
-  console.log(chalk.white('\n 开始下载模板... \n'))
+  console.log(chalk.white('\n 开始下载模板... \n'));
 
-  exec(`git clone -b ${template.branch} --depth=1 ${template.repo} ${projectName}`, err => {
+  exec(`git clone -b ${template.branch} --depth=1 ${template.repo} ${projectName}`, (err) => {
     if (err) {
-      console.log(chalk.red(`模板下载失败. ${err}`))
+      console.log(chalk.red(`模板下载失败. ${err}`));
       process.exit(1);
     } else {
       try {
-        commitWork(projectName, err => {
+        commitWork(projectName, (err) => {
           if (err) {
-            console.log(chalk.red(err))
+            console.log(chalk.red(err));
           } else {
-            console.log(chalk.green('\n ✅下载完成!'))
-            console.log('\n 快速开始')
-            console.log(`\n   cd ${projectName}`)
-            console.log('\n   npm install')
-            console.log('\n   npm start\n')
+            console.log(chalk.green('\n ✅下载完成!'));
+            console.log('\n 快速开始');
+            console.log(`\n   cd ${projectName}`);
+            console.log('\n   npm install');
+            console.log('\n   npm start\n');
             process.exit(1);
           }
-        })
+        });
       } catch (err) {
-        console.log('项目配置生成失败', chalk.red(err))
+        console.log('项目配置生成失败', chalk.red(err));
       }
     }
   });
 }
 
-
 function commitWork(projectName, callback) {
-  exec(`
+  exec(
+    `
     cd ${projectName}
     rm -rf .git
     git init
     git add .
     git commit -m 'init ${projectName}'
-  `, callback)
+  `,
+    callback,
+  );
 }
 
-initAsk()
+initAsk();

 #!/usr/bin/env node
 
-const template = require(`${__dirname}/../template.json`)
+const template = require(`${__dirname}/../template.json`);
 
-console.log(template)
+console.log(template);

+#!/usr/bin/env node
+
+const path = require('path');
+const fs = require('fs');
+const execSync = require('child_process').execSync;
+const chalk = require('chalk');
+const getConfigContent = require('../config/defaultConfig.js');
+const { findUsablePort } = require('../utils');
+
+const umircCwdFilePath = path.resolve(process.cwd(), '.umirc.js');
+
+async function writeFile() {
+  const port = await findUsablePort(process.env.PORT || 8000);
+  const content = getConfigContent(port);
+
+  fs.writeFile(umircCwdFilePath, content, (err) => {
+    if (err) {
+      console.log(chalk.red(`文件写入失败, ${err}`));
+      process.exit(1);
+    } else {
+      execSync(
+        `npx cross-env ${process.argv
+          .slice(2)
+          .join(' ')} SOCKET_SERVER=http://localhost:${port} umi dev`,
+        { stdio: 'inherit' },
+      );
+      fs.unlinkSync(umircCwdFilePath);
+    }
+  });
+}
+
+writeFile();

+const getConfigContent = (port) => {
+  return `
+  import { defineConfig } from 'umi';
+  import path from 'path';
+  import fs from 'fs';
+  import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+  import routes from './src/routes'
+  import pkg from './package.json'
+  let userConfig = {};
+  let terserOptions = {};
+  let publicPath =  '/' + pkg.name + '/'
+  
+  if (fs.existsSync(path.resolve(process.cwd(), '.qx.config.js'))) {
+    userConfig = require(path.resolve(process.cwd(), '.qx.config.js'))
+  }
+  
+  if (process.env.NODE_ENV === 'development') {
+    publicPath = '//localhost:' + ${port} + '/'
+  }
+  
+  if (process.env.UMI_APP_ENV === 'prod') {
+    terserOptions = {
+      compress: {
+        pure_funcs: ['console.log', 'debugger'],
+      },
+    };
+  } else {
+    terserOptions = {
+      compress: {
+        drop_debugger: true,
+      },
+    };
+  }
+  
+  export default defineConfig({
+    esbuild: {},
+    devServer: {
+      port: ${port},
+      'Access-Control-Allow-Origin': true
+    },
+    runtimePublicPath: true,
+    publicPath,
+    mountElementId: pkg.name,
+    webpack5: {
+      lazyCompilation: {},
+    },
+    nodeModulesTransform: {
+      type: 'none',
+    },
+    history: {
+      type: 'hash',
+    },
+    alias: {
+      '@/src': 'src',
+    },
+    hash: true,
+    title: false,
+    lessLoader: {
+      globalVars: {
+        theme: 'true;@import "~@/variable.less"',
+      },
+    },
+    antd: {
+      config: {},
+    },
+    fastRefresh: {},
+    qiankun: {
+      slave: {},
+    },
+    dynamicImport: {
+      loading: '@/components/qx-page-loading',
+    },
+    routes,
+    terserOptions,
+    chainWebpack: function (memo, { env, webpack, createCSSRule }) {
+      memo.resolve.alias.set('@', path.resolve(__dirname, './src'));
+      memo.resolve.alias.set('@@', path.resolve(__dirname, './src/.umi'));
+      memo.optimization.delete('noEmitOnErrors');
+      memo.plugins.delete('optimize-css');
+      // if (env === 'production') {
+        memo.merge({
+          plugins: env === 'production'?  [new MiniCssExtractPlugin()] : [],
+          optimization: {
+            emitOnErrors: true,
+            splitChunks: {
+              chunks: 'async',
+              minSize: 30000,
+              minChunks: 3,
+              automaticNameDelimiter: '.',
+              cacheGroups: {
+                antdesigns: {
+                  name: 'antdesigns',
+                  chunks: 'all',
+                  test: /(@antd|antd|@ant-design)/,
+                  priority: 10
+                },
+                x6: {
+                  name: 'x6',
+                  chunks: 'all',
+                  test: /(@antv\\/x6|@antv\\/x6-react-components|@antv\\/x6-react-shape)/,
+                  priority: 20,
+                },
+                qxwidgets: {
+                  name: 'qxwidgets',
+                  chunks: 'all',
+                  test: /\\/src\\/packages\\/qx-form-generator/,
+                  priority: 10,
+                },
+                formrender: {
+                  name: 'formrender',
+                  chunks: 'all',
+                  test: /@qx\\/form-render/,
+                  priority: 10,
+                },
+                qx: {
+                  name: 'qx',
+                  chunks: 'all',
+                  test: /(@qx\\/view-render|@qx\\/form-design|@qx\\/hooks|@qx\\/utils|@qx\\/icon-btn)/,
+                  priority: 20,
+                },
+                echarts: {
+                  name: 'echarts',
+                  chunks: 'all',
+                  test: /(echarts|echarts-for-react)/,
+                  priority: 20,
+                },
+                // styles: {
+                //   name: "styles",
+                //   type: "css/mini-extract",
+                //   chunks: "all",
+                //   enforce: true,
+                // },
+                vendors: {
+                  name: 'vendors',
+                  chunks: 'all',
+                  test: /[\\/]node_modules[\\/]/,
+                  priority: 10,
+                },
+              },
+            },
+          },
+          externals: function ({ context, request }, callback) {
+            if (env === 'production') {
+              if (/^react$/.test(request)) {
+                return callback(null, 'React', 'react');
+              }
+    
+              if (/^react-dom$/.test(request)) {
+                return callback(null, 'ReactDOM', 'react-dom');
+              }
+            }
+    
+            if (/antd.*.(css|less)$/.test(path.resolve(context, request))) {
+              return callback(null, 'antd-style');
+            }
+    
+            callback();
+          },
+        });  
+      // }
+    },
+    ...userConfig,
+  });
+  `;
+};
+
+module.exports = getConfigContent;

+../acorn/bin/acorn
\ No newline at end of file

+../autoprefixer/bin/autoprefixer
\ No newline at end of file

+../browserslist/cli.js
\ No newline at end of file

+../@umijs/bundler-webpack/bin/bundler-webpack.js
\ No newline at end of file

+../css-blank-pseudo/cli.js
\ No newline at end of file

+../css-has-pseudo/cli.js
\ No newline at end of file

+../css-prefers-color-scheme/cli.js
\ No newline at end of file

+../cssesc/bin/cssesc
\ No newline at end of file

+../esprima/bin/esparse.js
\ No newline at end of file

+../esprima/bin/esvalidate.js
\ No newline at end of file

+../is-docker/cli.js
\ No newline at end of file

+../js-yaml/bin/js-yaml.js
\ No newline at end of file

+../json5/lib/cli.js
\ No newline at end of file

+../loose-envify/cli.js
\ No newline at end of file

+../miller-rabin/bin/miller-rabin
\ No newline at end of file

+../prettier/bin-prettier.js
\ No newline at end of file

+../semver/bin/semver
\ No newline at end of file

+../sha.js/bin.js
\ No newline at end of file

+../terser/bin/terser
\ No newline at end of file

+../umi/bin/umi.js
\ No newline at end of file

+../update-browserslist-db/cli.js
\ No newline at end of file

+../webpack/bin/webpack.js
\ No newline at end of file

+../which/bin/which
\ No newline at end of file