@gx-design-vue/create-gx-cli 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gx-design-vue/create-gx-cli",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "license": "MIT",
   "description": "a cli to bootstrap gx project",
   "main": "src/index.js",
@@ -9,7 +9,7 @@
     "access": "public"
   },
   "keywords": [
-    "gx-cli",
+    "create-gx-cli",
     "create-project"
   ],
   "author": "gx12358",
@@ -20,7 +20,9 @@
     "kolorist": "^1.6.0",
     "listr": "^0.14.3",
     "minimist": "^1.2.7",
+    "nanospinner": "^1.1.0",
     "ncp": "^2.0.0",
+    "obtain-git-repo": "^1.0.2",
     "prompts": "^2.4.2"
   },
   "files": [

package/src/cli.js

@@ -1,28 +1,32 @@
-import fs from 'fs'
-import path from 'path'
 import minimist from 'minimist'
 import prompts from 'prompts'
-import { yellow, reset } from 'kolorist'
+import { yellow, reset, blue, red, green } from 'kolorist'
 import { createProject } from './main'
 
 const defaultTargetDir = 'gx-cli-project'
 
-function getTemplate() {
-  const templateList = []
-  const files = fs.readdirSync(path.join(process.cwd(), '../'))
-
-  for (const file of files) {
-    if (file.indexOf('template') >= 0) {
-      templateList.push(file)
-    }
+const FRAMEWORKS = [
+  {
+    name: 'gx-design-pro',
+    color: red
+  },
+  {
+    name: 'design-pro',
+    color: blue
+  },
+  {
+    name: 'mobile-vant-cli',
+    color: yellow
+  },
+  {
+    name: 'mobile-vant-html',
+    color: green
   }
-  return templateList.map((el) => {
-    return {
-      name: el.split('-')[1],
-      color: yellow
-    }
-  })
-}
+]
+
+const TEMPLATES = FRAMEWORKS.map(
+  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
+).reduce((a, b) => a.concat(b), [])
 
 function formatTargetDir(targetDir) {
   return targetDir ? targetDir.trim().replace(/\/+$/g, '') : ''
@@ -39,11 +43,6 @@ function parseArgumentsIntoOptions() {
 }
 
 async function promptForMissingOptions(options) {
-  const FRAMEWORKS = getTemplate()
-
-  const TEMPLATES = FRAMEWORKS.map(
-    (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
-  ).reduce((a, b) => a.concat(b), [])
   const answers = await prompts([
     {
       type: options.projectName ? null : 'text',
@@ -59,7 +58,7 @@ async function promptForMissingOptions(options) {
           ? reset(
             `"${options.template}" isn't a valid template. Please choose from below: `,
           )
-          : reset('Select a framework:'),
+          : reset('Select a Template:'),
       choices: FRAMEWORKS.map((framework) => {
         const frameworkColor = framework.color
         return {

package/src/main.js

@@ -5,11 +5,20 @@ import Listr from 'listr'
 import ncp from 'ncp'
 import path from 'path'
 import { promisify } from 'util'
+import { createSpinner } from 'nanospinner'
+import { download } from 'obtain-git-repo'
 
 const access = promisify(fs.access)
 const copy = promisify(ncp)
 const writeFileSync = promisify(fs.writeFileSync)
 
+const gitRepositoryList = [
+  {
+    name: 'gx-design-pro',
+    git: 'https://gitee.com/gx12358/vue-antd-admin.git#v2'
+  }
+]
+
 async function copyTemplateFiles(templateDir, root) {
   return copy(templateDir, root, {
     clobber: false
@@ -17,7 +26,32 @@ async function copyTemplateFiles(templateDir, root) {
 }
 
 function writeFile(path, content) {
-  writeFileSync(path, content)
+  if (Object.keys(content).length > 0) {
+    writeFileSync(path, content)
+  }
+}
+
+function editPackageJson(root, projectName) {
+  let pkg = {}
+
+  if (fs.existsSync(path.join(root, `package.json`))) {
+    pkg = JSON.parse(
+      fs.readFileSync(path.join(root, `package.json`), 'utf-8')
+    )
+
+    pkg.name = projectName
+  }
+
+  writeFile(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2))
+}
+
+function doneLog(cwd, root) {
+  if (root !== cwd) {
+    console.log(chalk.blueBright(`cd ${path.relative(cwd, root)}`))
+  }
+  console.log(chalk.blueBright(`pnpm(yarn、npm) install`))
+  console.log(chalk.blueBright(`pnpm(yarn、npm) run dev`))
+  console.log()
 }
 
 export async function createProject(options) {
@@ -28,48 +62,71 @@ export async function createProject(options) {
   const getProjectName = () =>
     options.projectName === '.' ? path.basename(path.resolve()) : options.projectName
 
+  const downloadGit = gitRepositoryList.find(el => el.name === options.template)
+
   const templateDir = path.resolve(
     fileURLToPath(import.meta.url),
     '../..',
-    `template-${options.template}-ts`
+    `template-${options.template}`
   )
 
-  const pkg = JSON.parse(
-    fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
-  )
-
-  pkg.name = options.projectName || getProjectName()
-
   try {
     await access(templateDir, fs.constants.R_OK)
   } catch (err) {
-    console.error('%s Invalid template name', chalk.red.bold('ERROR'))
+    if (!downloadGit) {
+      console.log(chalk.redBright('模版目录不存在'))
+      process.exit(1)
+    }
+  }
+
+  //目录是否已经存在
+  const dirIsExists = fs.existsSync(root)
+
+  if (dirIsExists) {
+    console.log(chalk.redBright('目录已经存在'))
     process.exit(1)
   }
 
-  const tasks = new Listr(
-    [
-      {
-        title: 'Copy Project Files',
-        task: () => copyTemplateFiles(templateDir, root)
-      },
-      {
-        title: 'Edit Project package.json',
-        task: () => writeFile(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2))
+  if (downloadGit) {
+    const spinner = createSpinner(`开始下载...${downloadGit.git}`).start()
+    // 下载git代码
+    download(`direct:${downloadGit.git}`, root, { clone: true }, async function(err) {
+      if (err) {
+        console.log(err)
+        spinner.error({ text: '下载失败' })
+      } else {
+        await editPackageJson(root, options.projectName || getProjectName())
+        spinner.success({
+          text: '项目创建成功，请依次执行以下命令'
+        })
+        doneLog(cwd, root)
       }
-    ],
-    {
-      exitOnError: false
+    })
+  } else {
+    let pkg = {}
+
+    if (fs.existsSync(path.join(templateDir, `package.json`))) {
+      pkg = JSON.parse(
+        fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
+      )
+
+      pkg.name = options.projectName || getProjectName()
     }
-  )
+    const tasks = new Listr(
+      [
+        {
+          title: '项目创建成功，请依次执行以下命令',
+          task: () => copyTemplateFiles(templateDir, root)
+        }
+      ],
+      {
+        exitOnError: false
+      }
+    )
 
-  await tasks.run()
-  console.log(`\nDone. Now run:\n`)
-  if (root !== cwd) {
-    console.log(`cd ${path.relative(cwd, root)}`)
+    await tasks.run()
+    await editPackageJson(root)
+    doneLog(cwd, root)
   }
-  console.log(`pnpm(yarn、npm) install`)
-  console.log(`pnpm(yarn、npm) run dev`)
-  console.log()
   return true
 }

package/template-design-pro/.env

@@ -0,0 +1,2 @@
+# 是否使用动态主题（确定好主题后，请将此变量设置为false，否则css会引入全量）
+VITE_USE_THEME = true

package/template-design-pro/.env.development

@@ -0,0 +1,18 @@
+# 实际执行环境 development
+VITE_NODE_ENV= development
+
+# environment 代码环境
+VITE_USE_MODE = development
+
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 是否删除console
+VITE_DROP_CONSOLE = false
+
+# api前缀
+VITE_BASE_URL=/api
+
+# oss信息
+VITE_OSS_BUCKET = oss-*
+VITE_OSS_ORIGIN = oss-cn-*

package/template-design-pro/.env.pro

@@ -0,0 +1,32 @@
+# 实际执行环境 production
+VITE_NODE_ENV= production
+
+# environment 代码环境
+VITE_USE_MODE = production
+
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 是否删除console
+VITE_DROP_CONSOLE = false
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# 使用压缩时是否删除源文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# 是否使用pwa
+VITE_USE_PWA = false
+
+# 是否为打包后的文件提供传统浏览器兼容性支持
+VITE_LEGACY = false
+
+# api前缀
+VITE_BASE_URL=/mock-server
+
+# oss信息
+VITE_OSS_BUCKET = oss-*
+VITE_OSS_ORIGIN = oss-cn-*

package/template-design-pro/.env.production

@@ -0,0 +1,32 @@
+# 实际执行环境 test
+VITE_NODE_ENV= test
+
+# environment 代码环境
+VITE_USE_MODE = test
+
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 是否删除console
+VITE_DROP_CONSOLE = false
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# 使用压缩时是否删除源文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# 是否使用pwa
+VITE_USE_PWA = false
+
+# 是否为打包后的文件提供传统浏览器兼容性支持
+VITE_LEGACY = false
+
+# api前缀
+VITE_BASE_URL=/mock-server
+
+# oss信息
+VITE_OSS_BUCKET = oss-*
+VITE_OSS_ORIGIN = oss-cn-*

package/template-design-pro/.env.test

@@ -0,0 +1,20 @@
+VITE_NODE_ENV=production
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = false

package/template-design-pro/.gitpod.yml

@@ -0,0 +1,6 @@
+tasks:
+  - init: npm i -g pnpm && pnpm install && pnpm run build
+    command: pnpm run dev
+ports:
+  - port: 3000
+    onOpen: open-preview

package/template-design-pro/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+git add .

package/template-design-pro/.yarnclean

@@ -0,0 +1,48 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
+
+!istanbul-reports/lib/html/assets
+!istanbul-api/node_modules/istanbul-reports/lib/html/assets

package/template-design-pro/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 gx12358
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template-design-pro/README.md

@@ -0,0 +1,111 @@
+<div align="center"> <a href="https://gitee.com/gx12358/vite-admin-pro"> <img alt="VbenAdmin Logo" width="200" height="200" src="https://zbbf9-hw.ahtv.cn/ahtv-obs/20210811/d5b6f8d7-b759-243d-b8f3-906a6b8570bf.png"> </a> <br> <br>
+
+<h1>GX Pro Admin（Ant Design Vue）</h1>
+</div>
+
+## 简介
+
+GX Pro Admin 是一个免费开源的中后台模版。使用了最新的`vue3.0+`,`vite2`,`TypeScript`, `Ant Design Vue3.0+`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+
+## 特性
+
+- **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发
+- **TypeScript**: 应用程序级 JavaScript 的语言
+- **主题**：可配置的主题
+- **Mock 数据** 内置 Mock 数据方案
+- **权限** 内置完善的动态路由权限生成方案
+- **组件** 二次封装了多个常用的组件
+
+## 预览
+
+- [🚀 pro 版演示地址](http://121.36.16.172:9000/gx.pro.admin)
+
+测试账号: admin/123456
+
+## 准备
+
+- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
+- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
+- [Ant-Design-Vue](https://next.antdv.com/components/overview-cn/) - ui 基本使用
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
+
+## 安装使用
+
+- 获取项目代码
+
+```bash
+git clone https://gitee.com/gx12358/vite-admin-pro
+```
+
+- 安装依赖
+
+```bash
+cd gx-admin-pro
+
+yarn install
+
+```
+
+- 运行
+
+```bash
+yarn serve
+```
+
+- 打包
+
+```bash
+yarn build
+```
+
+## Git 贡献提交规范
+
+- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+
+  - `feat` 增加新功能
+  - `fix` 修复问题/BUG
+  - `style` 代码风格相关无影响运行结果的
+  - `perf` 优化/性能提升
+  - `refactor` 重构
+  - `revert` 撤销修改
+  - `test` 测试相关
+  - `docs` 文档/注释
+  - `chore` 依赖更新/脚手架配置修改等
+  - `workflow` 工作流改进
+  - `ci` 持续集成
+  - `types` 类型定义文件更改
+  - `wip` 开发中
+
+## 浏览器支持
+
+本地开发推荐使用`Chrome 80+` 浏览器
+
+支持现代浏览器, 不支持 IE
+
+## 相关仓库
+
+如果这些插件对你有帮助，可以给一个 star 支持下
+
+- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - 用于 html 模版转换及压缩
+- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - 用于组件库样式按需引入
+- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - 用于打包压缩图片资源
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - 用于打包输出.gz|.brotil 文件
+- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - 用于快速生成 svg 雪碧图
+
+## 维护者
+
+[@gx12358](https://gitee.com/gx12358)
+
+## 交流
+
+`GX-ADMIN-PRO` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
+
+- QQ 群 `871430530`
+
+## License
+
+[MIT © gx12358-2021](./LICENSE)

package/template-design-pro/build/constant.ts

@@ -0,0 +1,6 @@
+/**
+ * The name of the configuration file entered in the production environment
+ */
+export const GLOB_CONFIG_FILE_NAME = '_app.config.js'
+
+export const OUTPUT_DIR = 'dist'

package/template-design-pro/build/generate/generateModifyVars.ts

@@ -0,0 +1,18 @@
+import { getThemeVariables } from 'ant-design-vue/dist/theme'
+import { resolve } from 'path'
+import config from '../../config/config'
+
+export function generateModifyVars(viteEnv: ViteEnv) {
+  const { VITE_USE_THEME } = viteEnv
+
+  const modifyVars = getThemeVariables()
+
+  const modifyVarsParams = {
+    ...modifyVars,
+    hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`
+  }
+
+  if (!VITE_USE_THEME) modifyVarsParams['primary-color'] = config.theme.primaryColor
+
+  return modifyVarsParams
+}

package/template-design-pro/build/getConfigFileName.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
+import config from '../config/config'
+
+const { shortName } = config.defaultSettings
+
+export const getConfigFileName = (_: RecordType) => {
+  return `__PRODUCTION__${shortName || '__APP'}__CONF__`
+    .toUpperCase()
+    .replace(/\s/g, '')
+}

package/template-design-pro/build/script/buildConf.ts

@@ -0,0 +1,44 @@
+/**
+ * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
+ */
+import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant'
+import fs, { writeFileSync } from 'fs-extra'
+import chalk from 'chalk'
+
+import { getRootPath, getEnvConfig } from '../utils'
+import { getConfigFileName } from '../getConfigFileName'
+
+import pkg from '../../package.json'
+
+function createConfig(
+  {
+    configName,
+    config,
+    configFileName = GLOB_CONFIG_FILE_NAME
+  }: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} }
+) {
+  try {
+    const windowConf = `window.${configName}`
+    // Ensure that the variable will not be modified
+    const configStr = `${windowConf}=${JSON.stringify(config)};
+      Object.freeze(${windowConf});
+      Object.defineProperty(window, "${configName}", {
+        configurable: false,
+        writable: false,
+      });
+    `.replace(/\s/g, '')
+    fs.mkdirp(getRootPath(OUTPUT_DIR))
+    writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr)
+
+    console.log(chalk.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`)
+    console.log(chalk.gray(OUTPUT_DIR + '/' + chalk.green(configFileName)) + '\n')
+  } catch (error) {
+    console.log(chalk.red('configuration file configuration file failed to package:\n' + error))
+  }
+}
+
+export function runBuildConfig() {
+  const config = getEnvConfig()
+  const configFileName = getConfigFileName(config)
+  createConfig({ config, configName: configFileName })
+}

package/template-design-pro/build/script/postBuild.ts

@@ -0,0 +1,25 @@
+// #!/usr/bin/env node
+import chalk from 'chalk'
+import reSetRootHtml from './reSetRootHtml'
+import { runBuildConfig } from './buildConf'
+import { wrapperEnv, getEnvConfig } from '../utils'
+
+import pkg from '../../package.json'
+
+export const runBuild = async () => {
+  try {
+    const argvList = process.argv.splice(2)
+
+    // Generate configuration file
+    if (!argvList.includes('disabled-config')) {
+      await runBuildConfig()
+    }
+
+    !wrapperEnv(getEnvConfig()).VITE_USE_THEME && reSetRootHtml('ant-design-vue')
+    console.log(`✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - build successfully!')
+  } catch (error) {
+    console.log(chalk.red('vite build error:\n' + error))
+    process.exit(1)
+  }
+}
+runBuild()