@ctzy-web-client/create-web-client 1.0.4

package/bin/create-web-client.js

@@ -0,0 +1,225 @@
+import fs from 'fs';
+import path from 'path';
+// import { fileURLToPath } from 'url';
+import minimist from 'minimist';
+import prompts from 'prompts';
+import { blue, green, red, reset, yellow } from 'kolorist';
+import {
+  formatTargetDir,
+  copy,
+  isValidPackageName,
+  toValidPackageName,
+  isEmpty,
+  emptyDir,
+  pkgFromUserAgent,
+} from './utils/index.js';
+
+//参数列表
+const argv = minimist(process.argv.slice(2), { string: ['_'] });
+
+//命令行
+const cwd = process.cwd();
+
+//模板列表
+const templates = [
+  {
+    name: 'web-base-client-vue',
+    display: '单体web客户端应用(web-client-app)',
+    color: yellow,
+    //   variants: [
+    //     {
+    //       name: 'vue-app',
+    //       display: 'JavaScript',
+    //       color: yellow
+    //     }
+    //   ]
+  },
+  {
+    name: 'qiankun-subapp-vue',
+    display: 'VUE版本微前端子项目',
+    color: blue,
+  },
+  {
+    name: 'qiankun-vue',
+    display: '乾坤+VUE基座项目',
+    color: green,
+  },
+];
+//模板名称
+const templateNames = templates
+  .map((f) => (f.variants && f.variants.map((v) => v.name)) || [f.name])
+  .reduce((a, b) => a.concat(b), []);
+//默认项目名称
+const defaultTargetDir = 'web-client-app';
+//renameFiles
+const renameFiles = {
+  _gitignore: '.gitignore',
+};
+//初始化
+async function init() {
+  const argTargetDir = formatTargetDir(argv._[0]);
+
+  const argTemplate = argv.template || argv.t;
+
+  let targetDir = argTargetDir || defaultTargetDir;
+
+  //获取项目名称
+  const getProjectName = () =>
+    targetDir === '.' ? path.basename(path.resolve()) : targetDir;
+
+  let result;
+
+  try {
+    result = await prompts(
+      [
+        {
+          type: argTargetDir ? null : 'text',
+          name: 'projectName',
+          message: reset('Project name:'),
+          initial: defaultTargetDir,
+          onState: (state) => {
+            targetDir = formatTargetDir(state.value) || defaultTargetDir;
+          },
+        },
+        {
+          type: () =>
+            !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm',
+          name: 'overwrite',
+          message: () =>
+            (targetDir === '.'
+              ? 'Current directory'
+              : `Target directory "${targetDir}"`) +
+            ` is not empty. Remove existing files and continue?`,
+        },
+        {
+          type: (_, { overwrite }) => {
+            if (overwrite === false) {
+              throw new Error(red('✖') + ' Operation cancelled');
+            }
+            return null;
+          },
+          name: 'overwriteChecker',
+        },
+        {
+          type: () => (isValidPackageName(getProjectName()) ? null : 'text'),
+          name: 'packageName',
+          message: reset('Package name:'),
+          initial: () => toValidPackageName(getProjectName()),
+          validate: (dir) =>
+            isValidPackageName(dir) || 'Invalid package.json name',
+        },
+        {
+          type:
+            argTemplate && templateNames.includes(argTemplate)
+              ? null
+              : 'select',
+          name: 'template',
+          message:
+            typeof argTemplate === 'string' &&
+            !templateNames.includes(argTemplate)
+              ? reset(
+                  `"${argTemplate}" isn't a valid template. Please choose from below: `
+                )
+              : reset('Select a template:'),
+          initial: 0,
+          choices: templates.map((template) => {
+            const color = template.color;
+            return {
+              title: color(template.display || template.name),
+              value: template,
+            };
+          }),
+        },
+        {
+          type: (template) => (template && template.variants ? 'select' : null),
+          name: 'variant',
+          message: reset('Select a variant:'),
+          choices: (template) =>
+            template.variants.map((variant) => {
+              const variantColor = variant.color;
+              return {
+                title: variantColor(variant.display || variant.name),
+                value: variant.name,
+              };
+            }),
+        },
+      ],
+      {
+        onCancel: () => {
+          throw new Error(red('✖') + ' Operation cancelled');
+        },
+      }
+    );
+  } catch (cancelled) {
+    console.log(cancelled.message);
+    return;
+  }
+
+  // user choice associated with prompts
+  const { template, overwrite, packageName, variant } = result;
+
+  const root = path.join(cwd, targetDir);
+
+  if (overwrite) {
+    emptyDir(root);
+  } else if (!fs.existsSync(root)) {
+    fs.mkdirSync(root, { recursive: true });
+  }
+
+  // determine template
+  const installTemplate = variant || (template && template.name) || argTemplate;
+
+  const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent);
+  const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
+
+  // 该提示不输出
+  // console.log(`\nScaffolding project in ${root}...`)
+
+  const templateDir = path.resolve(
+    // fileURLToPath(__dirname),
+    __dirname,
+    '../templates',
+    `${installTemplate}-template`
+  );
+
+  const write = (file, content) => {
+    const targetPath = path.join(root, renameFiles[file] ?? file);
+    if (content) {
+      fs.writeFileSync(targetPath, content);
+    } else {
+      copy(path.join(templateDir, file), targetPath);
+    }
+  };
+
+  const files = fs.readdirSync(templateDir);
+  for (const file of files.filter((f) => f !== 'package.json')) {
+    write(file);
+  }
+
+  const pkg = JSON.parse(
+    fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
+  );
+
+  pkg.name = packageName || getProjectName();
+
+  write('package.json', JSON.stringify(pkg, null, 2));
+
+  console.log(`\nDone. Now run:\n`);
+  if (root !== cwd) {
+    console.log(`  cd ${path.relative(cwd, root)}`);
+  }
+  switch (pkgManager) {
+    case 'yarn':
+      console.log('  yarn');
+      console.log('  yarn dev');
+      break;
+    default:
+      console.log(`  ${pkgManager} install`);
+      console.log(`  ${pkgManager} run dev`);
+      break;
+  }
+  console.log();
+}
+
+//初始化
+init().catch((e) => console.error(e));

package/bin/utils/index.js

@@ -0,0 +1,105 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * 格式化目标目录
+ * @param {*} targetDir
+ * @returns
+ */
+export const formatTargetDir = function formatTargetDir(targetDir) {
+  return targetDir?.trim().replace(/\/+$/g, '');
+};
+
+/**
+ * 拷贝
+ * @param {*} src
+ * @param {*} dest
+ */
+export const copy = function copy(src, dest) {
+  const stat = fs.statSync(src);
+  if (stat.isDirectory()) {
+    copyDir(src, dest);
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+};
+
+/**
+ * 检测项目名称是否有效
+ * @param {*} projectName
+ * @returns
+ */
+export const isValidPackageName = function isValidPackageName(projectName) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    projectName
+  );
+};
+
+/**
+ * 将项目名称处理成有效的名称
+ * @param {*} projectName
+ * @returns
+ */
+export const toValidPackageName = function toValidPackageName(projectName) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z0-9-~]+/g, '-');
+};
+
+/**
+ * 拷贝目录
+ * @param {*} srcDir
+ * @param {*} destDir
+ */
+export const copyDir = function copyDir(srcDir, destDir) {
+  fs.mkdirSync(destDir, { recursive: true });
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file);
+    const destFile = path.resolve(destDir, file);
+    copy(srcFile, destFile);
+  }
+};
+
+/**
+ * 是否是空目录
+ * @param {*} path
+ * @returns
+ */
+export const isEmpty = function isEmpty(path) {
+  const files = fs.readdirSync(path);
+  return files.length === 0 || (files.length === 1 && files[0] === '.git');
+};
+
+/**
+ * 是否是空目录
+ * @param {*} dir
+ * @returns
+ */
+export const emptyDir = function emptyDir(dir) {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+  for (const file of fs.readdirSync(dir)) {
+    if (file === '.git') {
+      continue;
+    }
+    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });
+  }
+};
+
+/**
+ * 更新packagejson
+ * @param {*} userAgent
+ * @returns
+ */
+export const pkgFromUserAgent = function pkgFromUserAgent(userAgent) {
+  if (!userAgent) return undefined;
+  const pkgSpec = userAgent.split(' ')[0];
+  const pkgSpecArr = pkgSpec.split('/');
+  return {
+    name: pkgSpecArr[0],
+    version: pkgSpecArr[1],
+  };
+};

package/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require("./bin/create-web-client");

package/lib/download.js

@@ -0,0 +1,184 @@
+var downloadUrl = require('download');
+var gitclone = require('git-clone');
+var rm = require('rimraf').sync;
+
+/**
+ * Expose `download`.
+ */
+
+module.exports = download;
+
+/**
+ * Download `repo` to `dest` and callback `fn(err)`.
+ *
+ * @param {String} repo
+ * @param {String} dest
+ * @param {Object} opts
+ * @param {Function} fn
+ */
+
+function download(repo, dest, opts, fn) {
+  if (typeof opts === 'function') {
+    fn = opts;
+    opts = null;
+  }
+  opts = opts || {};
+  var clone = opts.clone || false;
+
+  repo = normalize(repo);
+
+  var url = repo.url || getUrl(repo, clone);
+
+  if (clone) {
+    gitclone(
+      url,
+      dest,
+      {
+        checkout: repo.checkout,
+        shallow: repo.checkout === 'master',
+      },
+      function (err) {
+        if (err === undefined) {
+          rm(dest + '/.git');
+          fn();
+        } else {
+          fn(err);
+        }
+      }
+    );
+  } else {
+    downloadUrl(url, dest, {
+      extract: true,
+      strip: 1,
+      mode: '666',
+      headers: {
+        accept: 'application/zip',
+      },
+    })
+      .then(function (data) {
+        fn();
+      })
+      .catch(function (err) {
+        fn(err);
+      });
+  }
+}
+
+/**
+ * Normalize a repo string.
+ *
+ * @param {String} repo
+ * @return {Object}
+ */
+
+function normalize(repo) {
+  var regex = /^(?:(direct):([^#]+)(?:#(.+))?)$/;
+  var match = regex.exec(repo);
+
+  if (match) {
+    var url = match[2];
+    var checkout = match[3] || 'master';
+
+    return {
+      type: 'direct',
+      url: url,
+      checkout: checkout,
+    };
+  } else {
+    regex =
+      /^(?:(github|gitlab|bitbucket):)?(?:(.+):)?([^\/]+)\/([^#]+)(?:#(.+))?$/;
+    match = regex.exec(repo);
+    var type = match[1] || 'baswebapp';
+    var origin = match[2] || null;
+    var owner = match[3];
+    var name = match[4];
+    var checkout = match[5] || 'master';
+
+    if (origin == null) {
+      if (type === 'github') origin = 'github.com';
+      else if (type === 'gitlab') origin = 'gitlab.com';
+      else if (type === 'bitbucket') origin = 'bitbucket.com';
+      else if (type === 'baswebapp') origin = 'gitlab.baswebapp.cn';
+    }
+
+    return {
+      type: type,
+      origin: origin,
+      owner: owner,
+      name: name,
+      checkout: checkout,
+    };
+  }
+}
+
+/**
+ * Adds protocol to url in none specified
+ *
+ * @param {String} url
+ * @return {String}
+ */
+
+function addProtocol(origin, clone) {
+  if (!/^(f|ht)tps?:\/\//i.test(origin)) {
+    if (clone) origin = 'git@' + origin;
+    else origin = 'https://' + origin;
+  }
+
+  return origin;
+}
+
+/**
+ * Return a zip or git url for a given `repo`.
+ *
+ * @param {Object} repo
+ * @return {String}
+ */
+
+function getUrl(repo, clone) {
+  var url;
+
+  // Get origin with protocol and add trailing slash or colon (for ssh)
+  var origin = addProtocol(repo.origin, clone);
+  if (/^git\@/i.test(origin)) origin = origin + ':';
+  else origin = origin + '/';
+
+  // Build url
+  if (clone) {
+    url = origin + repo.owner + '/' + repo.name + '.git';
+  } else {
+    if (repo.type === 'github')
+      url =
+        origin +
+        repo.owner +
+        '/' +
+        repo.name +
+        '/archive/' +
+        repo.checkout +
+        '.zip';
+    else if (repo.type === 'gitlab')
+      url =
+        origin +
+        repo.owner +
+        '/' +
+        repo.name +
+        '/repository/archive.zip?ref=' +
+        repo.checkout;
+    else if (repo.type === 'baswebapp')
+      url =
+        'http://gitlab.baswebapp.cn/bwa//' +
+        repo.name +
+        '/repository/archive.zip?ref=' +
+        repo.checkout;
+    else if (repo.type === 'bitbucket')
+      url =
+        origin +
+        repo.owner +
+        '/' +
+        repo.name +
+        '/get/' +
+        repo.checkout +
+        '.zip';
+  }
+
+  return url;
+}

package/lib/generator.js

@@ -0,0 +1,142 @@
+const fs = require('fs');
+const path = require('path');
+const isBinary = require('isbinaryfile');
+const ora = require('ora');
+const home = require('user-home');
+const download = require('./download');
+
+/**
+ * 生成
+ * @param {String} dir 目录
+ * @param {*} files
+ * @param {*} base
+ * @param {*} rootOptions
+ */
+async function generate(dir, files, base = '', rootOptions = {}) {
+  const glob = require('glob');
+
+  glob
+    .sync('**/*', {
+      cwd: dir,
+      nodir: true,
+    })
+    .forEach((rawPath) => {
+      const sourcePath = path.resolve(dir, rawPath);
+
+      const filename = path.join(base, rawPath);
+
+      //是否是二进制文件
+      if (isBinary.sync(sourcePath)) {
+        //如果是直接返回流
+        files[filename] = fs.readFileSync(sourcePath); // return buffer
+      } else {
+        //读取文件内容
+        let content = fs.readFileSync(sourcePath, 'utf-8');
+
+        if (path.basename(filename) === 'manifest.json') {
+          content = content.replace('{{name}}', rootOptions.projectName || '');
+        }
+
+        //_aaa.js => aaa.js
+        if (filename.charAt(0) === '_' && filename.charAt(1) !== '_') {
+          files[`.${filename.slice(1)}`] = content;
+        }
+        //__aaa.js => _aaa.js
+        else if (filename.charAt(0) === '_' && filename.charAt(1) === '_') {
+          files[`${filename.slice(1)}`] = content;
+        }
+        //原模原样拷贝
+        else {
+          files[filename] = content;
+        }
+      }
+    });
+}
+
+module.exports = (api, options, rootOptions) => {
+  //扩展package配置
+  // api.extendPackage(pkg => {
+  // 	return {
+  // 		dependencies: {
+  // 			"axios": "^0.19.2",
+  // 			"core-js": "^3.6.5",
+  // 			"vue": "^2.6.11",
+  // 			"vue-router": "^3.2.0",
+  // 			"vuex": "^3.4.0"
+  // 		},
+  // 		devDependencies: {
+  // 			"@vue/cli-plugin-babel": "^4.5.0",
+  // 			"@vue/cli-service": "^4.5.0",
+  // 			"babel-plugin-import": "^1.13.0",
+  // 			"less": "^3.0.4",
+  // 			"less-loader": "^5.0.0",
+  // 			"vue-template-compiler": "^2.6.11"
+  // 		}
+  // 	}
+  // });
+
+  // if (options.template === 'bwa/bwa-template-h5') {
+  // 	api.extendPackage(pkg => {
+  // 		return {
+  // 			dependencies: {
+  // 				"vant": "^2.10.3"
+  // 			},
+  // 			devDependencies: {
+
+  // 			}
+  // 		}
+  // 	})
+  // }
+  // else if (options.template === 'bwa/bwa-template-news') {
+  // 	api.extendPackage(pkg => {
+  // 		return {
+  // 			dependencies: {
+  // 				"vue-i18n": "^8.18.2"
+  // 			},
+  // 			devDependencies: {
+
+  // 			}
+  // 		}
+  // 	})
+  // }
+
+  api.render(async function (files) {
+    Object.keys(files).forEach((name) => {
+      delete files[name];
+    });
+
+    let _template = options.repo || options.template;
+    let _base = '';
+
+    //获取公共模版内容
+    // await generate(path.resolve(__dirname, './template/common'), files);
+
+    let _spinner = ora('模板下载中...');
+
+    //下载到根目录
+    let _tmpDir = path.join(
+      home,
+      '.bwa-app/templates',
+      _template.replace(/[/:]/g, '-')
+    );
+
+    _spinner.start();
+
+    await new Promise((resolve, reject) => {
+      //http://gitlab.baswebapp.cn/bwa/bwa-template-h5.git
+      //开始下载 /bwa/bwa-template-h5/repository/archive.zip?ref=master
+      download(_template, _tmpDir, (err) => {
+        //下载完成
+        _spinner.stop();
+
+        if (err) {
+          return reject(err);
+        }
+
+        resolve();
+      });
+    });
+
+    await generate(_tmpDir, files, _base);
+  });
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ctzy-web-client/create-web-client",
+  "version": "1.0.4",
+  "description": "创建 web client 项目模板工具",
+  "main": "index.js",
+  "files": [
+    "bin/",
+    "lib/",
+    "index.js",
+    "templates/"
+  ],
+  "bin": {
+    "create-web-client": "index.js"
+  },
+  "author": "tommy",
+  "license": "MIT",
+  "dependencies": {
+    "cross-spawn": "^7.0.3",
+    "download": "^8.0.0",
+    "git-clone": "^0.2.0",
+    "glob": "^8.0.3",
+    "isbinaryfile": "^5.0.0",
+    "kolorist": "^1.6.0",
+    "minimist": "^1.2.7",
+    "ora": "^6.1.2",
+    "prompts": "^2.4.2",
+    "rimraf": "^3.0.2",
+    "user-home": "^3.0.0"
+  }
+}

package/templates/qiankun-subapp-vue-template/.env

@@ -0,0 +1,5 @@
+# 请求相关 默认超时时间 单位秒
+VITE_REQUEST_TIMEOUT = 10
+# 请求相关 默认请求前缀
+VITE_REQUEST_BASE_URL = /api
+VITE_APPLICATION_NAME = app1

package/templates/qiankun-subapp-vue-template/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>test</title>
+  </head>
+  <body>
+    <script>
+      window.__DELAY_REGISTER_SERVICES__ = [];
+    </script>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>