最近期末成绩也出了（大抵是寄了），觉得学校的教务系统实在太丑，决定写一个浏览器插件美化插件。

打开教务系统，一股00年代的复古拟物风格袭来，无数tr td构成的表格布局，拼音命名的变量名，随意设置的全局函数...我们大概可以猜到彼时这家公司程序员的工作环境似乎不太好。

前置知识

搭建脚手架

为了减轻插件体积，我们采用优秀的 react 替代品 preact 开发用户页面。

安装一系列依赖

1yarn add preact
2
3yarn add -D @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript @rollup/plugin-babel
4
5yarn add -D @babel/core @rollup/plugin-alias @babel/plugin-transform-react-jsx

编写 rollup 配置。

1import { nodeResolve } from "@rollup/plugin-node-resolve";
2import commonjs from "@rollup/plugin-commonjs";
3import typescript from "@rollup/plugin-typescript";
4import { babel } from "@rollup/plugin-babel";
5
6const extensions = [".js", ".jsx", ".ts", ".tsx"];
7
8export default [
9	{
10		input: "src/components/content.js",
11		output: [
12			{
13				file: "dist/content.bundle.cjs.js",
14				format: "cjs",
15				sourcemap: true,
16			},
17			{
18				file: "dist/content.bundle.esm.js",
19				format: "esm",
20				sourcemap: true,
21			},
22		],
23		plugins: [
24			nodeResolve({ extensions }),
25			commonjs(),
26			babel({
27				babelHelpers: "bundled",
28				extensions,
29				include: ["src/**/*"],
30			}),
31		],
32	},
33];

分析页面