feat: 🚀 新增打包功能，优化打包策略

Author: Kele-Bingtang

README.md

@@ -10,6 +10,7 @@
 - JS 支持修改 themeConfig
 - 构建测试、部署测试、线上效果测试
 - 项目发布 NPM 库
+- 版本号打包后自动更新
 
 ## 使用
 

build/helper/excludeFiles.ts

@@ -1,6 +1,2 @@
-// 基础
-const excludes = ['node_modules', 'dist'];
-
-export const excludeFiles = (files: string[]) => {
-  return files.filter(path => !excludes.some(exclude => path.includes(exclude)));
-};
+// 打包时需要忽略的目录
+export const excludes = ["**/node_modules", "**/dist"];

build/helper/external.ts

@@ -1,2 +1,18 @@
+// 打 umd 包时针对 external 外部依赖指定全局变量名称
+export const globals = {
+  vue: "Vue",
+  vite: "Vite",
+  vitepress: "VitePress",
+  "vitepress/theme": "VitePressTheme",
+  "node:path": "node:path",
+  "node:fs": "node:fs",
+  fs: "fs",
+  "gray-matter": "GrayMatter",
+  "element-plus": "ElementPlus",
+  "@element-plus/icons-vue": "ElementPlusIconsVue",
+  "@giscus/vue": "Giscus",
+  "@waline/client": "Waline",
+};
+
 // 指定外部依赖，rollup 不会将这些依赖代码打包进去
-export const external = ['vue', 'vitepress', 'vitepress/theme', 'node:path', 'node:fs', 'chalk', 'gray-matter'];
+export const external = Object.keys(globals);

build/helper/index.ts

@@ -4,8 +4,5 @@ export * from './excludeFiles';
 export * from './external';
 export * from './plugin';
 
-export const target = 'es2018';
-
-export const PKG_NAME = 'vitepress-theme-teeker';
-
-export const PKG_CAMEL_CASE_NAME = 'teeker';
+export const target = 'es2020';
+export const PKG_CAMEL_CASE_NAME = 'Teeker';

build/helper/path.ts

@@ -1,29 +1,30 @@
-import { resolve } from 'path';
+import { resolve } from "path";
+
+export const PKG_NAME = "vitepress-theme-teeker";
 
 /** 项目根目录 `/`  */
-export const projRoot = resolve(__dirname, '../../');
+export const projRoot = resolve(__dirname, "../../");
 /** vitepress-theme-teeker 目录 即 `/vitepress-theme-teeker` */
-export const tkRoot = resolve(projRoot, 'vitepress-theme-teeker');
+export const tkRoot = resolve(projRoot, PKG_NAME);
 
 /** 组件目录 `/vitepress-theme-teeker/components` */
-export const compRoot = resolve(tkRoot, 'components');
+export const compRoot = resolve(tkRoot, "components");
 
 /** Docs */
-export const docsDirName = 'docs';
+export const docsDirName = "docs";
 export const docRoot = resolve(projRoot, docsDirName);
-export const vpRoot = resolve(docRoot, '.vitepress');
+export const vpRoot = resolve(docRoot, ".vitepress");
 
 /** `/dist` */
-export const buildOutput = resolve(projRoot, 'dist');
+export const buildOutput = resolve(projRoot, "dist");
 /** `/dist/vitepress-theme-teeker` */
-export const tkOutput = resolve(buildOutput, 'vitepress-theme-teeker');
+export const tkOutput = resolve(buildOutput, PKG_NAME);
 /** /dist/types */
-export const tsOutput = resolve(buildOutput, 'types');
+export const tsOutput = resolve(buildOutput, "types");
 
-export const tkPackage = resolve(tkRoot, 'package.json');
-export const projPackage = resolve(projRoot, 'package.json');
-export const docPackage = resolve(docRoot, 'package.json');
+export const tkPackage = resolve(tkRoot, "package.json");
+export const projPackage = resolve(projRoot, "package.json");
+export const docPackage = resolve(docRoot, "package.json");
 
 /** /tsconfig.web.json */
-export const webTsConfig = resolve(projRoot, 'tsconfig.web.json');
-
+export const webTsConfig = resolve(projRoot, "tsconfig.web.json");

build/helper/plugin.ts

@@ -6,19 +6,25 @@ import autoprefixer from "autoprefixer";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import { target } from "../helper";
 import vuePlugin from "@vitejs/plugin-vue";
-// import vue from "rollup-plugin-vue";
+import url from "@rollup/plugin-url";
+import cssnano from "cssnano";
+import type { Plugin } from "rollup";
 
 // rollup 插件。rollup 本身只支持原生 JavaScript 文件打包，如果项目包含 vue、json 等非原生 JavaScript 文件，则利用插件来支持打包
 export const plugins = [
+  vitepressThemeTeekerClearConsole(),
   vuePlugin({ isProduction: true }),
-  // vue({}),
   json(),
   // 解析和处理 Node.js 风格的模块导入语句（如 `import something from 'my-package'`），因为 Rollup 本身默认仅支持 ES 模块导入（即通过相对或绝对路径导入本地文件）
-  nodeResolve({ extensions: [".mjs", ".js", ".json", ".ts"] }),
+  nodeResolve({
+    extensions: [".mjs", ".js", ".json", ".ts"],
+  }),
   commonjs(),
+  url({ include: ["**/*.png", "**/*.jpg"] }),
   postcss({
-    extract: true,
-    plugins: [autoprefixer()],
+    namedExports: true,
+    extract: "index.css",
+    plugins: [autoprefixer(), cssnano()],
   }),
   // 利用 esbuild 打包，能提高打包速度
   esbuild({
@@ -30,3 +36,20 @@ export const plugins = [
     },
   }),
 ];
+
+/**
+ * 清除 console.log
+ */
+export function vitepressThemeTeekerClearConsole(): Plugin {
+  const reg = /console\.log\([^)]*\);?\n?/g;
+  return {
+    name: "vitepress-theme-teeker-clear-console-plugin",
+    transform(code, id) {
+      if (id.endsWith(".ts") || id.endsWith(".vue")) {
+        const transformedCode = code.replace(reg, "");
+        return transformedCode;
+      }
+      return code;
+    },
+  };
+}

build/helper/rollup.ts

@@ -1,6 +1,14 @@
-import { OutputOptions, RollupBuild } from 'rollup';
-
+import { OutputOptions, RollupBuild } from "rollup";
 
 export function writeBundles(bundle: RollupBuild, options: OutputOptions[]) {
   return Promise.all(options.map(option => bundle.write(option)));
 }
+
+export function writeBundlesFn(getBundleFn: (format: "esm" | "cjs") => Promise<RollupBuild>, options: OutputOptions[]) {
+  return Promise.all(
+    options.map(async option => {
+      const bundle = await getBundleFn(option.format as "esm" | "cjs");
+      await bundle.write(option);
+    })
+  );
+}

build/index.ts

@@ -3,7 +3,7 @@ import { copyFile, readFile, writeFile } from "fs/promises";
 import { copy } from "fs-extra";
 import { resolve } from "path";
 import { tkPackage, tkOutput, projRoot, buildOutput } from "./helper";
-import chalk from "chalk";
+import picocolors from "picocolors";
 
 /**
  * 复制 .d.ts 文件到指定目录
@@ -39,15 +39,21 @@ const updateVersion = async () => {
   tkOutputPkgInfo.version = tkPackageInfo.version;
 
   await writeFile(tkOutputPkg, JSON.stringify(tkOutputPkgInfo, null, 2) + "\n");
+
+  // const versionFile = resolve(tkOutput, "es/version.mjs");
+  // const versionContent = await readFile(versionFile, "utf-8");
+  // const newVersion = versionContent.replace("1.0.0", tkPackageInfo.version);
+
+  // await writeFile(versionFile, JSON.stringify(newVersion, null, 2) + "\n");
 };
 
 Promise.all(tasks).then(async () => {
   await copyTypesDefinitions();
-  console.log(chalk.green("Successfully copied definition file"));
+  console.log(picocolors.green("Successfully copied definition file"));
 
   await copyFiles();
-  console.log(chalk.green("Successfully copied package.json and README.md"));
+  console.log(picocolors.green("Successfully copied package.json and README.md"));
 
   await updateVersion();
-  console.log(chalk.green("Successfully updated version"));
+  console.log(picocolors.green("Successfully updated version"));
 });

build/package.json

@@ -15,16 +15,18 @@
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/fs-extra": "^11.0.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
-    "chalk": "^5.4.1",
+    "cssnano": "^7.0.6",
     "esbuild": "^0.24.2",
     "fast-glob": "^3.3.3",
     "fs-extra": "^11.2.0",
+    "picocolors": "^1.1.1",
     "rollup": "^4.30.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-vue": "^6.0.0",
     "unbuild": "^3.2.0",
     "vite-plugin-dts": "^4.5.0"
   }

build/tasks/full-bundle.ts

@@ -1,8 +1,8 @@
-import { resolve } from 'path';
-import { readFileSync } from 'fs';
-import { rollup } from 'rollup';
-import { minify as minifyPlugin } from 'rollup-plugin-esbuild';
-import chalk from 'chalk';
+import { resolve } from "path";
+import { readFileSync } from "fs";
+import { rollup } from "rollup";
+import { minify as minifyPlugin } from "rollup-plugin-esbuild";
+import picocolors from "picocolors";
 import {
   projPackage,
   target,
@@ -13,9 +13,10 @@ import {
   PKG_CAMEL_CASE_NAME,
   plugins,
   external,
-} from '../helper';
+  globals,
+} from "../helper";
 
-const pkg = JSON.parse(readFileSync(projPackage, 'utf-8'));
+const pkg = JSON.parse(readFileSync(projPackage, "utf-8"));
 
 // 在 Rollup 中，banner 用于在打包生成的输出文件顶部添加一段文本。这段文本可以是版权声明、警告信息、版本号等任何你希望在文件开头显示的内容。
 const banner = `/*! ${PKG_NAME} v${pkg.version} */\n`;
@@ -30,48 +31,39 @@ const buildAll = async (minify?: boolean) => {
     );
   }
 
-  console.log(chalk.cyan(`Starting build ${minify ? 'compressed' : ''} full-bundle`));
+  console.log(picocolors.cyan(`Starting build ${minify ? "compressed " : ""}full-bundle`));
 
   // 配置详情地址：https://cn.rollupjs.org/configuration-options/
   const bundle = await rollup({
-    input: resolve(tkRoot, 'index.ts'), // 打包入口文件
+    input: resolve(tkRoot, "src/index.ts"), // 打包入口文件
     plugins,
     external, // 指定外部依赖，Rollup 不会将这些依赖代码打包进去
     treeshake: true, // 允许移除未使用的导出和代码
   });
 
   await writeBundles(bundle, [
     {
-      format: 'umd',
-      file: resolve(tkOutput, `index${minify ? '.min' : ''}.js`), // 打包后的文件路径
-      exports: 'named',
+      format: "umd",
+      file: resolve(tkOutput, `index${minify ? ".min" : ""}.js`), // 打包后的文件路径
+      exports: "named",
       name: PKG_CAMEL_CASE_NAME, // 全局变量名称，通过这个变量名来访问打包后的入口文件，如浏览器端如果 window.${PKG_CAMEL_CASE_NAME} 访问
       sourcemap: false,
       banner,
       // 指定外部依赖: 当你将某些模块标记为 external 时，Rollup 不会将它们打包进最终的输出文件中。为了确保这些模块在运行时能够被正确引用，通过 globals 来指定这些模块对应的全局变量名称
-      globals: {
-        vue: 'Vue',
-        'node:path': 'node:path',
-        'node:fs': 'node:fs',
-        fs: 'fs',
-        chalk: 'Chalk',
-        'gray-matter': 'GrayMatter',
-        vitepress: 'VitePress',
-        'vitepress/theme': 'VitePressTheme',
-      },
+      globals,
     },
     {
-      format: 'esm',
-      file: resolve(tkOutput, `index${minify ? '.min' : ''}.js`),
+      format: "esm",
+      file: resolve(tkOutput, `index${minify ? ".min" : ""}.js`),
       sourcemap: false,
     },
   ]);
 
   const msg = minify
-    ? 'Successfully build compressed full-bundle For umd and esm'
-    : 'Successfully build full-bundle For umd and esm';
+    ? "Successfully build compressed full-bundle For umd and esm"
+    : "Successfully build full-bundle For umd and esm";
 
-  console.log(chalk.green(msg));
+  console.log(picocolors.green(msg));
 };
 
 export default [buildAll(false), buildAll(true)];