github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 08:36:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use unplugin-config (#3110)

Browse Source 
* refactor: use `unplugin-config`

* fix: preserve indentation in generated code

* refactor: use `unplugin-config`
This commit is contained in:
Kirk Lin
2023-10-08 20:03:14 +08:00
committed by GitHub
parent 9c6b271097
commit e53fefb310
5 changed files with 84 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
internal/vite-config/package.json
View File

@@ -48,6 +48,7 @@
"rollup-plugin-visualizer": "^5.9.2",
"sass": "^1.63.6",
"unocss": "^0.53.4",
"unplugin-config": "^0.0.13",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-dts": "^3.1.0",
"vite-plugin-html": "^3.2.0",

114
internal/vite-config/src/plugins/appConfig.ts
View File

@@ -1,104 +1,24 @@
import colors from 'picocolors';
import { readPackageJSON } from 'pkg-types';
import GenerateConfig from 'unplugin-config/vite';
import { type PluginOption } from 'vite';
import { getEnvConfig } from '../utils/env';
import { createContentHash } from '../utils/hash';
import { strToHex } from '../utils/hash';
const GLOBAL_CONFIG_FILE_NAME = '_app.config.js';
const PLUGIN_NAME = 'app-config';
async function createAppConfigPlugin({
root,
isBuild,
}: {
root: string;
isBuild: boolean;
}): Promise<PluginOption> {
let publicPath: string;
let source: string;
if (!isBuild) {
return {
name: PLUGIN_NAME,
};
}
const { version = '' } = await readPackageJSON(root);
return {
name: PLUGIN_NAME,
async configResolved(_config) {
const appTitle = _config?.env?.VITE_GLOB_APP_TITLE ?? '';
// appTitle = appTitle.replace(/\s/g, '_').replace(/-/g, '_');
publicPath = _config.base;
source = await getConfigSource(appTitle);
},
async transformIndexHtml(html) {
publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`;
const appConfigSrc = `${
publicPath || '/'
}${GLOBAL_CONFIG_FILE_NAME}?v=${version}-${createContentHash(source)}`;
return {
html,
tags: [
{
tag: 'script',
attrs: {
src: appConfigSrc,
},
},
],
};
},
async generateBundle() {
try {
this.emitFile({
type: 'asset',
fileName: GLOBAL_CONFIG_FILE_NAME,
source,
});
console.log(colors.cyan(`✨configuration file is build successfully!`));
} catch (error) {
console.log(
colors.red('configuration file configuration file failed to package:\n' + error),
);
}
},
};
}
/**
* Get the configuration file variable name
* @param env
*/
const getVariableName = (title: string) => {
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();
}
return `__PRODUCTION__${strToHex(title) || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '');
};
async function getConfigSource(appTitle: string) {
// This constant sets the output directory for the Vite package
const OUTPUT_DIR = 'dist';
export async function createConfigPluginConfig(
shouldGenerateConfig: boolean,
): Promise<PluginOption> {
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)};`;
source += `
Object.freeze(${windowVariable});
Object.defineProperty(window, "${variableName}", {
configurable: false,
writable: false,
});
`.replace(/\s/g, '');
return source;
// LINK /src/utils/env.ts -> getVariableName
const APP_NAME = strToHex(config?.VITE_GLOB_APP_TITLE ?? '__APP');
// https://github.com/kirklin/unplugin-config
return GenerateConfig({
disabledConfig: !shouldGenerateConfig,
globConfigFileName: GLOBAL_CONFIG_FILE_NAME,
outputDir: OUTPUT_DIR,
appName: APP_NAME,
envConfigPrefix: 'VITE_GLOB_',
});
}
export { createAppConfigPlugin };

6
internal/vite-config/src/plugins/index.ts
View File

@@ -3,7 +3,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
import { type PluginOption } from 'vite';
import purgeIcons from 'vite-plugin-purge-icons';
import { createAppConfigPlugin } from './appConfig';
import { createConfigPluginConfig } from './appConfig';
import { configCompressPlugin } from './compress';
import { configHtmlPlugin } from './html';
import { configMockPlugin } from './mock';
@@ -18,10 +18,10 @@ interface Options {
enableAnalyze?: boolean;
}
async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyze }: Options) {
async function createPlugins({ isBuild, enableMock, compress, enableAnalyze }: Options) {
const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()];
const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
const appConfigPlugin = await createConfigPluginConfig(isBuild);
vitePlugins.push(appConfigPlugin);
// vite-plugin-html

10
internal/vite-config/src/utils/hash.ts
View File

@@ -4,5 +4,13 @@ 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 };
export { createContentHash, strToHex };