ref 路由生成方式调整为后台生成和去除mock

This commit is contained in:
DaxPay
2024-07-02 16:22:50 +08:00
parent 37ee147249
commit 40dda3d4e4
276 changed files with 1551 additions and 19426 deletions

View File

@@ -1,4 +1,4 @@
import { defineBuildConfig } from 'unbuild';
import { defineBuildConfig } from 'unbuild'
export default defineBuildConfig({
clean: true,
@@ -7,4 +7,4 @@ export default defineBuildConfig({
rollup: {
emitCJS: true,
},
});
})

View File

@@ -88,4 +88,4 @@ export default {
// ],
},
globals: { defineOptions: 'readonly' },
};
}

View File

@@ -54,4 +54,4 @@ export default {
'vue/attributes-order': 'error',
'vue/require-default-prop': 'error',
},
};
}

View File

@@ -1,4 +1,4 @@
import { defineBuildConfig } from 'unbuild';
import { defineBuildConfig } from 'unbuild'
export default defineBuildConfig({
clean: true,
@@ -7,4 +7,4 @@ export default defineBuildConfig({
rollup: {
emitCJS: true,
},
});
})

View File

@@ -89,4 +89,4 @@ export default {
],
},
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};
}

View File

@@ -8,7 +8,7 @@
"strict": true,
"declaration": true,
"noImplicitOverride": true,
"noUnusedLocals": true,
"noUnusedLocals": false,
"esModuleInterop": true,
"useUnknownInCatchVariables": false,
"composite": false,

View File

@@ -1,4 +1,4 @@
import { defineBuildConfig } from 'unbuild';
import { defineBuildConfig } from 'unbuild'
export default defineBuildConfig({
clean: true,
@@ -7,4 +7,4 @@ export default defineBuildConfig({
rollup: {
emitCJS: true,
},
});
})

View File

@@ -52,7 +52,6 @@
"vite-plugin-compression": "^0.5.1",
"vite-plugin-dts": "^3.9.0",
"vite-plugin-html": "^3.2.2",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-purge-icons": "^0.10.0",
"vite-plugin-svg-icons": "^2.0.1"
}

View File

@@ -1,41 +1,37 @@
import { resolve } from 'node:path';
import { resolve } from 'node:path'
import dayjs from 'dayjs';
import { readPackageJSON } from 'pkg-types';
import { defineConfig, loadEnv, mergeConfig, type UserConfig } from 'vite';
import dayjs from 'dayjs'
import { readPackageJSON } from 'pkg-types'
import { defineConfig, loadEnv, mergeConfig, type UserConfig } from 'vite'
import { createPlugins } from '../plugins';
import { generateModifyVars } from '../utils/modifyVars';
import { commonConfig } from './common';
import { createPlugins } from '../plugins'
import { generateModifyVars } from '../utils/modifyVars'
import { commonConfig } from './common'
interface DefineOptions {
overrides?: UserConfig;
overrides?: UserConfig
options?: {
//
};
}
}
function defineApplicationConfig(defineOptions: DefineOptions = {}) {
const { overrides = {} } = defineOptions;
const { overrides = {} } = defineOptions
return defineConfig(async ({ command, mode }) => {
const root = process.cwd();
const isBuild = command === 'build';
const { VITE_PUBLIC_PATH, VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_ENABLE_ANALYZE } = loadEnv(
mode,
root,
);
const root = process.cwd()
const isBuild = command === 'build'
const { VITE_PUBLIC_PATH, VITE_BUILD_COMPRESS, VITE_ENABLE_ANALYZE } = loadEnv(mode, root)
const defineData = await createDefineData(root);
const defineData = await createDefineData(root)
const plugins = await createPlugins({
isBuild,
root,
enableAnalyze: VITE_ENABLE_ANALYZE === 'true',
enableMock: VITE_USE_MOCK === 'true',
compress: VITE_BUILD_COMPRESS,
});
})
const pathResolve = (pathname: string) => resolve(root, '.', pathname);
const pathResolve = (pathname: string) => resolve(root, '.', pathname)
const applicationConfig: UserConfig = {
base: VITE_PUBLIC_PATH,
@@ -81,29 +77,29 @@ function defineApplicationConfig(defineOptions: DefineOptions = {}) {
},
},
plugins,
};
}
const mergedConfig = mergeConfig(commonConfig(mode), applicationConfig);
const mergedConfig = mergeConfig(commonConfig(mode), applicationConfig)
return mergeConfig(mergedConfig, overrides);
});
return mergeConfig(mergedConfig, overrides)
})
}
async function createDefineData(root: string) {
try {
const pkgJson = await readPackageJSON(root);
const { dependencies, devDependencies, name, version } = pkgJson;
const pkgJson = await readPackageJSON(root)
const { dependencies, devDependencies, name, version } = pkgJson
const __APP_INFO__ = {
pkg: { dependencies, devDependencies, name, version },
lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
};
}
return {
__APP_INFO__: JSON.stringify(__APP_INFO__),
};
}
} catch (error) {
return {};
return {}
}
}
export { defineApplicationConfig };
export { defineApplicationConfig }

View File

@@ -1,5 +1,5 @@
import UnoCSS from 'unocss/vite';
import { type UserConfig } from 'vite';
import UnoCSS from 'unocss/vite'
import { type UserConfig } from 'vite'
const commonConfig: (mode: string) => UserConfig = (mode) => ({
server: {
@@ -17,6 +17,6 @@ const commonConfig: (mode: string) => UserConfig = (mode) => ({
},
},
plugins: [UnoCSS()],
});
})
export { commonConfig };
export { commonConfig }

View File

@@ -1,21 +1,21 @@
import { readPackageJSON } from 'pkg-types';
import { defineConfig, mergeConfig, type UserConfig } from 'vite';
import dts from 'vite-plugin-dts';
import { readPackageJSON } from 'pkg-types'
import { defineConfig, mergeConfig, type UserConfig } from 'vite'
import dts from 'vite-plugin-dts'
import { commonConfig } from './common';
import { commonConfig } from './common'
interface DefineOptions {
overrides?: UserConfig;
overrides?: UserConfig
options?: {
//
};
}
}
function definePackageConfig(defineOptions: DefineOptions = {}) {
const { overrides = {} } = defineOptions;
const root = process.cwd();
const { overrides = {} } = defineOptions
const root = process.cwd()
return defineConfig(async ({ mode }) => {
const { dependencies = {}, peerDependencies = {} } = await readPackageJSON(root);
const { dependencies = {}, peerDependencies = {} } = await readPackageJSON(root)
const packageConfig: UserConfig = {
build: {
lib: {
@@ -32,11 +32,11 @@ function definePackageConfig(defineOptions: DefineOptions = {}) {
logLevel: 'error',
}),
],
};
const mergedConfig = mergeConfig(commonConfig(mode), packageConfig);
}
const mergedConfig = mergeConfig(commonConfig(mode), packageConfig)
return mergeConfig(mergedConfig, overrides);
});
return mergeConfig(mergedConfig, overrides)
})
}
export { definePackageConfig };
export { definePackageConfig }

View File

@@ -1,2 +1,2 @@
export * from './config/application';
export * from './config/package';
export * from './config/application'
export * from './config/package'

View File

@@ -1,43 +1,43 @@
import colors from 'picocolors';
import { readPackageJSON } from 'pkg-types';
import { type PluginOption } from 'vite';
import colors from 'picocolors'
import { readPackageJSON } from 'pkg-types'
import { type PluginOption } from 'vite'
import { getEnvConfig } from '../utils/env';
import { createContentHash } from '../utils/hash';
import { getEnvConfig } from '../utils/env'
import { createContentHash } from '../utils/hash'
const GLOBAL_CONFIG_FILE_NAME = '_app.config.js';
const PLUGIN_NAME = 'app-config';
const GLOBAL_CONFIG_FILE_NAME = '_app.config.js'
const PLUGIN_NAME = 'app-config'
async function createAppConfigPlugin({
root,
isBuild,
}: {
root: string;
isBuild: boolean;
root: string
isBuild: boolean
}): Promise<PluginOption> {
let publicPath: string;
let source: string;
let publicPath: string
let source: string
if (!isBuild) {
return {
name: PLUGIN_NAME,
};
}
}
const { version = '' } = await readPackageJSON(root);
const { version = '' } = await readPackageJSON(root)
return {
name: PLUGIN_NAME,
async configResolved(_config) {
const appTitle = _config?.env?.VITE_GLOB_APP_TITLE ?? '';
const appTitle = _config?.env?.VITE_GLOB_APP_TITLE ?? ''
// appTitle = appTitle.replace(/\s/g, '_').replace(/-/g, '_');
publicPath = _config.base;
source = await getConfigSource(appTitle);
publicPath = _config.base
source = await getConfigSource(appTitle)
},
async transformIndexHtml(html) {
publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`;
publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`
const appConfigSrc = `${
publicPath || '/'
}${GLOBAL_CONFIG_FILE_NAME}?v=${version}-${createContentHash(source)}`;
}${GLOBAL_CONFIG_FILE_NAME}?v=${version}-${createContentHash(source)}`
return {
html,
@@ -49,7 +49,7 @@ async function createAppConfigPlugin({
},
},
],
};
}
},
async generateBundle() {
try {
@@ -57,16 +57,16 @@ async function createAppConfigPlugin({
type: 'asset',
fileName: GLOBAL_CONFIG_FILE_NAME,
source,
});
})
console.log(colors.cyan(`✨configuration file is build successfully!`));
console.log(colors.cyan(`✨configuration file is build successfully!`))
} catch (error) {
console.log(
colors.red('configuration file configuration file failed to package:\n' + error),
);
)
}
},
};
}
}
/**
@@ -75,30 +75,30 @@ async function createAppConfigPlugin({
*/
const getVariableName = (title: string) => {
function strToHex(str: string) {
const result: 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));
const hex = str.charCodeAt(i).toString(16)
result.push(('000' + hex).slice(-4))
}
return result.join('').toUpperCase();
return result.join('').toUpperCase()
}
return `__PRODUCTION__${strToHex(title) || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '');
};
return `__PRODUCTION__${strToHex(title) || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '')
}
async function getConfigSource(appTitle: string) {
const config = await getEnvConfig();
const variableName = getVariableName(appTitle);
const windowVariable = `window.${variableName}`;
const config = await getEnvConfig()
const variableName = getVariableName(appTitle)
const windowVariable = `window.${variableName}`
// Ensure that the variable will not be modified
let source = `${windowVariable}=${JSON.stringify(config)};`;
let source = `${windowVariable}=${JSON.stringify(config)};`
source += `
Object.freeze(${windowVariable});
Object.defineProperty(window, "${variableName}", {
configurable: false,
writable: false,
});
`.replace(/\s/g, '');
return source;
`.replace(/\s/g, '')
return source
}
export { createAppConfigPlugin };
export { createAppConfigPlugin }

View File

@@ -2,19 +2,19 @@
* 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 { PluginOption } from 'vite';
import compressPlugin from 'vite-plugin-compression';
import type { PluginOption } from 'vite'
import compressPlugin from 'vite-plugin-compression'
export function configCompressPlugin({
compress,
deleteOriginFile = false,
}: {
compress: string;
deleteOriginFile?: boolean;
compress: string
deleteOriginFile?: boolean
}): PluginOption[] {
const compressList = compress.split(',');
const compressList = compress.split(',')
const plugins: PluginOption[] = [];
const plugins: PluginOption[] = []
if (compressList.includes('gzip')) {
plugins.push(
@@ -22,7 +22,7 @@ export function configCompressPlugin({
ext: '.gz',
deleteOriginFile,
}),
);
)
}
if (compressList.includes('brotli')) {
@@ -32,7 +32,7 @@ export function configCompressPlugin({
algorithm: 'brotliCompress',
deleteOriginFile,
}),
);
)
}
return plugins;
return plugins
}

View File

@@ -2,12 +2,12 @@
* Plugin to minimize and use ejs template syntax in index.html.
* https://github.com/anncwb/vite-plugin-html
*/
import type { PluginOption } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';
import type { PluginOption } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export function configHtmlPlugin({ isBuild }: { isBuild: boolean }) {
const htmlPlugin: PluginOption[] = createHtmlPlugin({
minify: isBuild,
});
return htmlPlugin;
})
return htmlPlugin
}

View File

@@ -1,40 +1,40 @@
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { type PluginOption } from 'vite';
import purgeIcons from 'vite-plugin-purge-icons';
import DevTools from 'vite-plugin-vue-devtools';
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { type PluginOption } from 'vite'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import purgeIcons from 'vite-plugin-purge-icons'
import DevTools from 'vite-plugin-vue-devtools'
import { createAppConfigPlugin } from './appConfig';
import { configCompressPlugin } from './compress';
import { configHtmlPlugin } from './html';
import { configMockPlugin } from './mock';
import { configSvgIconsPlugin } from './svgSprite';
import { configVisualizerConfig } from './visualizer';
import { createAppConfigPlugin } from './appConfig'
import { configCompressPlugin } from './compress'
import { configHtmlPlugin } from './html'
import { configSvgIconsPlugin } from './svgSprite'
import { configVisualizerConfig } from './visualizer'
interface Options {
isBuild: boolean;
root: string;
compress: string;
enableMock?: boolean;
enableAnalyze?: boolean;
isBuild: boolean
root: string
compress: string
enableAnalyze?: boolean
}
async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyze }: Options) {
const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()];
async function createPlugins({ isBuild, root, compress, enableAnalyze }: Options) {
const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()]
const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
vitePlugins.push(appConfigPlugin);
const appConfigPlugin = await createAppConfigPlugin({ root, isBuild })
vitePlugins.push(appConfigPlugin)
vitePlugins.push(DevTools());
vitePlugins.push(DevTools())
// vite-plugin-html
vitePlugins.push(configHtmlPlugin({ isBuild }));
vitePlugins.push(configHtmlPlugin({ isBuild }))
// vite-plugin-svg-icons
vitePlugins.push(configSvgIconsPlugin({ isBuild }));
vitePlugins.push(configSvgIconsPlugin({ isBuild }))
// vite-plugin-purge-icons
vitePlugins.push(purgeIcons());
vitePlugins.push(purgeIcons())
// The following plugins only work in the production environment
if (isBuild) {
@@ -43,20 +43,15 @@ async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyz
configCompressPlugin({
compress,
}),
);
)
}
// rollup-plugin-visualizer
if (enableAnalyze) {
vitePlugins.push(configVisualizerConfig());
vitePlugins.push(configVisualizerConfig())
}
// vite-plugin-mock
if (enableMock) {
vitePlugins.push(configMockPlugin({ isBuild }));
}
return vitePlugins;
return vitePlugins
}
export { createPlugins };
export { createPlugins }

View File

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

View File

@@ -3,15 +3,15 @@
* https://github.com/anncwb/vite-plugin-svg-icons
*/
import { resolve } from 'node:path';
import { resolve } from 'node:path'
import type { PluginOption } from 'vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import type { PluginOption } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export function configSvgIconsPlugin({ isBuild }: { isBuild: boolean }) {
const svgIconsPlugin = createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
svgoOptions: isBuild,
});
return svgIconsPlugin as PluginOption;
})
return svgIconsPlugin as PluginOption
}

View File

@@ -1,8 +1,8 @@
/**
* Package file volume analysis
*/
import visualizer from 'rollup-plugin-visualizer';
import { type PluginOption } from 'vite';
import visualizer from 'rollup-plugin-visualizer'
import { type PluginOption } from 'vite'
export function configVisualizerConfig() {
return visualizer({
@@ -10,5 +10,5 @@ export function configVisualizerConfig() {
open: true,
gzipSize: true,
brotliSize: true,
}) as PluginOption;
}) as PluginOption
}

View File

@@ -1,20 +1,20 @@
import { join } from 'node:path';
import { join } from 'node:path'
import dotenv from 'dotenv';
import { readFile } from 'fs-extra';
import dotenv from 'dotenv'
import { readFile } from 'fs-extra'
/**
* 获取当前环境下生效的配置文件名
*/
function getConfFiles() {
const script = process.env.npm_lifecycle_script as string;
const reg = new RegExp('--mode ([a-z_\\d]+)');
const result = reg.exec(script);
const script = process.env.npm_lifecycle_script as string
const reg = new RegExp('--mode ([a-z_\\d]+)')
const result = reg.exec(script)
if (result) {
const mode = result[1];
return ['.env', `.env.${mode}`];
const mode = result[1]
return ['.env', `.env.${mode}`]
}
return ['.env', '.env.production'];
return ['.env', '.env.production']
}
/**
@@ -26,24 +26,24 @@ export async function getEnvConfig(
match = 'VITE_GLOB_',
confFiles = getConfFiles(),
): Promise<{
[key: string]: string;
[key: string]: string
}> {
let envConfig = {};
let envConfig = {}
for (const confFile of confFiles) {
try {
const envPath = await readFile(join(process.cwd(), confFile), { encoding: 'utf8' });
const env = dotenv.parse(envPath);
envConfig = { ...envConfig, ...env };
const envPath = await readFile(join(process.cwd(), confFile), { encoding: 'utf8' })
const env = dotenv.parse(envPath)
envConfig = { ...envConfig, ...env }
} catch (e) {
console.error(`Error in parsing ${confFile}`, e);
console.error(`Error in parsing ${confFile}`, e)
}
}
const reg = new RegExp(`^(${match})`);
const reg = new RegExp(`^(${match})`)
Object.keys(envConfig).forEach((key) => {
if (!reg.test(key)) {
Reflect.deleteProperty(envConfig, key);
Reflect.deleteProperty(envConfig, key)
}
});
return envConfig;
})
return envConfig
}

View File

@@ -1,16 +1,16 @@
import { createHash } from 'node:crypto';
import { createHash } from 'node:crypto'
function createContentHash(content: string, hashLSize = 12) {
const hash = createHash('sha256').update(content);
return hash.digest('hex').slice(0, hashLSize);
const hash = createHash('sha256').update(content)
return hash.digest('hex').slice(0, hashLSize)
}
function strToHex(str: string) {
const result: 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));
const hex = str.charCodeAt(i).toString(16)
result.push(('000' + hex).slice(-4))
}
return result.join('').toUpperCase();
return result.join('').toUpperCase()
}
export { createContentHash, strToHex };
export { createContentHash, strToHex }

View File

@@ -1,34 +1,34 @@
import { resolve } from 'node:path';
import { resolve } from 'node:path'
import { generate } from '@ant-design/colors';
import { generate } from '@ant-design/colors'
// @ts-ignore: typo
/* import { getThemeVariables } from 'ant-design-vue/dist/theme'; */
import { theme } from 'ant-design-vue/lib';
import convertLegacyToken from 'ant-design-vue/lib/theme/convertLegacyToken';
import { theme } from 'ant-design-vue/lib'
import convertLegacyToken from 'ant-design-vue/lib/theme/convertLegacyToken'
const { defaultAlgorithm, defaultSeed } = theme;
const primaryColor = '#0960bd';
const { defaultAlgorithm, defaultSeed } = theme
const primaryColor = '#0960bd'
function generateAntColors(color: string, theme: 'default' | 'dark' = 'default') {
return generate(color, {
theme,
});
})
}
/**
* less global variable
*/
export function generateModifyVars() {
const palettes = generateAntColors(primaryColor);
const primary = palettes[5];
const primaryColorObj: Record<string, string> = {};
const palettes = generateAntColors(primaryColor)
const primary = palettes[5]
const primaryColorObj: Record<string, string> = {}
for (let index = 0; index < 10; index++) {
primaryColorObj[`primary-${index + 1}`] = palettes[index];
primaryColorObj[`primary-${index + 1}`] = palettes[index]
}
// const modifyVars = getThemeVariables();
const mapToken = defaultAlgorithm(defaultSeed);
const v3Token = convertLegacyToken(mapToken);
const mapToken = defaultAlgorithm(defaultSeed)
const v3Token = convertLegacyToken(mapToken)
return {
...v3Token,
// reference: Avoid repeated references
@@ -43,5 +43,5 @@ export function generateModifyVars() {
'font-size-base': '14px', // Main font size
'border-radius-base': '2px', // Component/float fillet
'link-color': primary, // Link color
};
}
}