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

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

@@ -0,0 +1,20 @@
+import chalk from 'chalk'
+import fs, { readFileSync } from 'fs-extra'
+import { getRootPath } from '../utils'
+import { OUTPUT_DIR } from '../constant'
+
+import pkg from '../../package.json'
+
+export default function reSetRootHtml(libName: string) {
+  const targetPath = getRootPath(`${OUTPUT_DIR}/index.html`)
+  let htmlStr = readFileSync(targetPath).toString('utf-8')
+  const startLen = htmlStr.lastIndexOf(`<link rel="stylesheet" href="./assets/${libName}.`)
+  if (startLen > 0) {
+    const cssLen = '<link rel="stylesheet" href="./assets/ant-design-vue.'.length + '********.css">'.length
+
+    const end = startLen + cssLen
+    htmlStr = htmlStr.slice(0, startLen) + htmlStr.slice(end)
+    fs.writeFileSync(targetPath, htmlStr)
+    console.log(`✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - resetHtml successfully!')
+  }
+}

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

@@ -0,0 +1,85 @@
+import fs from 'fs'
+import path from 'path'
+import dotenv from 'dotenv'
+
+export function isDevFn(mode: string): boolean {
+  return mode === 'development'
+}
+
+export function isProdFn(mode: string): boolean {
+  return mode === 'production'
+}
+
+/**
+ * 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
+  } catch (error) {
+    return false
+  }
+}

package/template-design-pro/build/vite/cdn.ts

@@ -0,0 +1,7 @@
+const css = []
+
+const js = [
+  'https://cdn.staticfile.org/echarts/5.2.1/echarts.min.js',
+]
+
+export const cdnConf = { css, js }

package/template-design-pro/build/vite/optimizer.ts

@@ -0,0 +1,22 @@
+import type { GetManualChunk } from 'rollup'
+
+const vendorLibs: { match: string[]; output: string }[] = [
+  {
+    match: ['ant-design-vue'],
+    output: 'ant-design-vue',
+  },
+  {
+    match: ['@gx-design-vue/pro-table'],
+    output: 'pro-table',
+  },
+]
+
+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')
+      return reg.test(id)
+    })
+    return matchItem ? matchItem.output : null
+  }
+}

package/template-design-pro/build/vite/plugin/autoImport.ts

@@ -0,0 +1,18 @@
+import autoImport from 'unplugin-auto-import/vite'
+
+export function createAutoImport() {
+  return [
+    autoImport({
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/, /\.vue\?vue/, // .vue
+        /\.md$/, // .md
+      ],
+      imports: [
+        'vue',
+        'vue-router'
+      ],
+      dts: 'types/auto-imports.d.ts'
+    })
+  ]
+}

package/template-design-pro/build/vite/plugin/compress.ts

@@ -0,0 +1,35 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { Plugin } from 'vite'
+
+import compressPlugin from 'vite-plugin-compression'
+
+export function configCompressPlugin(
+  compress: 'gzip' | 'brotli' | 'none',
+  deleteOriginFile = false
+): Plugin | Plugin[] {
+  const compressList = compress.split(',')
+
+  const plugins: Plugin[] = []
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile
+      })
+    )
+  }
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile
+      })
+    )
+  }
+  return plugins
+}

package/template-design-pro/build/vite/plugin/hmr.ts

@@ -0,0 +1,25 @@
+import type { Plugin } from 'vite'
+
+/**
+ * TODO
+ * Temporarily solve the Vite circular dependency problem, and wait for a better solution to fix it later. I don't know what problems this writing will bring.
+ * @returns
+ */
+
+export function configHmrPlugin(): Plugin {
+  return {
+    name: 'singleHMR',
+    handleHotUpdate({ modules, file }) {
+      if (file.match(/xml$/)) return []
+
+      modules.forEach((m) => {
+        if (!m.url.match(/\.(css|less)/)) {
+          m.importedModules = new Set()
+          m.importers = new Set()
+        }
+      })
+
+      return modules
+    }
+  }
+}

package/template-design-pro/build/vite/plugin/html.ts

@@ -0,0 +1,47 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+import { PluginOption } from 'vite'
+
+import { createHtmlPlugin } from 'vite-plugin-html'
+
+import pkg from '../../../package.json'
+import { GLOB_CONFIG_FILE_NAME } from '../../constant'
+import config from '../../../config/config'
+import { cdnConf } from '../cdn'
+
+const { title, publicPath, useCdn } = config.defaultSettings
+
+export function configHtmlPlugin(_: ViteEnv, isBuild: boolean) {
+
+  const path = publicPath.endsWith('/') ? publicPath : `${publicPath}/`
+
+  const getAppConfigSrc = () => {
+    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`
+  }
+
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      // Inject data into ejs template
+      data: {
+        VUE_APP_TITLE: title || 'GX Pro Admin',
+        injectScript: useCdn ? cdnConf.js : [],
+        injectLink: useCdn ? cdnConf.css : [],
+      },
+      // Embed the generated app.config.js file
+      tags: isBuild
+        ? [
+          {
+            tag: 'script',
+            attrs: {
+              src: getAppConfigSrc()
+            }
+          }
+        ]
+        : []
+    }
+  })
+  return htmlPlugin
+}

package/template-design-pro/build/vite/plugin/index.ts

@@ -0,0 +1,89 @@
+import type { Plugin, PluginOption } from 'vite'
+
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import legacy from '@vitejs/plugin-legacy'
+
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+import { presetAttributify, presetUno, transformerDirectives } from 'unocss'
+import Unocss from 'unocss/vite'
+
+import { configHtmlPlugin } from './html'
+import { configPwaConfig } from './pwa'
+import { configMockPlugin } from './mock'
+import { createAutoImport } from './autoImport'
+import { configCompressPlugin } from './compress'
+import { configStyleImportPlugin } from './styleImport'
+import { configVisualizerConfig } from './visualizer'
+import { configHmrPlugin } from './hmr'
+import createAntdVariableTheme from './vite-plugin-antd-theme'
+
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
+  const {
+    VITE_APP_ENV,
+    VITE_USE_THEME,
+    VITE_USE_MOCK,
+    VITE_LEGACY,
+    VITE_BUILD_COMPRESS,
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+  } = viteEnv
+
+  const isDev = VITE_APP_ENV === 'dev'
+
+  const vitePlugins: (Plugin | PluginOption[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx()
+  ]
+
+  // vite-plugin-windicss
+  vitePlugins.push(Unocss({
+    presets: [
+      presetAttributify(),
+      presetUno()
+    ],
+    transformers: [ transformerDirectives() ]
+  }))
+
+  // vite-plugin-vue-setup-extend
+  vitePlugins.push(vueSetupExtend())
+
+  !isBuild && vitePlugins.push(configHmrPlugin())
+
+  // @vitejs/plugin-legacy
+  VITE_LEGACY && isBuild && vitePlugins.push(legacy())
+
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
+
+  // vite-plugin-antd-theme
+  vitePlugins.push(createAntdVariableTheme(VITE_USE_THEME))
+
+  // vite-plugin-style-import
+  vitePlugins.push(configStyleImportPlugin(VITE_USE_THEME))
+
+  // vite-plugin-mock
+  const useMock = isDev || VITE_USE_MOCK
+  useMock && vitePlugins.push(configMockPlugin(isBuild))
+
+  // rollup-plugin-visualizer
+  vitePlugins.push(configVisualizerConfig())
+
+  // unplugin-auto-import/vite
+  vitePlugins.push(createAutoImport())
+
+  // The following plugins only work in the production environment
+  if (isBuild) {
+    // rollup-plugin-gzip
+    vitePlugins.push(
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE)
+    )
+
+    // vite-plugin-pwa
+    vitePlugins.push(configPwaConfig(viteEnv))
+  }
+
+  return vitePlugins
+}

package/template-design-pro/build/vite/plugin/mock.ts

@@ -0,0 +1,20 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
+import { viteMockServe } from './vite-plugin-mock'
+
+export function configMockPlugin(isBuild: boolean) {
+  return viteMockServe({
+    ignore: /^\_/,
+    mockPath: 'mock',
+    watchFiles: true,
+    localEnabled: !isBuild,
+    prodEnabled: isBuild,
+    injectCode: `
+      import { setupProdMockServer } from '../mock/_createProductionServer';
+
+      setupProdMockServer();
+      `
+  })
+}

package/template-design-pro/build/vite/plugin/pwa.ts

@@ -0,0 +1,37 @@
+/**
+ * Zero-config PWA for Vite
+ * https://github.com/antfu/vite-plugin-pwa
+ */
+
+import { VitePWA } from 'vite-plugin-pwa'
+
+import config from '../../../config/config'
+
+export function configPwaConfig(env: ViteEnv) {
+  const { title, shortName } = config.defaultSettings
+  const { VITE_USE_PWA } = env
+
+  if (VITE_USE_PWA) {
+    // vite-plugin-pwa
+    const pwaPlugin = VitePWA({
+      manifest: {
+        name: title || 'GX Pro Admin',
+        short_name: shortName || 'gx_pro_admin',
+        icons: [
+          {
+            src: './resource/img/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: './resource/img/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    })
+    return pwaPlugin
+  }
+  return []
+}

package/template-design-pro/build/vite/plugin/styleImport.ts

@@ -0,0 +1,129 @@
+import { createStyleImportPlugin } from 'vite-plugin-style-import'
+
+const component = [
+  {
+    name: 'g-pro-table',
+    lib: 'pro-table',
+    styleName: 'proTable'
+  },
+  {
+    name: 'g-swiper',
+    lib: 'swiper',
+    styleName: 'style'
+  },
+  {
+    name: 'g-image',
+    lib: 'image',
+    styleName: 'style'
+  },
+  {
+    name: 'g-color',
+    lib: 'color-picker',
+    styleName: 'colorPicker'
+  },
+  {
+    name: 'g-pro-field',
+    lib: 'pro-field',
+    styleName: 'proField'
+  },
+  {
+    name: 'g-pro-card',
+    lib: 'pro-card',
+    styleName: 'proCard'
+  },
+  {
+    name: 'g-pro-modal',
+    lib: 'pro-modal',
+    styleName: 'proModal'
+  },
+  {
+    name: 'g-pro-form',
+    lib: 'pro-form',
+    styleName: 'proForm'
+  }
+]
+
+export function configStyleImportPlugin(isUseTheme: boolean) {
+  const styleImportPlugin = createStyleImportPlugin({
+    libs: [
+      isUseTheme ? {
+        libraryName: ''
+      } : {
+        libraryName: 'ant-design-vue',
+        esModule: true,
+        resolveStyle: (name) => {
+          // 这里是无需额外引入样式文件的“子组件”列表
+          const ignoreList = [
+            'anchor-link',
+            'sub-menu',
+            'menu-item',
+            'menu-divider',
+            'menu-item-group',
+            'breadcrumb-item',
+            'breadcrumb-separator',
+            'form-item',
+            'step',
+            'select-option',
+            'select-opt-group',
+            'card-grid',
+            'card-meta',
+            'collapse-panel',
+            'descriptions-item',
+            'list-item',
+            'list-item-meta',
+            'table-column',
+            'table-column-group',
+            'tab-pane',
+            'tab-content',
+            'timeline-item',
+            'tree-node',
+            'skeleton-input',
+            'skeleton-avatar',
+            'skeleton-title',
+            'skeleton-paragraph',
+            'skeleton-image',
+            'skeleton-button'
+          ]
+          // 这里是需要额外引入样式的子组件列表
+          // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
+          const replaceList = {
+            'typography-text': 'typography',
+            'typography-title': 'typography',
+            'typography-paragraph': 'typography',
+            'typography-link': 'typography',
+            'dropdown-button': 'dropdown',
+            'input-password': 'input',
+            'input-search': 'input',
+            'input-group': 'input',
+            'radio-group': 'radio',
+            'checkbox-group': 'checkbox',
+            'layout-sider': 'layout',
+            'layout-content': 'layout',
+            'layout-footer': 'layout',
+            'layout-header': 'layout',
+            'month-picker': 'date-picker',
+            'range-picker': 'date-picker',
+            'image-preview-group': 'image'
+          }
+
+          return ignoreList.includes(name)
+            ? ''
+            : replaceList.hasOwnProperty(name)
+              ? `ant-design-vue/es/${replaceList[name]}/style/index`
+              : `ant-design-vue/es/${name}/style/index`
+        }
+      }
+    ].concat(component.map(item => {
+      return {
+        libraryName: `@gx-design-vue/${item.lib}`,
+        esModule: true,
+        resolveStyle: (name) => {
+          if (name)
+            return `@gx-design-vue/${item.lib}/dist/${item.styleName}.less`
+          return ''
+        }
+      }
+    }))
+  })
+  return styleImportPlugin
+}

package/template-design-pro/build/vite/plugin/visualizer.ts

@@ -0,0 +1,17 @@
+/**
+ * Package file volume analysis
+ */
+import visualizer from 'rollup-plugin-visualizer'
+import { isReportMode } from '../../utils'
+
+export function configVisualizerConfig() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true
+    }) as Plugin
+  }
+  return []
+}

package/template-design-pro/build/vite/plugin/vite-plugin-antd-theme/index.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from 'vite'
+import { normalizePath } from 'vite'
+import { getDefaultPath, fileExists } from '../../../utils'
+
+export default function createAntdVariableTheme(useTheme): Plugin {
+  let defaultPath = getDefaultPath()
+  if (!fileExists(defaultPath)) {
+    defaultPath = getDefaultPath(false)
+    if (!fileExists(defaultPath)) {
+      defaultPath = ''
+    }
+  }
+  const defaultEnter = normalizePath(defaultPath)
+  return {
+    name: 'vite:antd-variable-theme',
+    enforce: 'pre',
+    async transform(code: string, id: string) {
+      if (!id.endsWith(defaultEnter) || !useTheme) return null
+      return {
+        code: `${code}\nimport('ant-design-vue/dist/antd.variable.min.css')`
+      }
+    }
+  }
+}