@gx-design-vue/create-gx-cli 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gx-design-vue/create-gx-cli",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "license": "MIT",
   "type": "module",
   "description": "a cli to bootstrap gx project",

package/src/main.js

@@ -1,13 +1,13 @@
-import chalk from 'chalk'
 import fs from 'node:fs'
-import { reset } from 'kolorist'
-import prompts from 'prompts'
-import { fileURLToPath } from 'node:url'
-import Listr from 'listr'
-import ncp from 'ncp'
 import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { promisify } from 'node:util'
+import chalk from 'chalk'
+import { reset } from 'kolorist'
+import Listr from 'listr'
 import { createSpinner } from 'nanospinner'
+import ncp from 'ncp'
+import prompts from 'prompts'
 import { clone } from './git.js'
 
 const copy = promisify(ncp)
@@ -102,7 +102,7 @@ function download(url, root, projectName) {
       text: '项目创建成功，请依次执行以下命令'
     })
     doneLog(process.cwd(), root)
-  }, async function (err) {
+  }, async (err) => {
     console.log(err)
     spinner.error({ text: '下载失败' })
   })

package/template-mobile-vant-cli/.env

@@ -0,0 +1,3 @@
+VITE_IP_ADRESS=101.200.182.125
+VITE_HOME_PAGE=http://101.200.182.125/
+VITE_UPLOAD_PATH=api/prod-api

package/template-mobile-vant-cli/.env.development

@@ -4,16 +4,14 @@ VITE_NODE_ENV= development
 # environment 代码环境
 VITE_USE_MODE = development
 
-VITE_USE_CDN= false
-
 # 是否开启mock
 VITE_USE_MOCK = true
 
-# 是否使用v-console
-VITE_USE_V_CONSOLE = false
-
 # 是否删除console
 VITE_DROP_CONSOLE = false
 
+# proxy 代理的api 前缀
+VITE_PROXY_PREFIX = /devApi
+
 # api前缀
-VITE_BASE_URL=/mock-server
+VITE_BASE_URL=/api/prod-api

package/template-mobile-vant-cli/.env.pro

@@ -4,16 +4,25 @@ VITE_NODE_ENV= production
 # environment 代码环境
 VITE_USE_MODE = pro
 
-VITE_USE_CDN= false
-
-# 是否使用v-console
-VITE_USE_V_CONSOLE = false
-
 # 是否开启mock
 VITE_USE_MOCK = false
 
 # 是否删除console
-VITE_DROP_CONSOLE = true
+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
+
+# 是否为打包后的文件提供传统浏览器兼容性支持
+VITE_LEGACY = false
+
+# proxy 代理的api 前缀
+VITE_PROXY_PREFIX = /proApi
 
 # api前缀
-VITE_BASE_URL=/mock-server
+VITE_BASE_URL=/api/prod-api

package/template-mobile-vant-cli/.env.production

@@ -1,19 +1,31 @@
-# 实际执行环境 production
+# 项目启动执行环境
 VITE_NODE_ENV= production
 
-# environment 代码环境
+# 代码运行环境
 VITE_USE_MODE = production
 
-VITE_USE_CDN= false
+# 是否开启mock
+VITE_USE_MOCK = false
+
+# 是否删除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'
 
-# 是否使用v-console
+# 使用压缩时是否删除源文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# 是否使用vconsole
 VITE_USE_V_CONSOLE = true
 
-# 是否开启mock
-VITE_USE_MOCK = true
+# 是否为打包后的文件提供传统浏览器兼容性支持
+VITE_LEGACY = false
 
-# 是否删除console
-VITE_DROP_CONSOLE = true
+# proxy 代理的api 前缀
+VITE_PROXY_PREFIX = /devApi
 
 # api前缀
-VITE_BASE_URL=/mock-server
+VITE_BASE_URL=/api/prod-api

package/template-mobile-vant-cli/commitlint.config.cjs

@@ -0,0 +1,32 @@
+module.exports = {
+  ignores: [commit => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 108],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'workflow',
+        'types',
+        'release',
+      ],
+    ],
+  },
+}

package/template-mobile-vant-cli/config/default/defaultSettings.ts

@@ -0,0 +1,70 @@
+/**
+ * @description 导出默认通用配置
+ */
+const settingConfig: SettingConfig = {
+  system: {
+    // 标题 （包括初次加载雪花屏的标题 页面的标题 浏览器的标题）
+    title: 'Gx Vant Mobile',
+    // 短标题
+    shortName: 'gx_vant_mobile',
+    // 标题分隔符
+    titleSeparator: ' - ',
+    // 标题是否反转 如果为false:"page - title"，如果为ture:"title - page"
+    titleReverse: false,
+    // 是否初始化loading加载
+    appInit: {
+      loading: {
+        text: '资源加载中...'
+      }
+    },
+    // 路由模式，可选值为 browser 或 hash
+    routerMode: 'hash',
+    // 不经过token校验的路由
+    routesWhiteList: [ '/user/login', '/user/register' ],
+    // 是否开启登录拦截
+    loginInterception: true,
+    // 是否开启登录RSA加密
+    loginRSA: false
+  },
+  servive: {
+    // 开发环境端口号
+    port: 3000,
+  },
+  build: {
+    // 开发以及部署时的URL，hash模式时在不确定二级目录名称的情况下建议使用""代表相对路径或者"/二级目录/"，history模式默认使用"/"或者"/二级目录/"
+    publicPath: './',
+    // 生产环境构建文件的目录名
+    outputDir: 'dist',
+    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
+    assetsDir: 'static',
+  },
+  cdn: {
+    // 开启cdn
+    use: false,
+    // cdn 地址
+    url: 'https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}',
+    // 模块集合
+    modules: []
+  },
+  // proxy 配置
+  proxy: {
+    // 是否开启代理
+    use: true,
+    // 代理的目标地址
+    target: 'http://127.0.0.1:3000',
+  },
+  mock: {
+    prefix: '/mock-server',
+    checkToken: 0,
+  },
+  token: {
+    // token名称
+    name: 'Authorization',
+    // token在localStorage、sessionStorage、cookie存储的key的名称
+    storageName: 'accessToken',
+    // token存储位置localStorage sessionStorage cookie
+    storage: 'localStorage',
+  },
+}
+
+export default settingConfig

package/template-mobile-vant-cli/config/default/network.ts

@@ -0,0 +1,10 @@
+/**
+ * @description 导出默认网路配置
+ */
+const networkSetting: NetworkConfig = {
+  // 最长请求时间
+  requestTimeout: 10000,
+  // 操作正常code，支持String、Array、Number多种类型
+  successCode: [ 200, 0 ]
+}
+export default networkSetting

package/template-mobile-vant-cli/config/default/proxy.ts

@@ -0,0 +1,50 @@
+/**
+ * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
+ * The agent cannot take effect in the production environment
+ * so there is no configuration of the production environment
+ * For details, please see
+ * https://pro.ant.design/docs/deploy
+ */
+import type { ProxyOptions } from 'vite'
+import { isObject, isString } from '@gx-design-vue/pro-utils'
+import defaultSettings from './defaultSettings'
+
+type ProxyTargetList = ProxyOptions & { rewrite: (path: string) => string }
+
+export function createProxy(prefix) {
+  const { proxy } = defaultSettings
+
+  const ret: Record<ViteEnv['VITE_APP_ENV'], Record<string, Partial<ProxyTargetList>>> = {
+    dev: {
+      [prefix]: {}
+    },
+    pro: {
+      [prefix]: {}
+    }
+  }
+
+  if (isObject(proxy.target)) {
+    Object.keys(proxy.target).forEach((prefix) => {
+      const proxyOptions: ProxyTargetList = {
+        target: `${proxy.target[prefix]}`,
+        changeOrigin: true,
+        ws: true,
+        rewrite: path => path.replace(new RegExp(`^${prefix}`), '')
+      }
+
+      ret.dev[prefix] = proxyOptions
+      ret.pro[prefix] = proxyOptions
+    })
+  } else if (isString(proxy.target)) {
+    const proxyOptions: ProxyTargetList = {
+      target: `${proxy.target}`,
+      changeOrigin: true,
+      ws: true,
+      rewrite: path => path.replace(new RegExp(`^${prefix}`), '')
+    }
+    ret.dev[prefix] = proxyOptions
+    ret.pro[prefix] = proxyOptions
+  }
+
+  return ret
+}

package/template-mobile-vant-cli/config/default/theme.ts

@@ -0,0 +1,3 @@
+export default {
+  colorPrimary: '#1677FF'
+} as ProAliasToken

package/template-mobile-vant-cli/config/index.ts

@@ -0,0 +1,11 @@
+import defaultSettings from './default/defaultSettings'
+import network from './default/network'
+import theme from './default/theme'
+
+export * from './default/proxy'
+
+export {
+  defaultSettings,
+  network,
+  theme
+}

package/template-mobile-vant-cli/eslint.config.js

@@ -2,13 +2,12 @@ import antFuEslint from '@antfu/eslint-config'
 
 export default antFuEslint({
   vue: true,
-  vueJsx: false,
+  vueJsx: true,
   typescript: true,
   gitignore: true,
   markdown: true,
   ignores: [
     'src/assets/**/*.js',
-    'build/plugin/viteMock',
     'public',
     'tsconfig.*.json',
     'tsconfig.json'
@@ -16,7 +15,14 @@ export default antFuEslint({
 }, {
   rules: {
     'curly': 0,
+    'vue/eqeqeq': 0,
     'no-console': 0,
+    'vue/no-unused-refs': 0,
+    'no-template-curly-in-string': 0,
+    'vue/prop-name-casing': 0,
+    'vue/html-comment-content-spacing': 0,
+    'style/indent-binary-ops': 0,
+    'antfu/if-newline': 0,
     'import/order': 0,
     'style/quote-props': 0,
     'style/brace-style': 0,
@@ -40,6 +46,8 @@ export default antFuEslint({
     'eslint-comments/no-unlimited-disable': 0,
     'no-async-promise-executor': 0,
     'unicorn/escape-case': 0,
+    'ts/ban-ts-comment': 0,
+    'ts/prefer-ts-expect-error': 0,
     'ts/method-signature-style': 0,
     'style/no-trailing-spaces': 0,
     'ts/consistent-type-imports': 0,

package/template-mobile-vant-cli/index.html

@@ -1,24 +1,25 @@
 <!DOCTYPE html>
 <html lang="zh">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-    <meta
-      name="viewport"
-      content="width=device-width,viewport-fit=cover,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
-    />
-    <title>vue-vant-mobile</title>
-    <% for (var i in injectLink) { %>
-    <link rel="stylesheet" type="text/css" href="<%= injectLink[i] %>" />
-    <% } %>
-  </head>
-  <body>
-    <div id="app"></div>
-    <% for (var i in injectScript) { %>
-    <script type="text/javascript" src="<%= injectScript[i] %>"></script>
-    <% } %>
-    <script type="module" src="/src/main.ts"></script>
-    <%- injectVlogScript %>
-    <script src="/js/flexible.js"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" type="image/x-jpg" />
+  <meta
+    name="viewport"
+    content="width=device-width,viewport-fit=cover,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
+  />
+  <title><%= VUE_APP_TITLE %></title>
+  <% for (var i in injectLink) { %>
+  <link rel="stylesheet" type="text/css" href="<%= injectLink[i] %>" />
+  <% } %>
+</head>
+<body>
+<div id="app">
+  <%- injectAppContent %>
+</div>
+<% for (var i in injectScript) { %>
+<script type="text/javascript" src="<%= injectScript[i] %>"></script>
+<% } %>
+<script type="module" src="/src/main.ts"></script>
+<%- injectVlogScript %>
+</body>
 </html>

package/template-mobile-vant-cli/{build → internal/vite-config/generate}/generateModifyVars.ts

@@ -1,4 +1,4 @@
-import { resolve } from 'path'
+import { resolve } from 'node:path'
 
 export function generateModifyVars() {
   return {

package/template-mobile-vant-cli/internal/vite-config/rollupOptions/index.ts

@@ -0,0 +1,22 @@
+import type { RollupOptions } from 'rollup'
+import externalGlobals from 'rollup-plugin-external-globals'
+import { pathResolve } from '../util'
+import { getExternalMap } from '../vite/cdn'
+import { configManualChunk } from '../vite/optimizer'
+
+export default function (useCdn: boolean) {
+  return {
+    input: {
+      index: pathResolve('index.html')
+    },
+    // 静态资源分类打包
+    output: {
+      manualChunks: configManualChunk,
+      chunkFileNames: 'static/js/[name]-[hash].js',
+      entryFileNames: 'static/js/[name]-[hash].js',
+      assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+    },
+    external: useCdn ? Object.keys(getExternalMap()) : [],
+    plugins: useCdn ? [ externalGlobals(getExternalMap()) ] : []
+  } as RollupOptions
+}

package/template-mobile-vant-cli/internal/vite-config/util/hash.ts

@@ -0,0 +1,17 @@
+import { createHash } from 'node:crypto'
+
+function createContentHash(content: string, hashLSize = 12) {
+  const hash = createHash('sha256').update(content)
+  return hash.digest('hex').slice(0, hashLSize)
+}
+
+function strToHex(str: string) {
+  const result: string[] = []
+  for (let i = 0; i < str.length; ++i) {
+    const hex = str.charCodeAt(i).toString(16)
+    result.push((`000${hex}`).slice(-4))
+  }
+  return result.join('').toUpperCase()
+}
+
+export { createContentHash, strToHex }

package/template-mobile-vant-cli/internal/vite-config/util/index.ts

@@ -0,0 +1,132 @@
+import fs from 'node:fs'
+import path, { resolve } from 'node:path'
+import dotenv from 'dotenv'
+
+export const rootPath = process.cwd()
+
+export function pathResolve(dir: string) {
+  return resolve(process.cwd(), '.', dir)
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+  return process.env.REPORT === 'true'
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {}
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n')
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName
+
+    ret[envName] = realName
+    process.env[envName] = realName
+  }
+  return ret
+}
+
+/**
+ * 获取当前环境下生效的配置文件名
+ */
+function getConfFiles() {
+  const script = process.env.npm_lifecycle_script
+  const reg = new RegExp('--mode ([a-z]+)')
+  const result = reg.exec(script as string) as any
+  if (result) {
+    const mode = result[1] as string
+    return [ '.env', `.env.${mode}` ]
+  }
+  return [ '.env', '.env.production' ]
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+export function getEnvConfig(confFiles = getConfFiles()): Partial<ViteEnv> {
+  let envConfig: Partial<ViteEnv> = {}
+  confFiles.forEach((item) => {
+    try {
+      const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)))
+      envConfig = { ...envConfig, ...env }
+    } catch (e) {
+      console.error(`Error in parsing ${item}`, e)
+    }
+  })
+  return envConfig
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+  return path.resolve(process.cwd(), ...dir)
+}
+
+export function getDefaultPath(supportTs = true) {
+  return path.resolve(process.cwd(), `src/main.${supportTs ? 'ts' : 'js'}`)
+}
+
+export function fileExists(f: string) {
+  try {
+    fs.accessSync(f, fs.constants.W_OK)
+    return true
+    // eslint-disable-next-line unused-imports/no-unused-vars
+  } catch (error) {
+    return false
+  }
+}
+
+function q(t) {
+  return t.reduce((n, e) => n + e)
+}
+
+function Gt(t, n?: number) {
+  if (t === 0)
+    return '0 Bytes'
+  const e = 1024
+  const r = n || 2
+  const o = [ 'Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ]
+  const s = Math.floor(Math.log(t) / Math.log(e))
+  return `${Number.parseFloat((t / e ** s).toFixed(r))} ${o[s]}`
+}
+
+const ot: number[] = []
+
+export function getPackageSize({ folder, callBack, format = !0 }) {
+  fs.readdir(folder, (err, files) => {
+    if (err)
+      throw err
+
+    let index = 0
+    const callBacks = () => {
+      if (++index === files.length) {
+        callBack(format ? Gt(q(ot)) : q(ot))
+      }
+    }
+
+    files.forEach((p) => {
+      fs.stat(`${folder}/${p}`, (err, stat) => {
+        if (err)
+          throw err
+        if (stat.isFile()) {
+          ot.push(stat.size)
+          callBacks()
+        } else {
+          getPackageSize({
+            folder: `${folder}/${p}`,
+            callBack: callBacks
+          })
+        }
+      })
+    })
+
+    files.length === 0 && callBack(0)
+  })
+}

package/template-mobile-vant-cli/internal/vite-config/vite/cdn.ts

@@ -0,0 +1,65 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { defaultSettings } from '../../../config'
+
+const { cdn } = defaultSettings
+
+const { modules = [], url = '' } = cdn
+
+function getModuleVersion(name: string): string {
+  const pwd = process.cwd()
+  const pkgFile = path.join(pwd, 'node_modules', name, 'package.json')
+  if (fs.existsSync(pkgFile)) {
+    const pkgJson = JSON.parse(fs.readFileSync(pkgFile, 'utf8'))
+    return pkgJson.version
+  }
+
+  return ''
+}
+
+function isFullPath(path: string) {
+  return path.startsWith('http:') || path.startsWith('https:') || path.startsWith('//')
+}
+
+function renderUrl(data: CdnModuleList & {
+  version: string
+}) {
+  const { path } = data
+  if (isFullPath(path))
+    return path
+  return url.replace(/\{name\}/g, data.name)
+    .replace(/\{version\}/g, data.version)
+    .replace(/\{path\}/g, path)
+}
+
+function getCdnModuleFiles() {
+  return modules.map((m) => {
+    const version = getModuleVersion(m.name)
+    if (!version) {
+      throw new Error(`modules: ${m.name} package.json file does not exist`)
+    }
+
+    let css = m.css || [] as string[]
+    if (!Array.isArray(css) && css) {
+      css = [ css ]
+    }
+
+    return {
+      js: renderUrl({
+        ...m,
+        version
+      }),
+      css
+    }
+  })
+}
+
+export function getExternalMap() {
+  const externalMap = {}
+  modules.forEach((v) => {
+    externalMap[v.name] = v.globalName
+  })
+  return externalMap
+}
+
+export default getCdnModuleFiles()

package/template-mobile-vant-cli/{build → internal/vite-config/vite}/optimizer.ts

@@ -4,13 +4,21 @@ const vendorLibs: { match: string[]; output: string }[] = [
   {
     match: ['vant'],
     output: 'vant',
+  },
+  {
+    match: ['crypto-js'],
+    output: 'crypto-js',
+  },
+  {
+    match: ['lodash-es'],
+    output: 'lodash-es',
   }
 ]
 
 export const configManualChunk: GetManualChunk = (id: string) => {
   if (/[\\/]node_modules[\\/]/.test(id)) {
     const matchItem = vendorLibs.find((item) => {
-      const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig')
+      const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'gi')
       return reg.test(id)
     })
     return matchItem ? matchItem.output : null