【前端】从vben中学到的一些工程化技巧_import purgeicons from 'vite-plugin-purge-icons

记录一些使用vben时学习到的新的技巧。

本地图标还是在线图标

使用 iconify，是从线上的 Public host 获取图标，当需要本地化（如部署到局域网内），可以借用 purgeIcons 来实现。

对于 vite 有相应的插件 vite-plugin-purge-icons

// vite.config.js
import PurgeIcons from 'vite-plugin-purge-icons';

return {
	plugins: [
		// ...
    	PurgeIcons({
	      content: ['**/*.html', '**/*.js', '**/*.ts', '**/*.vue', '**/*.jsx', '**/*.tsx', '**/*.json'],
	    })
	]
}
1
2
3
4
5
6
7
8
9
10
11

这样可以自动提取所有使用到的图标，打包在 '@purge-icons/generated' 下，加在main.js 或者 Icon组件中即可。

import Iconify from '@purge-icons/generated';

// Icon 组件
const svg = Iconify.renderSVG(icon, {});
if (svg) {
	// 本地图标
	el.textContent = '';
	el.appendChild(svg);
} else {
	// 线上图标
	const span = document.createElement('span');
	span.className = 'iconify';
	span.dataset.icon = icon;
	el.textContent = '';
	el.appendChild(span);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

以上是基本的用法，由于purgeIcons只能检测到拼好的图标，不能检测动态拼接的图标（如 ant-design: + alert-outlined），所以可以借此设定两种图标模式。

• 本地模式下，生成全拼的图标名，可以被PurgeIcons提取到； （方便部署到局域网内）
• 在线模式下，生成prefix + icon的格式，让purgeIcons失效。 （减少打包体积，优化加载体验）

可更改的 API 服务地址

将API_URL写在dotenv变量里，方便各种环境下的调试。

这需要我们提前预知服务地址，在打包前写好文件。但是在某些情况下，我们未知服务地址，或者前端代码打包后需要更换服务地址，为此重新跑一边打包流程是没有必要的。

所以需要在打包时，通过和window变量结合，将服务地址放进一个js文件里，在index.html中引用。如果需要变更，我们就更改这个js文件即可，不仅不需要打包，甚至不需要重启部署服务。

在引用服务地址的代码处，我们判断production模式下，引用window变量，其他模式则直接用env变量。

function getAppGlobEnvConfig() {
  const ENV_NAME = getConfigFileName(import.meta.env);

  const GLOB_ENV = import.meta.env.DEV
    ? matchGlobEnv(importMetaEnv)
    : window[ENV_NAME];

  return GLOB_ENV;
}
1
2
3
4
5
6
7
8
9

我们写一个脚本postBuild.ts ，来生成一个app.config.js文件，利用Object.freeze技巧来防止修改。

    const windowConf = `window.${configName}`;
    const configStr = `${windowConf}=${JSON.stringify(config)};
      Object.freeze(${windowConf});
      Object.defineProperty(window, "${configName}", {
        configurable: false,
        writable: false,
      });
    `.replace(/\s/g, '');
    fs.mkdirp(getRootPath(OUTPUT_DIR));
    writeFileSync(getRootPath(`${OUTPUT_DIR}/app.config.js`), configStr);
1
2
3
4
5
6
7
8
9
10

在build脚本之后，执行postBuild.ts

  "build": "vite build && esno ./build/script/postBuild.ts"
1

我们在index.html中引入生成的app.config.js，也可以利用构建工具自动注入。

  const htmlPlugin = html({
    minify: isBuild,
    inject: {
      // Inject data into ejs template
      injectData: {
        title: VITE_GLOB_APP_TITLE,
        favicon: `/${isBuild ? '' : 'dev_'}favicon.ico`,
      },
      // Embed the generated app.config.js file
      tags: isBuild
        ? [
            {
              tag: 'script',
              attrs: {
                src: 'app.config.js',
              },
            },
          ]
        : [],
    },
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21