刚好够用的简易前端工具集
内容提要
本文讨论了前端构建工具的复杂性，特别是 Create React App 和 webpack 的使用体验。作者推荐使用 esbuild 和 windicss，认为它们更轻量、易于维护，并提供了项目结构和配置示例，强调简化前端开发的重要性，适合初学者。
延伸解读
为什么选择 esbuild 和 windicss
作者推荐 esbuild 和 windicss 是因为它们更轻量、易于维护。esbuild 是一个用 Go 编写的 JavaScript 打包工具，速度快且功能足够，虽然还未到 1.0 版本，但已被 vite、snowpack 等知名项目使用。windicss 相比 tailwind 更轻量，性能也更好。两者结合，可以满足简单的 JavaScript 打包和 CSS 工具类需求，同时避免 Create React App 和 webpack 的复杂性。
项目结构与配置示例
作者提出了一个简洁的项目结构：dist 存放发布文件，assets 放资源，styles 放 CSS，layouts 放 HTML，scripts 放 React 等 JS 文件。每个目录职能清晰，没有各种 config 文件，便于维护和部署。package.json 中定义了 dev-js、dev-css、dev、build-js、build-css、build 等脚本，使用 concurrently 并行执行，通过 esbuild 和 windicss 命令完成开发和构建。
适用场景与局限性
这套工具集适合写简单的页面，对于前端新人来说更容易理解和上手。相比 Create React App 或 webpack，它在能力上会弱一些，例如可能缺少一些高级优化或插件生态。作者也提到，如果新增依赖，用 npm install 或 pnpm add 即可。因此，它更适合个人项目或对构建要求不高的场景，复杂项目可能仍需更成熟的工具。
Q&A
为什么 Create React App 使用体验不佳？
Create React App 添加了大量不必要的 package，使用体验像黑盒，难以理解其内部工作原理。
esbuild 有哪些优点？
esbuild 是一个轻量级的 js bundler，速度快且功能足够，适合前端项目的需求。
windicss 与 tailwind 有什么区别？
windicss 相比 tailwind 更轻量，性能更好，维护也更方便。
如何简化前端项目的目录结构？
建议的目录结构包括 dist、assets、styles、layouts、scripts 和 components，功能清晰，便于维护。
如何使用 esbuild 和 windicss 进行开发？
可以通过 npm 脚本使用 esbuild 和 windicss，分别处理 js 和 css 文件，支持实时监控和构建。
前端构建工具的复杂性对新手有什么影响？
复杂的构建工具如 webpack 和 Create React App 可能会让前端新人感到困惑，影响学习和开发效率。
