前言
每当看到好的文章或者好的视频,底下总有那么一些长得好看,说话有好听的人才。没有文化的我只能默默的留下不争气的“卧槽,牛逼!
同样是腰间盘,为何汝如此突出。同样九年义务教育,为何汝如此优秀。痛定思痛,我决定要向他们学习。于是秉着收藏即学会的原则,我要用 React & Antd & Vite 快速做一个 chrome 扩展程序(常用名:插件) – 语录收藏。大体的功能是可以选中一段话,右键可以保存到个人语录中。点击输入框会将所有保存的语录弹窗显示,可供我们快捷输入。点击插件会随机显示一段心灵鸡汤,可以随时补充语录。
安装
yarn create vite my-extension --template react-ts
我们先创建一个 react-ts
的工程
yarn add antd
接着安装完 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<T>(array: ArrayLike<T>): 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());
}
这里有几个点需要注意下:
- 通过
vite-plugin-imp
按需加载antd
- contentStyle 为 Content script 内容脚本(下文会介绍)指定的样式,需要单独指定
- make-manifest、custom-dynamic-import 这两个自定义插件分别是为了处理 manifest 和 content 动态导入