Home
img of docs

介绍如何在 Node.js 项目构建之后,自动将静态文件复制到 dist 目录(或其他目标目录),以便于发布和部署。

chou403

/ Tool

/ c:

/ u:

/ 4 min read

手动复制文件

如果不想使用插件,你也可以在构建脚本中添加一个 Node.js 脚本来手动复制文件。这样做可以确保在构建后立即执行文件复制操作。

创建手动复制脚本

在项目根目录下创建一个脚本文件,比如 copy-static-files.js:

   const { copyFileSync, mkdirSync, readdirSync, statSync } = require("fs");
const path = require("path");

const srcDir = path.resolve(__dirname, "src/assets");
const destDir = path.resolve(__dirname, "dist/_astro");

function copyRecursiveSync(src, dest) {
	const entries = readdirSync(src, { withFileTypes: true });

	for (const entry of entries) {
		const srcPath = path.resolve(src, entry.name);
		const destPath = path.resolve(dest, entry.name);

		if (entry.isDirectory()) {
			mkdirSync(destPath, { recursive: true });
			copyRecursiveSync(srcPath, destPath);
		} else if (entry.isFile()) {
			copyFileSync(srcPath, destPath);
		}
	}
}

copyRecursiveSync(srcDir, destDir);

在 package.json 中添加构建脚本

   {
	"scripts": {
		"build": "vite build && node copy-static-files.js"
	}
}

这样,每次你运行 pnpm build 时,Vite 将会构建项目,并在构建后执行文件复制操作。

Vite 构建插件

要在 astro.config.mjs 中集成 Vite 插件,可以使用 Astro 的 vite 配置字段。这允许你将 Vite 插件或配置直接嵌入到 Astro 项目中。

以下是如何将自定义 Vite 插件(如文件复制插件)集成到 astro.config.mjs 中的示例。

1. 创建 Vite 插件

首先,定义一个简单的 Vite 插件,用于复制静态文件。这个插件将被添加到 Astro 的 Vite 配置中。

   // copy-static-files.ts
import { promises as fs } from "fs";
import { resolve } from "path";

export function copyStaticFiles() {
	return {
		name: "copy-static-files",
		apply: "build",
		async buildEnd() {
			const srcDir = resolve("src/assets");
			const destDir = resolve("dist/_astro");

			async function copyRecursive(src: string, dest: string) {
				const entries = await fs.readdir(src, { withFileTypes: true });

				for (const entry of entries) {
					const srcPath = resolve(src, entry.name);
					const destPath = resolve(dest, entry.name);

					if (entry.isDirectory()) {
						await fs.mkdir(destPath, { recursive: true });
						await copyRecursive(srcPath, destPath);
					} else if (entry.isFile()) {
						await fs.copyFile(srcPath, destPath);
					}
				}
			}

			await fs.mkdir(destDir, { recursive: true });
			await copyRecursive(srcDir, destDir);
		},
	};
}

2. 集成到 astro.config.mjs

接下来,将该插件集成到 Astro 配置中,通过 vite 字段来配置 Vite。

   // astro.config.mjs
import { defineConfig } from "astro/config";
import { copyStaticFiles } from "./copy-static-files";

// https://astro.build/config
export default defineConfig({
	// 其他 Astro 配置项...
	vite: {
		plugins: [copyStaticFiles()],
	},
});

3. 运行 Astro 构建

当你运行 pnpm build 或 astro build 时,Vite 插件将自动在构建结束后执行,确保静态文件在页面渲染之前被复制。

4. 测试

在项目中添加静态文件,并在构建后检查它们是否正确复制到 dist/_astro 目录中。

总结

通过在 astro.config.mjs 中使用 vite 字段,可以将自定义 Vite 插件集成到 Astro 项目中,从而确保在构建过程中执行所需的额外操作,如复制静态文件。这种方法可以很好地解决文件依赖关系问题,确保页面渲染前所有资源都已准备好。

#tool #node