淘系自研前端环境管理工具 AppToolkit 正式发布

简介: AppToolkit提供可视化配置环节的能力,屏蔽环节配置的复杂度和命令行的而学习成本,帮助开发者简单快速搭建前端开发环境。

前端社区日渐繁荣的同时,前端环境也日渐复杂。一般来说,开发前端应用前需要安装 Git、Node.js、Google Chrome、Visiual Studio Code 等软件工具,并且有大量繁琐的环境配置。虽然社区上有类似的工具(如:chocolatey、homebrew 等)解决环境安装、配置和管理难的问题,但这部分工具往往需要开发者接触大量的命令行操作,对于刚入门编程的开发者来说,还是有一定的学习成本的。


基于此背景,我们推出一款基于 Electron 的桌面客户端——AppToolkit[1]。AppToolkit 提供可视化配置环境的能力,屏蔽环境配置的复杂度和命令行的学习成本,帮助开发者简单快速搭建前端开发环境。


微信图片_20211119172107.jpg


经过近3个月的开发迭代,AppToolkit[2]正式对外发布,欢迎大家体验。


mac 版下载地址[3]


下面将会介绍 AppToolkit 有哪些能力,以及如何使用这些能力解决这些问题。


更快速、更简单配置前端环境


AppToolkit 提供一键快速安装开发必备软件工具,包括 Git、Node.js、Google Chrome、VS Code、基于 VS Code 插件的 AppWorks 研发工具集以及包管理工具 tnpm/cnpm,帮助开发者快速搭建基本前端开发环境。


微信图片_20211119172217.gif现在你可以打开 Visual Studio Code 编辑器,配合 AppWorks[4],开始前端开发之旅啦!


精选的开发工具,带来更高开发效率


我们精选了常见且好用的前端开发工具,开发工具类别包括但不限定于浏览器、IDE、网络代理工具、接口调试工具、DevTools 等,在 AppToolkit 中可一键快速安装工具,大大减少查找和安装工具的时间。


微信图片_20211119172355.gif


可视化的 Node 管理


当某些 npm 模块因为本地的 Node.js 版本过低不能运行,或者想体验新版本 Node.js 的新特性,你可能需要把原来的 Node.js 卸载,然后下载新版本的 Node.js 并安装。在AppToolkit 中,支持一键安装或切换其他 Node.js 版本,让整个过程变得轻松简单。


微信图片_20211119172540.gif


对于切换到其他版本的 Node.js 后原来的全局依赖不可用的问题,AppToolkit 可一键配置统一的全局依赖安装路径,避免多次重复安装全局依赖。


另外,AppToolkit 提供全局 npm 镜像源管理,帮助开发者快速切换镜像源;支持可视化管理全局 npm 依赖,可快速查找、安装、升级和卸载依赖。


微信图片_20211119172611.jpg

更快速、更安全的 Git 管理


在过去,修改 Git 配置需要接触大量的命令行操作,对于刚入门编程的开发者来说学习门槛较高。AppToolkit 提供可视化的方式,帮助开发者更简单更快速管理全局 Git 配置。


微信图片_20211119172658.gif


多Git 账号管理最佳实践


作为专业前端开发,相信大家的都会有多 Git 账号开发的场景。比如:


  • 开发开源的项目,需用到 GitHub 账号;
  • 开发公司内部项目,需用到 GitLab ,Gitee 等账号;
  • ...


多 Git 账号切换十分繁琐,同时容易出现 Git 账号混用的情况,让很多开发者头痛不已。为此我们提供了非常便捷的最佳实践,并在阿里淘系前端团队中广受好评。


微信图片_20211119172755.jpg


假设现在在 GitHub 和 Gitee 中开发项目,在 workspace 目录下有 gitub-projectsgitee-projects 两个目录用于存放 Git 项目。在 AppToolkit 中可快速新增对应 Git 配置,同时会自动为每份 Git 配置生成一份 SSH 密钥。添加 SSH 公钥到对应的代码托管平台后,便可 git clone 对应项目至对应目录下。之后的 Git 相关操作无需关注 Git 账号信息,Git 账号混用的问题也不会出现。


最后


AppToolkit 将持续重视用户体验,做开发者喜欢的前端环境管理工具。如果使用过程中有任何疑问或问题,请加入用户钉钉群或者提 issues[5],我们将第一时间为你答疑:


1637314176(1).png

相关文章
|
3月前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
197 4
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
929 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
2月前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
108 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
1月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
122 26
|
2月前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
162 4
|
3月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
89 8
|
3月前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
228 3
|
3月前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
81 4
|
3月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
608 1
|
3月前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
59 2

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75