├── .gitignore ├── docs ├── images │ ├── main-image.png │ ├── search-deps.png │ ├── add-dep-button.png │ ├── task-row-toggle.png │ ├── dev-server-module.png │ ├── dev-server-toggle.png │ └── task-details-toggle.png ├── adding-a-project.md └── getting-started.md ├── url-state-duplication.md ├── CONTRIBUTING.md └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store -------------------------------------------------------------------------------- /docs/images/main-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinanf-boy/guppy-docs-zh/HEAD/docs/images/main-image.png -------------------------------------------------------------------------------- /docs/images/search-deps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinanf-boy/guppy-docs-zh/HEAD/docs/images/search-deps.png -------------------------------------------------------------------------------- /docs/images/add-dep-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinanf-boy/guppy-docs-zh/HEAD/docs/images/add-dep-button.png -------------------------------------------------------------------------------- /docs/images/task-row-toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinanf-boy/guppy-docs-zh/HEAD/docs/images/task-row-toggle.png -------------------------------------------------------------------------------- /docs/images/dev-server-module.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinanf-boy/guppy-docs-zh/HEAD/docs/images/dev-server-module.png -------------------------------------------------------------------------------- /docs/images/dev-server-toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinanf-boy/guppy-docs-zh/HEAD/docs/images/dev-server-toggle.png -------------------------------------------------------------------------------- /docs/images/task-details-toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinanf-boy/guppy-docs-zh/HEAD/docs/images/task-details-toggle.png -------------------------------------------------------------------------------- /url-state-duplication.md: -------------------------------------------------------------------------------- 1 | 2 | > 这是我主要为自己写的一份文件,提醒我为什么我有一些非传统的设置来管理" 选定的项目 "状态. 3 | 4 | 在大多数应用中,URL 是 事物ID 的真实状态. 5 | 6 | 如果您在 `/projects/123上`,则 `project ID为123`,并且 URL是真实状态. Redux将保存 对象的 map,但您必须选择一个`id: 123`从该 map,基于URL. 7 | 8 | 通常你想要的是避免在 redux存储中 复制该状态. Redux 最适合作为单一事实来源,尝试链接 Redux和URL状态 可能很脆弱. 9 | 10 | 然而,这正是我所做的. 🤔 11 | 12 | ### 为什么我不能只使用URL状态 13 | 14 | 这是一款桌面应用. 当它加载时,我想将用户重定向到他们上次打开它时的项目页面. 15 | 16 | 我*有*将所选项目ID 存储在 redux 中,以便我可以将其保存在 localStorage中,并在下次打开应用程序时 重新补充. 17 | 18 | 此外,有时我`可能`会想要从 不同的页面 访问所选的项目ID.我希望能够灵活地做到这一点 - 无论 是否/何时 这个 **可能** 的发生. 19 | 20 | ### 为什么我不能只使用 Redux状态 21 | 22 | 基于 特定路由 的项目仍然有相关的值. 没有它,我必须创建自己的 路由解决方案,以便在项目之间导航,我希望能够 从应用程序的任何位置 链接到 特定项目页面,而无需担心调度 redux操作. 这个项目使用 React Router,没有合适的项目页面URL 是很奇怪的. 23 | 24 | ### 我做了什么来减轻 复制这个真实来源的 危险 25 | 26 | 在`App`,我监听`history`对象. 每当页面中的任何 路径发生变化 时,我都会检查它是否是 项目页面 的导航,并 dispatch-触发 使用 URL中的项目ID 的 action-行为 更新 Redux存储. 27 | 28 | 在应用程序内部工作方面,我们应该将 Redux 视为真实的来源. 29 | 30 | 实际上,URL是*action*设定状态. 埃里克·文斯蒂 (Eric Vinceti) 有一个谈话,他谈到 URL是如何 action,而不是 状态-state. 这个模型似乎在这里工作得很好. 31 | 32 | > url 变化 => no/yes => dispatch("action",url-id) => reduex store 变化 -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # 贡献 3 | 4 | 感谢您对 Guppy 的兴趣! 我们对社区的任何贡献表示 欢迎和感激. 我们希望Guppy 成为一项社区活动,我们所有人共同努力,让那些 没有终端经验 的人们更容易进行网页开发! 5 | 6 | ## 报告问题和提出问题 7 | 8 | 在打开问题之前,请搜索[问题跟踪器](https://github.com/joshwcomeau/guppy/issues)确保您的问题尚未报告. 9 | 10 | ### 错误和改进 11 | 12 | *Guppy是alpha软件*,你可能会遇到一些问题. 13 | 14 | 我们使用 问题跟踪器 来跟踪 Guppy本身,其示例和文档的错误和改进. 我们鼓励您 打开讨论 改进,架构,理论,内部实现 等问题. 如果之前讨论过某个主题,我们将要求您加入之前的讨论. 15 | 16 | ## 开发 17 | 18 | 访问[问题跟踪器](https://github.com/joshwcomeau/guppy/issues)找到需要注意的 `open` 问题列表. 贡献的最佳方式是,找到你能够并且愿意解决的问题. 随着项目的成熟,我们希望为 新的React开发人员 添加更多"good first contribution"问题. 19 | 20 | Fork,然后 clone repo : 21 | 22 | git clone https://github.com/your-username/guppy.git 23 | 24 | ### 运行 25 | 26 | #### 本地开发 27 | 28 | 您可以通过运行本地开始本地开发`start`任务: 29 | 30 | npm run start 31 | 32 | 这应该打开一个运行应用程序的 Electron窗口. 33 | 34 | 在开发过程中,所有项目都是在`~/guppy-projects-dev` 35 | 36 | 您可以运行以下命令来构建MacOS可执行文件: 37 | 38 | npm run package 39 | 40 | 结果将在`release-builds`文件夹. 41 | 42 | ### 测试和类型检查 43 | 44 | 不幸的是,Guppy 目前很少是正在测试. 45 | 46 | 我们希望在此期间添加更多测试,以及 添加CI集成 运行测试,但是现在您可以使用以下命令运行测试: 47 | 48 | npm run test 49 | 50 | 该项目使用 Flow,可以使用以下方法检查类型: 51 | 52 | npm run flow 53 | 54 | 这个项目使用 Prettier,这应该在提交时自动运行. 55 | 56 | ### 文档 57 | 58 | 请在项目中了解更多关于 Guppy的信息[自述](readme.md),或位于[/docs](./docs)目录. 59 | 60 | ### 发送拉取请求 61 | 62 | 对于 非平凡的更改,请在开始工作之前,打开有关 新功能或重构 的提案的问题,或对 现有的请求功能问题 发表评论. 我们不希望,您在我们不想接受的拉动请求上浪费您的努力. 63 | 64 | 另一方面,有时是 开始对话的最佳方式*是*发送拉取请求. 用你最好的判断! 65 | 66 | 通常,贡献工作流程如下所示: 67 | 68 | - 找到或打开一个新问题在[问题跟踪器](https://github.com/joshwcomeau/guppy/issues). 69 | - Fork 本项目 70 | - 基于`master`分支创建一个新的功能分支. 71 | - 确保所有测试都通过 72 | - 提交拉取请求,引用它解决的任何问题. 73 | 74 | 请尽量将 拉取请求集中在规范内,避免包含不相关的提交. 75 | 76 | 在您提交了拉取请求后,我们会尽快回复您. 我们可能会建议一些变化或改进. 77 | 78 | 谢谢你的贡献! 79 | -------------------------------------------------------------------------------- /docs/adding-a-project.md: -------------------------------------------------------------------------------- 1 | 2 | # 添加项目 3 | 4 | > Guppy 是一个旨在完全取代终端的配套工具,因此 新手可以 在他们开始构建酷炫的东西之前 不需要学习其他技能. 5 | > 6 | > 它目前处于 Alpha状态,这意味着我们距离完全实现梦想还有很长的路要走. 您可能遇到错误,它只与 某些类型的项目和某些操作系统 兼容. 7 | > 8 | > 对于遇到的任何麻烦,请提前道歉. 请留下反馈! 9 | 10 | ## 安装 11 | 12 | 安装说明书[请看这](../readme.md#安装). 13 | 14 | ## 你的第一个项目 15 | 16 | Guppy 基于 每个项目工作: 每个项目在 Guppy的界面中 都有自己的区域. 所以,我们首先需要的是一个项目! 17 | 18 | 介绍界面提供两个选项: "Create a new web application" and "import an existing project". 19 | 20 | 您还可以通过 应用程序-菜单 随时访问这些选项: 21 | 22 | - `File -> Create New Project` (键盘快捷键: `⌘N`) 23 | - `File -> Import Existing Project` (键盘快捷键: `⌘I`) 24 | 25 | ### 创建一个新项目 26 | 27 | 如果要启动全新项目,请选择此选项. 28 | 29 | 该向导将指导您完成整个过程,但本指南将在您需要填写的字段中添加一些其他详细信息. 30 | 31 | #### Project名 32 | 33 | 您的项目名称可以是您想要的任何名称! 特殊字符很酷. emoji 🎉. 34 | 35 | > 目前无法从 Guppy中更改项目名称,但您始终可以修改项目的 package.json才能修改为其他名称. 36 | 37 | #### Project类型 38 | 39 | 目前有两种类型的支持项目: `Vanilla React` 和 `Gatsby`. 40 | 41 | **Vanilla React**是一个最小,但完全可以开始使用 React开发 的解决方案. 它在幕后用[create-react-app](https://github.com/facebook/create-react-app),由 Facebook构建的工具,已经成为新应用程序创建的标准方式,适合 初学者和有经验的开发人员. 42 | 43 | [**Gatsby**](https://www.gatsbyjs.org/)是一个加强的静态站点生成器,可以快速进行一系列优化. 它背后还有一个充满活力的社区! 如果您正在构建一个静态站点 (例如,一个博客,一些信息) ,它可以大大提高生产力. 44 | 45 | > 注意: Gatsby 为不同的用例提供了大量的"启动器-starters",但是 Guppy还不支持它们. 46 | 47 | > 我们将在未来的更新中添加它,但是现在最好通过终端创建项目, 然后将其导入Guppy. 看到他们的官方文件[了解更多信息. ](https://www.gatsbyjs.org/tutorial/part-one/#check-your-development-environment) 48 | 49 | 最终,您选择的项目类型 取决于您的目标. 50 | 51 | 一些想法: 52 | 53 | - 您是否希望成为一名专业的网络开发人员,并希望学习这项技术? 54 | 55 | 选择"Vanilla React",以便您可以从头开始了解,有关创建React应用程序的更多信息 56 | 57 | - 您是否正在构建一个复杂的应用程序,如社交网络或 AirBnb 克隆? 58 | 59 | 你可能想要使用"Vanilla React",因为这有点超出了 Guppy创建的范围 60 | 61 | - 您是要构建博客,登录页面 还是 其他基于内容的项目? 62 | 63 | "Guppy"可以为您节省大量时间,也许是最佳选择. 64 | 65 | #### 项目图标 66 | 67 | 当您有多个项目时,有一种快速,直观的方式来区分它们是有帮助的. 68 | 69 | 您的项目图标对于在 Guppy 中快速跳转非常有用. 请注意,此图标不适合在您的应用程序中使用,它仅适用于 Guppy管理. 70 | 71 | 将来,我们将添加使用项目的图标的功能,或上传您自己的照片. 72 | 73 | > 但就目前而言,我们担心唯一的选择是少数免版税的图标. 74 | 75 | ### 导入现有项目 76 | 77 | 如果您在 Guppy 之外构建了一个 create-react-app或Gatsby项目, 您可以将其导入Guppy中 使用. 78 | 79 | Guppy 将保存对该项目的引用,以便下次打开 Guppy时,该项目会被记住. 80 | 81 | 如果磁盘上项目的路径发生变化,就像你将其移动到另一个目录一样,你需要重新导入它,但是所有的设置都会被保存 (我们将这些信息存储在你项目的`package.json`中,所以 Guppy 它会在重新导入时始终识别它, 即使它在另一台计算机上也是如此!) . 82 | 83 | 要导入项目,请使用菜单中的选项`File -> Import Existing Project` (键盘快捷键: `⌘I`) . 84 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # [guppy@0.0.1][commit] [![translate-svg]][translate-list] 2 | 3 | [translate-svg]: http://llever.com/translate.svg 4 | [translate-list]: https://github.com/chinanf-boy/chinese-translate-list 5 | 6 | 「 React.js的友好应用程序管理器和任务运行器 」 7 | 8 | 9 | --- 10 | 11 | ## 校对 ✅ 12 | 13 | 14 | 15 | 16 | 17 | 翻译的原文 | 与日期 | 最新更新 | 更多 18 | ---|---|---|--- 19 | [commit] | ⏰ 2018 7.16 | ![last] | [中文翻译][translate-list] 20 | 21 | [last]: https://img.shields.io/github/last-commit/joshwcomeau/guppy.svg 22 | [commit]: https://github.com/joshwcomeau/guppy/tree/73a9f68702d44fe03dad118bd1b112f1998ef454 23 | 24 | 25 | 26 | 27 | ### 贡献 28 | 29 | 欢迎 👏 勘误/校对/更新贡献 😊 [具体贡献请看](https://github.com/chinanf-boy/chinese-translate-list#贡献) 30 | 31 | ## 生活 32 | 33 | [If help, **buy** me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰](https://github.com/chinanf-boy/live-need-money) 34 | 35 | 36 | ## 目录 37 | 38 | 39 | 40 | 41 | 42 | - [🐠孔雀鱼-Guppy](#%E5%AD%94%E9%9B%80%E9%B1%BC-guppy) 43 | - [React.js的友好应用程序管理器和任务运行器](#reactjs%E7%9A%84%E5%8F%8B%E5%A5%BD%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E7%AE%A1%E7%90%86%E5%99%A8%E5%92%8C%E4%BB%BB%E5%8A%A1%E8%BF%90%E8%A1%8C%E5%99%A8) 44 | - [当前状态](#%E5%BD%93%E5%89%8D%E7%8A%B6%E6%80%81) 45 | - [安装](#%E5%AE%89%E8%A3%85) 46 | - [入门](#%E5%85%A5%E9%97%A8) 47 | - [它是如何工作的](#%E5%AE%83%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84) 48 | - [未来愿景](#%E6%9C%AA%E6%9D%A5%E6%84%BF%E6%99%AF) 49 | 50 | 51 | 52 | --- 53 | 54 | # 🐠孔雀鱼-Guppy 55 | 56 | ### React.js的友好应用程序管理器和任务运行器 57 | 58 | ![Guppy project screen](https://github.com/joshwcomeau/guppy/raw/master/docs/images/main-image.png) 59 | 60 | React Web开发有很多"元"技能,与构建优秀的Web产品并没有任何关系. 61 | 62 | 例如,终端. 对于我们这些没有在 unix shell 上长大的人来说,终端是一个神秘而难以理解的命令. 它无疑是强大的,也是开发的宝贵技能......但是它真的应该成为现代网络开发的先决条件吗? 63 | 64 | Guppy是一款免费的桌面应用程序,旨在让您更轻松地开始构建 React Web 产品. 它为 React开发人员 面临的许多典型任务提供了友好的 GUI: 65 | 66 | - 创建新项目 67 | - 运行开发服务器 68 | - 执行任务 (构建生产,运行测试) 69 | - 管理依赖项 (添加,更新,搜索) 70 | 71 | Guppy是为 初学者 而设计的 - 刚开始使用 Web开发 的人. 我们希望它对于高级用户来说足够强大,但我们始终会优先考虑 新开发人员 的体验. 我们永远不会为Guppy收钱,它总是免费使用. 72 | 73 | > **注意**: 这是*超早期预发布alpha版本*. 说实话,它可能尚未准备好初学者使用 (可能有令人沮丧的错误,而且它只能在MacOS上运行) . 我们的目标是建立一个社区来为此工作,并为 初学者 创造真正有用和美妙的东西. 74 | 75 | ### 当前状态 76 | 77 | 这个项目是早期发布的Alpha版. 78 | 79 | 想帮助 萌新 创造一些美好的东西吗? 我们正在积极寻找贡献者,以帮助将这个预发行版开发成令人惊奇的东西. 这是一个参与并帮助塑造Guppy未来的好时机! 80 | 81 | 另外,需要注意的是: 这是一个在业余时间工作的副项目. 我们感谢任何错误报告,但实际上我们可能无法及时解决问题 (尽管可以随时提供修复!) 82 | 83 | ### 安装 84 | 85 | 现在,**Guppy仅适用于MacOS**. 我们希望尽快支持 Windows和Linux. 86 | 87 | 要使用 Guppy,首先需要安装一个现代版本的Node (一个Javascript运行时) . [下载节点](https://nodejs.org/en/download/current/). 由于 NPM 5.6.0中可能破坏依赖性的错误,建议使用"当前"版本而不是LTS. 88 | 89 | 安装Node后,即可[下载Guppy](https://github.com/joshwcomeau/guppy/releases/download/v0.0.1/Guppy-MacOS.zip) 90 | 91 | 双击下载的可执行文件以打开Guppy. 如果MacOS,抱怨这是从互联网上下载的事实,您可能需要右键单击并选择"打开". 92 | 93 | > 注意: 在将来的稳定版本中,我希望通过使用 Guppy包裹Node 来消除下载Node的需要 (参见[#44](https://github.com/joshwcomeau/guppy/issues/44)) . 我还计划创建一个合适的安装程序,以便将 Guppy 复制到 Applications文件夹 (参见[#26](https://github.com/joshwcomeau/guppy/issues/26)) . 欢迎捐款! 94 | 95 | ### 入门 96 | 97 | 详细了解如何在我们的网站中使用Guppy[入门指南](./docs/getting-started.md). 98 | 99 | ### 它是如何工作的 100 | 101 | Guppy是一个 `electron` 应用程序,在后台秘密运行终端命令. 它用 **create-react-app** 和 **gatsby-cli**. 可以想象为Next和其他项目类型 (包括非React项目) 添加支持 102 | 103 | Guppy为您添加了一个新的顶级密钥`package.json`存储与项目相关的信息. 它也读取`package.json`找出当前的依赖关系,看看哪些任务可用 (通过`scripts`) . 104 | 105 | Guppy拥有围绕 任务类型构建智能模块. 例如,开发服务器不是普通任务,它应该在整个项目工作期间运行,因此它在页面顶部给出了自己的模块. 106 | 107 | 有关了解更多关于 Guppy和贡献的更多信息,请参阅我们的[贡献文档](CONTRIBUTING.md) 108 | 109 | ### 未来愿景 110 | 111 | 现在,Guppy 的功能集非常有限. 它由3个模块组成: "开发服务器"窗格,"任务"窗格和"依赖关系"窗格. 112 | 113 | 我希望看到的第一个重大变化是更好地支持常见的开发工具,如 运行测试,linting,代码格式化 等等. 一些潜在改进的例子: 114 | 115 | - 测试不应该只是列表中的一个细行,它应该有自己的模块,就像 Dev Server 那样. 它应该以"交互"模式运行,并允许用户通过单击按钮重新运行测试. 116 | 117 | - 依赖模块 应该易于更新. 我想象一个"更新 核心 依赖项"按钮,它可以通过 built-in-codemod 支持更新 react,react-dom和任何相关的包. 我想它能够找到安全问题 (通过[`npm audit`](https://docs.npmjs.com/getting-started/running-a-security-audit)) . 118 | 119 | 我还希望看到 Guppy 在 教育用户关于 Web开发方面 变得更加有用. Guppy 的理念是 任何人都可以学习Web开发,它应该提供资源来帮助学习者. Guppy 可以完全访问 项目代码和设置,因此我想知道是否有机会,为用户遇到的问题提出解决方案......我还没有任何具体的想法,但考虑一下这很有意思. 120 | -------------------------------------------------------------------------------- /docs/getting-started.md: -------------------------------------------------------------------------------- 1 | 2 | # Guppy入门 3 | 4 | > Guppy是一个旨在完全取代终端的配套工具,因此新手可以在他们开始构建酷炫的东西之前不需要学习其他技能. 5 | > 6 | > 它目前处于预发布Alpha阶段,这意味着我们距离完全实现梦想还有很长的路要走. 您可能遇到错误,它可能与您现有的项目或操作系统不兼容. 7 | > 8 | > 对于遇到的任何麻烦,请提前道歉!欢迎捐款. 9 | 10 | ## 安装 11 | 12 | 安装说明书[自述](../readme.md#安装). 13 | 14 | ## 添加您的第一个项目 15 | 16 | 要创建第一个项目,请单击主界面底部的"Create a new web application". 17 | 18 | 该向导将指导您选择 名称,图标和项目类型. 19 | 20 | 如果您已经有一个项目要与 Guppy 一起使用,则可以选择导入现有项目. *请注意,此功能尚未经过严格测试!*它只适用于使用 Gatsby或create-react-app 创建的项目,在最坏的情况下,它可能会破坏您的项目的`package.json`文件. 为了安全起见,请确保使用源代码控制来管理项目,以便在出现任何问题时轻松重置项目. 21 | 22 | 有关项目创建过程的更多信息,请参阅我们的[添加项目](adding-a-project.md)文档. 23 | 24 | ## 管理您的项目 25 | 26 | 创建或导入项目后,您将看到项目界面. 管理项目所需的一切都存在于此页面上! 27 | 28 | 它分为3个模块: **开发服务器**,**任务**,和 **依赖**. 29 | 30 | ### 开发服务器 31 | 32 | 过去,Web开发 可以像 修改计算机上的"index.html"文件一样简单,然后在 Web浏览器中打开该文件以查看它的外观. 33 | 34 | 随着Web 从 简单的文档 转移到 复杂的应用程序,这一种可行的工作方式停止了. 35 | 36 | 今天的Web应用程序 丰富而动态,需要更复杂的设置. 37 | 38 | 解决方案是运行本地开发服务器. 它被称为服务器,因为它为您提供内容服务: 就像 Google有一个Web服务器 在 您访问 `google.com`时提供 一些HTML一样,您的本地开发服务器,将处理 检索和提供内容URL. 39 | 40 | 开发服务器 也在幕后进行大量其他工作 - 例如,他们在项目中 观察文件,当文件发生变化时,页面会自动刷新! 41 | 42 | 此外,在过去,您必须非常注意您的代码,因为代码将在许多不同的浏览器中运行. 每个浏览器都有自己的 Javascript引擎,具有自己的 怪癖和支持/不支持的语言 功能. 开发服务器会将您编写的代码,编译成所有常见浏览器都能理解的形式,因此它不是一个问题. 43 | 44 | 几年前,创建和管理本地开发环境是一个很大的麻烦. 如今,它比 oldschool-"打开index.html文件"方法更容易,并带来了许多额外的好处. 45 | 46 | 要打开开发服务器,请单击界面右上角的切换: 你会看到两件事情发生: 47 | 48 | ![Development server module](https://github.com/joshwcomeau/guppy/raw/master/docs/images/dev-server-toggle.png) 49 | 50 | - 左侧的"空闲-Idle"状态指示灯 切换为 "正在运行-running",指示灯变为绿色. 状态指示器是快速检查正在发生的事情的好方法: 因为它编译代码,它知道何时发生错误,并且可以提醒您事情,不能正常工作. 51 | 52 | - 右侧的蓝色框开始填充输出. 这往往是覆盖的的,因为它产生了许多通常 不是超级相关 的信息,但它还是包括 有关错误和警告 的有用信息. 53 | 54 | > 您看到的输出意味着显示在终端中,因此有时 这些信息与使用Guppy无关. 55 | 56 | > 例如,当 Gatsby项目 成功构建时,它表明您可以运行"gatsby build"来生成生产包. 在Guppy中,是下面 **任务-Tasks** 解决的 57 | 58 | > 在 Guppy 的未来版本中,我们希望在此空间的输出 策划为 更适合 初学者的输出. 59 | 60 | 首先,**这是您需要担心的唯一模块** 61 | 62 | 启动开发服务器后,可以随意选择 代码编辑器 并开始构建项目! 您可以稍后了解有关其他模块的更多信息. 63 | 64 | ### 任务 65 | 66 | 当你继续研究你的项目时,你会注意到有些事情需要做. 例如,一旦您的项目准备好上传并在互联网上提供,您就需要一种方法来创建所需的文件! 67 | 68 | 任务基于项目类型 (Vanilla React和Gatsby项目 的任务略有不同) . 69 | 70 | 每个任务都有自己的行,会告诉您: 71 | 72 | - 任务的名称（例如`build`） 73 | - 快速描述任务 74 | - 任务状态 75 | - 用于查看有关任务的更多信息的按钮 76 | - 用于启动（或中断）任务的切换 77 | 78 | 通过单击每个任务右侧的切换来运行任务: 79 | 80 | ![Development server module](https://github.com/joshwcomeau/guppy/raw/master/docs/images/task-row-toggle.png) 81 | 82 | 您还可以在"查看详细信息 - View Details" 面板中运行任务: 83 | 84 | 85 | ![Development server module](https://github.com/joshwcomeau/guppy/raw/master/docs/images/task-details-toggle.png) 86 | 87 | 当您打开任务时,状态将切换为"待定-pending". 88 | 89 | 如果您想知道它在做什么,可以单击"查看详细信息"以获得终端输出界面,就像开发服务器模块具有的那样. 90 | 91 | 任务完成后,状态将切换为"成功-success"或"错误-error",具体取决于任务是否遇到任何问题. 92 | 93 | "查看详细信息"按钮是了解有关任务可能失败的原因的绝佳方式. 94 | 95 | ### 依赖 96 | 97 | 作为Web开发人员,我们经常发现我们的项目,存在需要解决的相同问题. 98 | 99 | 例如,React没有内置的路由解决方案,如果我们都必须为我们开始的每个项目构建自己的路由解决方案,那将是非常繁琐的! 100 | 101 | 令人高兴的是,我们可以通过使用其他开发人员构建的解决方案来节省大量时间和精力. 102 | 103 | 在 javascript社区 中,这些解决方案被调用*包-packages*. 它们通过 Node包管理器 (NPM) 分发. 你的项目可以*依靠-depend*在包上,这将使您的代码中可以使用这些解决方案. 104 | 105 | 第三个模块允许您 添加,更新或删除 其他人编写的包. 106 | 107 | > 你会看到已经安装了一些. 这些是运行您选择的项目类型的关键`依赖项目-dependencies`,谨慎的做法是不尝试删除它们. 108 | 109 | 假设您已经意识到您的应用程序需要一个`滑块-slder`i组件,来选择一个值. 自己构建其中一个需要花费相当多的时间,因此查看社区中是否 已有一个可用 是 有意义的! 110 | 111 | 单击"添加新依赖关系-Add New Dependency"按钮以搜索新的依赖关系: 112 | 113 | ![Development server module](https://github.com/joshwcomeau/guppy/raw/master/docs/images/add-dep-button.png) 114 | 115 | 如果您搜索"React slider",您会看到一些选项: 116 | 117 | ![Development server module](https://github.com/joshwcomeau/guppy/raw/master/docs/images/search-deps.png) 118 | 119 | 您可以单击这些包的名称,以了解有关它们的更多信息,并确定它们是否可以解决您所需的问题. 您还可以使用搜索结果中包含的数据, 来决定: 120 | 121 | - 它有多少下载? 122 | 123 | 流行性 往往是更安全的赌注,因为有更多的人使用它们,可能更多的人帮助建立它们 124 | 125 | - 它上次更新了多长时间? 126 | 127 | 数月/年未维护包 不如 最近更新的包安全 128 | 129 | - 它提供什么软件许可证? 130 | 131 | 软件许可证详细说明了如何使用它. MIT许可证是黄金标准,可能值得忽略不使用它的解决方案. 132 | 133 | 如果单击每个搜索结果旁边的"添加到项目-Add to Project"按钮,该包将作为依赖项添加到项目中. 您将能够像 使用React相同的方式 在项目中使用它: 134 | 135 | ```js 136 | import React from 'react'; 137 | import Slider from 'rc-slider'; 138 | ``` 139 | 140 | > 在安装依赖项时,您将无法执行任何其他依赖项管理. 141 | > 这不应该花费超过几秒钟,但如果您有很多依赖项需要添加,它仍然有点糟糕. 我们正在努力简化这一过程. 142 | 143 | 在主模块中,您可以浏览已安装的依赖项列表. 144 | 145 | 如果依赖关系已过期,您可以单击"更新-Update"按钮将其更新为最新版本. 146 | 147 | 您可以删除危险区域中的依赖项 (🔥) . 148 | 149 | 您可以通过单击版本号旁边的"更新",在 1 次单击中将依赖项更新为其最新版本. 150 | 151 | > 目前无法降级依赖项或选择特定的依赖项. 这将在未来添加. 152 | 153 | > 目前,您需要使用终端来执行此操作. 154 | 155 | > 了解更多信息[npm docs](https://docs.npmjs.com/cli/install) 156 | 157 | ## 修改和删除项目 158 | 159 | 在未来的版本中,我们希望能够更轻松地调整项目配置. 目前,项目无法直接修改. 160 | 161 | 例如,如果要更改项目的名称,则必须通过修改项目来执行此操作 162 | 163 | 在您的代码编辑器中 (查找"guppy"下的部分,您可以在其中更改其 名称,图标或颜色) . 164 | 165 | 可以通过转到 编辑 ->删除项目{`Edit -> Delete Project`} 并确认提示,从 Guppy中删除项目.请注意,这实际上不会删除计算机上的代码,只是使 Guppy 不再是此工作的保管人. 166 | 167 | > 从guppy中删除项目, 不会删除其 package.json中的“guppy”字段。 您也可以自己删除它。 --------------------------------------------------------------------------------