Recently, the final grades were released (probably sent by mail), and I found the school's academic system to be really ugly. I decided to write a browser plugin to beautify it.
Upon opening the academic system, a wave of retro skeuomorphic style from the 2000s hit me. Countless tr and td elements formed a table layout, variable names were whimsically named in Pinyin, and global functions were set up haphazardly... We can probably guess that the working environment for programmers at that time was not very good.
Prerequisites
Setting Up the Scaffold
To reduce the size of the plugin, we chose the excellent React alternative, Preact, to develop the user interface.
Install a series of dependencies:
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
Write the Rollup configuration.
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];
