TurboCoolStack

turbocoolstack⚛

⚛多平台应用程序开发启动

TurboCoolStack在TurborePo内提供了一个坚实的起点，用于跨不同平台构建应用程序，集成电子，React（CRA，Next.JS），React Native（Expo -exto -ios，Android）和tailwind CSS，以用于流线的开发过程。该设置是为那些希望有效地开发桌面，Web和移动应用程序具有一致质量和简化工作流程的人设计的。

重要的是： TurboCoolStack的主要特征之一是，几乎所有应用都利用了包装/UI中的React组件的共同来源。这种结构促进了发展的统一性和效率。此外，所有工作区都共享常见的尾风CSS配置，以确保所有平台上的一致设计系统。

？工作区概述

• 应用程序/文档：基于使用Tailwind CSS创建React应用的Web应用程序。
• App/Electronrender ：使用Tailwind CSS创建React App，用于电子渲染器过程和桌面应用程序UI开发。
• App/ElectronMain ：处理由WebPack管理的Electron的主要过程，负责OS级交互。
• 应用程序/电子构造器：用电子构建器监督应用程序包装阶段，其任务是编译和组装最终的桌面应用程序。
• App/Antial ：基于本地风格CSS的Expo的React Antial App。
• 应用程序/Web ：带有尾风CSS的Next.js的Web应用程序。
• 包装/UI ：此工作空间是用UI React组件的中央存储库，该组件用尾风CSS造型。

先决条件

在进行设置之前，请确保您的开发环境满足以下要求。该项目是使用特定版本的节点和纱线创建的，以避免兼容性问题并利用其最新功能。这是您需要的版本：

• Node.js ：版本18。

• 纱线：版本4。

通过使用相同的版本，您可以与项目的原始开发环境保持一致，从而最大程度地减少与版本差异相关的潜在问题。

？设置和安装

1. 克隆存储库。
2. 在根目录中执行yarn install以获取所有依赖关系。

我建议使用纱线来达到开发过程中的一致性和效率，尽管NPM仍然是另一种选择。

用法

有了依赖项，您可以潜入发展：

• 在Root Directory中运行yarn dev ，以在开发模式下启动项目，并配有用于实时更新的热重载。
• 当您准备好编译应用程序的生产包装时，在根目录中运行yarn build 。

对React，TurborePo，Next.js，Expo和Electron的基本了解将增强您的发展体验。

开发模式概述

在开发模式下，应用程序的各个组件会自动初始化。

• App/ElectonRender ：此部分将在电子窗口内自动启动。此外，为了更容易访问，可以通过端口3001的Web浏览器获得。
• 应用/电子：这是用于配置电子桌面应用程序的指定区域。在此处定义应用程序主要过程的行为是不可或缺的。从窗口创建到自定义功能，此部分对于桌面应用程序的性能和功能集都是关键的。确保配置满足您项目需求的设置。
• App/Docs ：此工作区将自动从浏览器窗口开始，可在端口3002访问。
• App/Web ：与其他不同之处，Next.js应用程序不会在浏览器中自动启动。它要求您手动导航到http：// localhost：3000/。
• 应用程序/本机：最简单的方法之一是在移动设备上使用Expo GO应用程序。在开发模式下，请确保您登录台式机和移动设备上的同一免费博览会帐户。此同步将自动在Expo GO应用中显示链接，将您引向当前项目。

资源

为了充分利用TurboCoolstack，您可能会发现熟悉所使用技术的文档很有帮助。以下是官方文档的快速链接：

• TurborePo ：官方文件
• Next.js ：官方文件
• CSS尾风：官方文档
• 电子：官方文件
• 反应本地：官方文件
• 博览会：官方文件

待办事项列表

管道中有持续的改进和功能，以提高涡轮板的多功能性和效率。这是路线图上的一些任务：

1. 在工作空间之间共享静态文件：

   • 当前，要在多个工作区中使用单个图像，必须将文件复制到每个工作区的public文件夹中。我的目的是解决静态文件的问题，以防止冗余并改善资源管理。让我知道您是否知道如何处理？

2. packages/ui-native工作区的创建：

   • 目的是设置一个名为packages/ui-native的新工作区，并在其中配置本地风格。这种增强功能将使app/native工作区可以与packages/ui-native共享组件，从而简化跨天然平台的开发过程。

完成这些任务将有助于使TurboCoolstack更加高效和对开发人员友好。欢迎对这些待办事项的任何贡献或建议！

？解决常见问题

跨不同平台和环境开发有时会导致意外的问题。本节旨在解决与TurboCoolstack一起工作时可能遇到的一些常见问题。

问题：在Windows上建立故障

问题：开发人员可能会在apps/electronBuilder工作区中的文件复制阶段期间在Windows系统上遇到构建过程故障。该操作意外停止，指示通常与用于复制和删除文件的命令行指令有关的错误。

可能原因：这个问题通常是由于package.json和Windows命令行解释器中的某些shell命令之间的不兼容而引起的。这些脚本命令是针对基于UNIX的系统设置的，并且不像Windows上的预期执行。

快速修复：

1. 打开apps/electronBuilder工作区中的package.json文件。
2. 找到脚本。
3. 修改这些命令以使用其窗口当量。
4. 保存更改并重新运行构建过程。

 // Example modification in package.json (adjusting for Windows compatibility)
"scripts" : {
  // Modified for Windows
  "copy-main" : " xcopy .. \ electronMain \ dist dist-main \ /E /I /H /Y " , 
  "copy-renderer" : " xcopy .. \ electronRenderer \ build dist-renderer \ /E /I /H /Y " , 
  "copy" : " yarn copy-main && yarn copy-renderer " ,
  "clear" : " rimraf dist " ,
  "cleaning-up" : " rimraf dist-main && rimraf dist-renderer " , 
  "clean" : " rimraf dist && rimraf dist-main && rimraf dist-renderer " ,
  "build" : " yarn copy && electron-builder && yarn cleaning-up " ,

  // Original Unix commands
  "copy-main" : " cp -R ../electronMain/dist dist-main " ,
  "copy-renderer" : " cp -R ../electronRenderer/build dist-renderer " ,
  "copy" : " yarn copy-main && yarn copy-renderer " ,
  "clear" : " rm -rf dist " ,
  "cleaning-up" : " rm -rf dist-main && rm -rf dist-renderer " ,
  "clean" : " rm -rf dist && rm -rf dist-main && rm -rf dist-renderer " ,
  "build" : " yarn copy && electron-builder && yarn cleaning-up " ,
}

？执照

该项目是根据MIT许可条款获得许可的，可免费使用。

为您的个人，公司或教育目的，随意使用并修改代码库。不需要归因，但是如果您发现此项目有所帮助，请始终感谢参考或信用。

---

表示您的支持

如果您发现TurboCoolStack有用，请考虑给存储库一个明星！您的支持促使我继续使该项目变得更好。

在这里播放仓库。

感谢您参与这一旅程！

---