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

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

@@ -1,18 +1,19 @@
-import type { ConfigEnv, ProxyOptions, UserConfig } from 'vite'
-import { loadEnv } from 'vite'
-import { resolve } from 'node:path'
+import type { ConfigEnv, UserConfig } from 'vite'
+import autoprefixer from 'autoprefixer'
 import dayjs from 'dayjs'
-import { isObject, isString } from '@gx-design-vue/pro-utils'
+import viewport from 'postcss-mobile-forever'
+import { loadEnv } from 'vite'
 
-import { configManualChunk } from './build/optimizer'
-import { createVitePlugins } from './build/plugin'
-import { generateModifyVars } from './build/generateModifyVars'
+import { createProxy, defaultSettings } from './config'
+import { generateModifyVars } from './internal/vite-config/generate/generateModifyVars'
+import createRollupOptions from './internal/vite-config/rollupOptions'
+import { pathResolve, wrapperEnv } from './internal/vite-config/util'
 
-import pkg from './package.json'
+import { createVitePlugins } from './internal/vite-config/vite/plugin'
 
-type ProxyTargetList = ProxyOptions & { rewrite: (path: string) => string }
+import pkg from './package.json'
 
-const proxyTarget: string | Record<string, any> = 'http://127.0.0.1:3000'
+const { proxy, cdn, build, servive } = defaultSettings
 
 const { dependencies, devDependencies, name, version } = pkg
 
@@ -21,82 +22,40 @@ const __APP_INFO__ = {
   lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
 }
 
-function pathResolve(dir: string) {
-  return resolve(process.cwd(), '.', dir)
-}
-
-function createProxy(prefix) {
-  const ret = {
-    dev: {},
-    test: {},
-    pre: {}
-  }
-
-  if (isObject(proxyTarget)) {
-    Object.keys(proxyTarget).forEach((prefix) => {
-      const proxy = {
-        target: `${proxyTarget[prefix]}`,
-        changeOrigin: true,
-        ws: true,
-        rewrite: path => path.replace(new RegExp(`^${prefix}`), '')
-      } as ProxyTargetList
-
-      ret.dev[prefix] = proxy
-      ret.test[prefix] = proxy
-      ret.pre[prefix] = proxy
-    })
-  } else if (isString(proxyTarget)) {
-    const proxy = {
-      target: `${proxyTarget}`,
-      changeOrigin: true,
-      ws: true,
-      rewrite: path => path.replace(new RegExp(`^${prefix}`), '')
-    }
-    ret.dev[prefix] = proxy
-    ret.test[prefix] = proxy
-    ret.pre[prefix] = proxy
-  }
+process.env.VUE_APP_VERSION = version
 
-  return ret
-}
-
-function wrapperEnv(envConf: RecordType): 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
-}
-
-export default ({ mode, command }: ConfigEnv): UserConfig => {
+export default async ({ command, mode }: ConfigEnv): Promise<UserConfig> => {
   const root = process.cwd()
 
   const env = loadEnv(mode, root)
 
-  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
   const viteEnv = wrapperEnv(env)
 
-  const { VITE_BASE_URL, VITE_DROP_CONSOLE } = viteEnv
+  const { VITE_DROP_CONSOLE, VITE_APP_ENV, VITE_PROXY_PREFIX } = viteEnv
 
   const isBuild = command === 'build'
 
   return {
-    base: './',
+    base: build.publicPath,
+    root,
     resolve: {
       alias: [
         {
           find: '@',
           replacement: pathResolve('src') + '/'
         },
+        {
+          find: '@gx-mock',
+          replacement: pathResolve('mock') + '/index.ts'
+        },
         {
           find: '@gx-mock',
           replacement: pathResolve('mock') + '/'
         },
+        {
+          find: '@gx-config',
+          replacement: pathResolve('config') + '/index.ts'
+        },
         {
           find: '@gx-vuex',
           replacement: pathResolve('src/store') + '/index.ts'
@@ -105,34 +64,59 @@ export default ({ mode, command }: ConfigEnv): UserConfig => {
           find: '@gx-mobile/hooks',
           replacement: pathResolve('src/hooks')
         },
-        { find: /^~/, replacement: '' }
+        {
+          find: '@gx-admin/vite-config',
+          replacement: pathResolve('internal/vite-config') + '/'
+        }
       ]
     },
     server: {
+      open: false,
       host: true,
-      port: 3000,
-      proxy: createProxy(VITE_BASE_URL)
-    },
-    plugins: createVitePlugins(viteEnv, isBuild),
-    define: {
-      __INTLIFY_PROD_DEVTOOLS__: false,
-      __APP_INFO__: JSON.stringify(__APP_INFO__)
+      port: servive.port,
+      warmup: {
+        // 预热文件
+        clientFiles: [
+          './index.html',
+          './src/{views,layout,router,store,components}/*',
+        ],
+      },
+      proxy: proxy.use ? createProxy(VITE_PROXY_PREFIX)[VITE_APP_ENV] : {}
     },
     esbuild: {
       drop: VITE_DROP_CONSOLE ? [ 'console', 'debugger' ] : []
     },
     build: {
-      assetsDir: 'assets',
-      chunkSizeWarningLimit: 2500,
-      rollupOptions: {
-        output: {
-          manualChunks: configManualChunk as any
-        }
-      }
+      cssTarget: 'chrome80',
+      outDir: build.outputDir,
+      assetsDir: build.assetsDir,
+      chunkSizeWarningLimit: 4000,
+      rollupOptions: createRollupOptions(cdn.use) as any
+    },
+    define: {
+      __INTLIFY_PROD_DEVTOOLS__: false,
+      __APP_INFO__: JSON.stringify(__APP_INFO__)
     },
     css: {
+      postcss: {
+        plugins: [
+          autoprefixer({
+            grid: true
+          }),
+          viewport({
+            appSelector: '#app',
+            viewportWidth: 375,
+            maxDisplayWidth: 600,
+            rootContainingBlockSelectorList: [
+              'van-tabbar',
+              'van-popup',
+            ],
+            border: true,
+          }),
+        ]
+      },
       modules: {
-        generateScopedName: 'gx-mobile-[local]-[hash:base64:5]'
+        generateScopedName: 'gx-pro-[local]-[hash:base64:5]'
       },
       preprocessorOptions: {
         less: {
@@ -140,6 +124,19 @@ export default ({ mode, command }: ConfigEnv): UserConfig => {
           javascriptEnabled: true
         }
       }
+    },
+
+    plugins: await createVitePlugins(viteEnv, isBuild),
+
+    optimizeDeps: {
+      include: [
+        'qs',
+        'dayjs',
+        'axios',
+        'pinia',
+        'echarts',
+        '@vueuse/core'
+      ]
     }
   }
 }

package/template-mobile-vant-cli/build/cdn.ts

@@ -1,5 +0,0 @@
-const css = []
-
-const js = []
-
-export const cdnConf = { css, js }

package/template-mobile-vant-cli/build/plugin/html.ts

@@ -1,26 +0,0 @@
-/**
- * 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 { cdnConf } from '../cdn'
-
-export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
-
-  const htmlPlugin: PluginOption[] = createHtmlPlugin({
-    minify: isBuild,
-    inject: {
-      data: {
-        injectScript: env.VITE_USE_CDN ? cdnConf.js : [],
-        injectLink: env.VITE_USE_CDN ? cdnConf.css : [],
-        injectVlogScript: env.VITE_USE_V_CONSOLE
-          ? `<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script><script>var vConsole = new window.VConsole();</script>`
-          : ''
-      }
-    }
-  })
-  return htmlPlugin
-}

package/template-mobile-vant-cli/build/plugin/index.ts

@@ -1,42 +0,0 @@
-import type { Plugin, PluginOption } from 'vite'
-
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-
-import vueSetupExtend from 'vite-plugin-vue-setup-extend'
-
-import Unocss from 'unocss/vite'
-
-import { configHtmlPlugin } from './html'
-import { configMockPlugin } from './mock'
-import { createAutoImport } from './autoImport'
-
-export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
-  const {
-    VITE_USE_MOCK
-  } = viteEnv
-
-  const vitePlugins: (Plugin | PluginOption[])[] = [
-    // have to
-    vue(),
-    // have to
-    vueJsx()
-  ]
-
-  // unocss
-  vitePlugins.push(Unocss())
-
-  // vite-plugin-vue-setup-extend
-  vitePlugins.push(vueSetupExtend())
-
-  // vite-plugin-html
-  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
-
-  // vite-plugin-mock
-  VITE_USE_MOCK && vitePlugins.push(configMockPlugin())
-
-  // unplugin-auto-import/vite
-  vitePlugins.push(createAutoImport())
-
-  return vitePlugins
-}

package/template-mobile-vant-cli/build/plugin/mock.ts

@@ -1,14 +0,0 @@
-import { viteMockServe } from './viteMock'
-
-export function configMockPlugin() {
-  return viteMockServe({
-    ignore: /^_/,
-    mockPath: 'mock',
-    enable: true,
-    injectCode: `
-      import { setupProdMockServer } from '../mock/_createProductionServer';
-
-      setupProdMockServer();
-      `,
-  })
-}

package/template-mobile-vant-cli/build/plugin/viteMock/client.ts

@@ -1,88 +0,0 @@
-import mockJs from 'mockjs'
-import { pathToRegexp } from 'path-to-regexp'
-
-const Mock = mockJs as any
-
-export function createProdMockServer(mockList: any[]) {
-  Mock.XHR.prototype.__send = Mock.XHR.prototype.send
-  Mock.XHR.prototype.send = function () {
-    if (this.custom.xhr) {
-      this.custom.xhr.withCredentials = this.withCredentials || false
-
-      if (this.responseType) {
-        this.custom.xhr.responseType = this.responseType
-      }
-    }
-    if (this.custom.requestHeaders) {
-      const headers: any = {}
-      for (let k in this.custom.requestHeaders) {
-        headers[k.toString().toLowerCase()] = this.custom.requestHeaders[k]
-      }
-      this.custom.options = Object.assign({}, this.custom.options, { headers })
-    }
-    this.__send.apply(this, arguments)
-  }
-
-  Mock.XHR.prototype.proxy_open = Mock.XHR.prototype.open
-
-  Mock.XHR.prototype.open = function () {
-    let responseType = this.responseType
-    this.proxy_open(...arguments)
-    if (this.custom.xhr) {
-      if (responseType) {
-        this.custom.xhr.responseType = responseType
-      }
-    }
-  }
-
-  for (const { url, method, response, timeout } of mockList) {
-    __setupMock__(timeout)
-    Mock.mock(
-      pathToRegexp(url, undefined, { end: false }),
-      method || 'get',
-      __XHR2ExpressReqWrapper__(response)
-    )
-  }
-}
-
-function __param2Obj__(url: string) {
-  const search = url.split('?')[1]
-  if (!search) {
-    return {}
-  }
-  return JSON.parse(
-    '{"' +
-    decodeURIComponent(search)
-      .replace(/"/g, '\\"')
-      .replace(/&/g, '","')
-      .replace(/=/g, '":"')
-      .replace(/\+/g, ' ') +
-    '"}'
-  )
-}
-
-function __XHR2ExpressReqWrapper__(handle: (d: any) => any) {
-  return function (options: any) {
-    let result = null
-    if (typeof handle === 'function') {
-      const { body, type, url, headers } = options
-      result = handle({
-        method: type,
-        body: JSON.parse(body),
-        query: __param2Obj__(url),
-        headers
-      })
-    } else {
-      result = handle
-    }
-
-    return Mock.mock(result)
-  }
-}
-
-function __setupMock__(timeout = 0) {
-  timeout &&
-  Mock.setup({
-    timeout
-  })
-}

package/template-mobile-vant-cli/build/plugin/viteMock/createMockServer.ts

@@ -1,271 +0,0 @@
-import type { MockMethod, Recordable, RespThisType, ViteMockOptions } from './types'
-import path from 'node:path'
-import fs from 'node:fs'
-import chokidar from 'chokidar'
-import colors from 'picocolors'
-import url from 'node:url'
-import fg from 'fast-glob'
-import Mock from 'mockjs'
-import type { ResolvedConfig } from 'vite'
-import { match, pathToRegexp } from 'path-to-regexp'
-import type { IncomingMessage, NextHandleFunction } from 'connect'
-import type { GetOutputFile } from 'bundle-require'
-import { bundleRequire, JS_EXT_RE } from 'bundle-require'
-import { isAbsPath, isArray, isFunction, isRegExp, sleep } from './utils'
-
-export let mockData: MockMethod[] = []
-
-export async function createMockServer(
-  opt: ViteMockOptions = { mockPath: 'mock', configPath: 'vite.mock.config' },
-  config: ResolvedConfig,
-) {
-  opt = {
-    mockPath: 'mock',
-    watchFiles: true,
-    configPath: 'vite.mock.config.ts',
-    logger: true,
-    cors: true,
-    ...opt,
-  }
-
-  if (mockData.length > 0)
-    return
-  mockData = await getMockConfig(opt, config)
-  await createWatch(opt, config)
-}
-
-// request match
-export async function requestMiddleware(opt: ViteMockOptions) {
-  const { logger = true } = opt
-  const middleware: NextHandleFunction = async (req, res, next) => {
-    let queryParams: {
-      query?: {
-        [key: string]: any
-      }
-      pathname?: string | null
-    } = {}
-
-    if (req.url) {
-      queryParams = url.parse(req.url, true)
-    }
-
-    const reqUrl = queryParams.pathname
-
-    const matchRequest = mockData.find((item) => {
-      if (!reqUrl || !item || !item.url) {
-        return false
-      }
-      if (item.method && item.method.toUpperCase() !== req.method) {
-        return false
-      }
-      return pathToRegexp(item.url).test(reqUrl)
-    })
-
-    if (matchRequest) {
-      const isGet = req.method && req.method.toUpperCase() === 'GET'
-      const { response, rawResponse, timeout, statusCode, url } = matchRequest
-
-      if (timeout) {
-        await sleep(timeout)
-      }
-
-      const urlMatch = match(url, { decode: decodeURIComponent })
-
-      let query = queryParams.query as any
-      if (reqUrl) {
-        if ((isGet && JSON.stringify(query) === '{}') || !isGet) {
-          const params = (urlMatch(reqUrl) as any).params
-          if (JSON.stringify(params) !== '{}') {
-            query = (urlMatch(reqUrl) as any).params || {}
-          } else {
-            query = queryParams.query || {}
-          }
-        }
-      }
-
-      const self: RespThisType = { req, res, parseJson: parseJson.bind(null, req) }
-      if (isFunction(rawResponse)) {
-        await rawResponse.bind(self)(req, res)
-      } else {
-        const body = await parseJson(req)
-        res.setHeader('Content-Type', 'application/json')
-        if (opt) {
-          res.setHeader('Access-Control-Allow-Credentials', true)
-          res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
-        }
-        res.statusCode = statusCode || 200
-        const mockResponse = isFunction(response)
-          ? response.bind(self)({ url: req.url as any, body, query, headers: req.headers })
-          : response
-        res.end(JSON.stringify(Mock.mock(mockResponse)))
-      }
-
-      logger && loggerOutput('request invoke', req.url!)
-      return
-    }
-    next()
-  }
-  return middleware
-}
-
-// create watch mock
-function createWatch(opt: ViteMockOptions, config: ResolvedConfig) {
-  const { configPath, logger, watchFiles } = opt
-
-  if (!watchFiles) {
-    return
-  }
-
-  const { absConfigPath, absMockPath } = getPath(opt)
-
-  if (process.env.VITE_DISABLED_WATCH_MOCK === 'true') {
-    return
-  }
-
-  const watchDir = []
-  const exitsConfigPath = fs.existsSync(absConfigPath)
-
-  exitsConfigPath && configPath ? watchDir.push(absConfigPath) : watchDir.push(absMockPath)
-
-  const watcher = chokidar.watch(watchDir, {
-    ignoreInitial: true,
-    // ignore files generated by `bundle require`
-    ignored: '**/_*.bundled_*.(mjs|cjs)',
-  })
-
-  watcher.on('all', async (event, file) => {
-    logger && loggerOutput(`mock file ${event}`, file)
-    mockData = await getMockConfig(opt, config)
-  })
-}
-
-// clear cache
-// function cleanRequireCache(opt: ViteMockOptions) {
-//   if (typeof require === 'undefined' || !require.cache) {
-//     return
-//   }
-//   const { absConfigPath, absMockPath } = getPath(opt)
-//   Object.keys(require.cache).forEach((file) => {
-//     if (file === absConfigPath || file.indexOf(absMockPath) > -1) {
-//       delete require.cache[file]
-//     }
-//   })
-// }
-
-function parseJson(req: IncomingMessage): Promise<Recordable> {
-  return new Promise((resolve) => {
-    let body = ''
-    let jsonStr = ''
-    req.on('data', function (chunk) {
-      body += chunk
-    })
-    req.on('end', function () {
-      try {
-        jsonStr = JSON.parse(body)
-      } catch (err) {
-        jsonStr = ''
-      }
-      resolve(jsonStr as any)
-      return
-    })
-  })
-}
-
-// load mock .ts files and watch
-async function getMockConfig(opt: ViteMockOptions, config: ResolvedConfig) {
-  const { absConfigPath, absMockPath } = getPath(opt)
-  const { ignore, configPath, logger } = opt
-
-  let ret: MockMethod[] = []
-  if (configPath && fs.existsSync(absConfigPath)) {
-    logger && loggerOutput(`load mock data from`, absConfigPath)
-    ret = await resolveModule(absConfigPath, config)
-    return ret
-  }
-
-  const mockFiles = fg
-    .sync(`**/*.{ts,mjs,js}`, {
-      cwd: absMockPath,
-    })
-    .filter((item) => {
-      if (!ignore) {
-        return true
-      }
-      if (isFunction(ignore)) {
-        return !ignore(item)
-      }
-      if (isRegExp(ignore)) {
-        return !ignore.test(path.basename(item))
-      }
-      return true
-    })
-  try {
-    ret = []
-    const resolveModulePromiseList = []
-
-    for (let index = 0; index < mockFiles.length; index++) {
-      const mockFile = mockFiles[index]
-      resolveModulePromiseList.push(resolveModule(path.join(absMockPath, mockFile), config))
-    }
-    const loadAllResult = await Promise.all(resolveModulePromiseList)
-    for (const resultModule of loadAllResult) {
-      let mod = resultModule
-      if (!isArray(mod)) {
-        mod = [mod]
-      }
-      ret = [...ret, ...mod]
-    }
-  } catch (error: any) {
-    loggerOutput(`mock reload error`, error)
-    ret = []
-  }
-  return ret
-}
-
-// fixed file generation format
-// use a random path to avoid import cache
-const getOutputFile: GetOutputFile = (filepath, format) => {
-  const dirname = path.dirname(filepath)
-  const basename = path.basename(filepath)
-  const randomname = `${Date.now()}_${Math.random().toString(36).substring(2, 15)}`
-  return path.resolve(
-    dirname,
-    `_${basename.replace(JS_EXT_RE, `.bundled_${randomname}.${format === 'esm' ? 'mjs' : 'cjs'}`)}`,
-  )
-}
-
-// Inspired by vite
-// support mock .ts files
-async function resolveModule(p: string, config: ResolvedConfig): Promise<any> {
-  const mockData = await bundleRequire({
-    filepath: p,
-    getOutputFile,
-  })
-
-  let mod = mockData.mod.default || mockData.mod
-  if (isFunction(mod)) {
-    mod = await mod({ env: config.env, mode: config.mode, command: config.command })
-  }
-  return mod
-}
-
-// get custom config file path and mock dir path
-function getPath(opt: ViteMockOptions) {
-  const { mockPath, configPath } = opt
-  const cwd = process.cwd()
-  const absMockPath = isAbsPath(mockPath) ? mockPath! : path.join(cwd, mockPath || '')
-  const absConfigPath = path.join(cwd, configPath || '')
-  return {
-    absMockPath,
-    absConfigPath,
-  }
-}
-
-function loggerOutput(title: string, msg: string, type: 'info' | 'error' = 'info') {
-  const tag = type === 'info' ? colors.cyan(`[vite:mock]`) : colors.red(`[vite:mock-server]`)
-  return console.log(
-    `${colors.dim(new Date().toLocaleTimeString())} ${tag} ${colors.green(title)} ${colors.dim(
-      msg,
-    )}`,
-  )
-}