Vite 有什么好的文件结构？

Question

我正在使用 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"),
     },
   },
 },
});

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

Answer 1

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

我的 go-to JS 风格（或者老实说只是一般的代码）是：

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

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

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

Vite 有什么好的文件结构？

What is a good file structure to have with Vite?

javascript

file

build

structure

vite