前端基于excljs导出xlsx时图片资源的处理及踩坑实录

前言

每当看到好的文章或者好的视频，底下总有那么一些长得好看，说话有好听的人才。没有文化的我只能默默的留下不争气的“卧槽，牛逼！

同样是腰间盘，为何汝如此突出。同样九年义务教育，为何汝如此优秀。痛定思痛，我决定要向他们学习。于是秉着收藏即学会的原则，我要用 React & Antd & Vite 快速做一个 chrome 扩展程序(常用名：插件) – 语录收藏。大体的功能是可以选中一段话，右键可以保存到个人语录中。点击输入框会将所有保存的语录弹窗显示，可供我们快捷输入。点击插件会随机显示一段心灵鸡汤，可以随时补充语录。

安装

yarn create vite my-extension --template react-ts 
1

我们先创建一个 react-ts 的工程

yarn add antd 
1

接着安装完 antd之后，我们就可以开始下面的工作了

改造多页面配置

根据 Vite 官方文档 把它改造成一个多页面的工程。多页面的 vite.config.ts 如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path, { resolve } from "path";
import makeManifest from "./utils/plugins/make-manifest";
import customDynamicImport from './utils/plugins/custom-dynamic-import';
import vitePluginImp from 'vite-plugin-imp'

const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const assetsDir = resolve(root, "assets");
const publicDir = resolve(__dirname, "public");
const outDir = resolve(__dirname, "dist");

const isDev = process.env.__DEV__ === "true";

// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {"@src": root,"@assets": assetsDir,"@pages": pagesDir,},},plugins: [react(), makeManifest(), customDynamicImport(),// 按需加载配置vitePluginImp({libList: [{libName: "antd",style: (name) => `antd/es/${name}/style`,},],}),],publicDir,build: {outDir,sourcemap: isDev,rollupOptions: {input: {popup: resolve(pagesDir, "popup", "index.html"),options: resolve(pagesDir, "options", "index.html"),background: resolve(pagesDir, "background", "index.ts"),// content 需要在 manifest 中指定 css 资源content: resolve(pagesDir, "content", "index.ts"),contentStyle: resolve(pagesDir, "content", "style.less"),},output: {entryFileNames: "src/pages/[name]/index.js",chunkFileNames: isDev? "assets/js/[name].js": "assets/js/[name].[hash].js",assetFileNames: (assetInfo: {name: string | undefined;source: string | Uint8Array;type: 'asset';}) => {const { dir, name: _name } = path.parse(assetInfo.name || '');const assetFolder = getLastElement(dir.split("/"));const name = assetFolder + firstUpperCase(_name);return `assets/[ext]/${name}.chunk.[ext]`;},},},},css: {preprocessorOptions: {less: {javascriptEnabled: true,modifyVars: {'@primary-color': '#1e80ff',	// 设置 antd 主题色},},}},
});

function getLastElement(array: ArrayLike): T {const length = array.length;const lastIndex = length - 1;return array[lastIndex];
}

function firstUpperCase(str: string) {const firstAlphabet = new RegExp(/( |^)[a-z]/, "g");return str.toLowerCase().replace(firstAlphabet, (L) => L.toUpperCase());
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这里有几个点需要注意下：

• 通过 vite-plugin-imp 按需加载 antd
• contentStyle 为 Content script 内容脚本(下文会介绍)指定的样式，需要单独指定
• make-manifest、custom-dynamic-import 这两个自定义插件分别是为了处理 manifest 和 content 动态导入

Nodemon 自动更新

为了方便我们快捷开