Vite 有什么好的文件结构?

What is a good file structure to have with Vite?

我正在使用 Vite 轻松地 运行 tailwind 和我的原版 HTML 和 JavaScript.
中的其他 npm 包 这就是我现在拥有的:Current file structure

这是我的 vite.config.js

const { resolve } = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
 build: {
   rollupOptions: {
     input: {
       main: resolve(__dirname, "index.html"),
       about: resolve(__dirname, "about/index.html"),
     },
   },
 },
});

有谁知道多页面应用程序的良好文件结构,或者知道我当前结构的改进吗?

就我个人而言,我喜欢根据代码的调用方式或类型来分隔代码。例如,图像和类似的媒体类型文件可能位于“assets”目录中。与 CSS(或任何样式方法)相同,在“styles”或类似目录中,对于 JS 也是如此。而使用 JS,鉴于我通常在任何给定项目中使用 99% 的 JS,我得到超级模块化。

我的 go-to JS 风格(或者老实说只是一般的代码)是:

  • 用于高度 re-usable 代码的 Utils 目录(代码类似于 lodash 中的实用程序或超级通用的类似实用程序库,可用于任何地方)
  • 调用外部 API 或类似数据获取的代码的服务目录。
  • Components 目录(与 React/Vue/etc 一起更有用,但仍然有用!
  • 页数(同上)

依此类推,结构基于文件的实际使用方式或文件类型。

话虽这么说,但我会亲自检查 React 人们通常是如何做的,然后将该风格与 Angular 组织其代码的方式相结合。我在两者之间找到了一个最佳点。