Generator-M-Ionic - JS 疲劳以及向 TypeScript、Angular 2 和 Ionic 2 的过渡

这是一篇由 Jonathan Grupp 撰写的客座文章

Generator-M-Ionic 是一个开源的先进工作流程集合,用于使用 Ionic 构建跨平台 HTML5 移动应用。本文简要介绍了生成器功能,并为希望使用它的用户提供了更详细的资源。

随着我们向下一代技术栈(TypeScript、Angular 2 和 Ionic 2)过渡,我们试图克服 JS 疲劳 和 JS 工具疲劳,并使不同工具的开发更加紧密。您可以通过加入讨论来帮助我们!

Generator-M-Ionic 用于什么?

用于构建坚如磐石的 Ionic 应用的先进工作流程:使用 Yeoman、Gulp、Bower、Angular、Cordova 以及 Ionic 开发、原型设计、测试、构建和交付高质量的应用。所有这些都集成在一个漂亮的生成器中。

Generator-M-Ionic 的根源可以追溯到两年前,当时我和我在 M-Way Solutions 的团队 (@gruppjo) 决定在 2014 年初 将我们的 HTML5 移动应用开发栈迁移到 Angular 和 Ionic。从那时起,Generator-M-Ionic 已发展成为一个功能齐全的开发工具集合,用于使用 CordovaAngularIonic 构建大型企业应用。

Generator-M-Ionic 基于 Yeoman 生态系统 构建,并结合了 GulpBowernpm,它提供高效的工作流程,通过将复杂的技术栈连接在一起,并为使用 Cordova、Angular 和 Ionic 进行专业跨平台 HTML5 应用开发的所有重要方面提供工作流程,从而帮助用户从头到尾构建应用。

Generator-M-Ionic technology stack

以下是 Generator-M-Ionic 功能的简要概述

代码生成

开发工作流程

  • gulp watch 自动连接前端栈,包括 Angular、Ionic 和所有其他 bower 组件、样式表、您自己的 Angular 和 Ionic 组件以及您的应用,并监视更改
  • gulp --livereload "run ios" 使用 Browsersync 为您的设备构建应用,并在您的开发机器上监视更改
  • … 在我们的 开发简介 中发现更多有用的工作流程

代码质量

  • ESLint 以及其他 JSONLint 与所有重要的开发任务一起运行
  • gulp karmagulp protractor 得益于开箱即用的 测试工作流程
  • 这些与 Husky 很好地集成到持续集成、预提交和其他钩子中

持续集成

除了我们的 CI 就绪构建和测试工作流程外,将 构建变量 注入到您的构建和其他 CI 功能 中,可以补充使用 Generator-M-Ionic 进行成功的持续集成设置。

高级工作流程

处理 CORS 和代理 问题,管理不同的 应用图标和启动画面 集,处理不同的 API 端点以及使用 环境 等其他事项,以及更多内容,都是我们指南的 高级工作流程部分 的内容。

生态系统

创建后端、推送服务、用户管理、构建基础设施等可能很困难。幸运的是,有一些生态系统,例如 Ionic 平台,以及我们自己的面向企业的 Relution,您的 Generator-M-Ionic 项目可以很好地集成到其中。阅读更多

如果这还不够

… 请查看我们的 GitHub 代码库 以获取完整文档!

此外,我们最近很荣幸地在 Ionic 博客 上发布了关于 Generator-M-Ionic 的完整博客系列。您可以尝试一下,以更类似教程的方式了解 Generator-M-Ionic 的全部价值

我们很乐意听到您的反馈!

过渡

随着 Angular 2 候选版本 和 Ionic 2 测试版 现在几乎每周都在发布 我们正在准备以合理和明智的方式进行过渡

Angular 2 Ionic 2

Angular 1 和 Ionic 1 生态系统非常庞大,许多公司(例如我们自己)或使用我们生成器的组织都拥有大量使用此栈编写的应用和资产。因此,在市场大部分用户完成过渡之前,Angular 1/Ionic 1 栈将在未来很长一段时间内继续发挥重要作用。

因此,为我们提供能够利用这些资产和应用而不是使它们变得无用的工具尤其重要。实现平滑过渡,而不是盲目地冲向新的栈。

为此,我们需要您的帮助。

激发讨论

如果您喜欢我们生成器中的内容,您可以帮助我们找出我们所有人将来如何构建 Ionic 2 应用。关于整个 Angular 2/Ionic 2 栈,有很多开放性问题和很多争议。是使用 Browserify 还是 Webpack,是使用 ES6/7 还是 TypeScript,是使用 CLI 还是 Yeoman?

有很多选择会导致 JS 疲劳,从工具的角度来看,情况也并非如此。

Angular 创建者提供了一个 Angular 2 CLI 原型,Ionic 创建者提供了一个 Ionic 2 CLI。不幸的是,这两个工具或多或少都是封闭系统,这极大地增加了在其基础上构建以满足您自己需求的难度。目前,将 Ionic、Cordova、适当的端到端和单元 测试工作流程代码风格检查环境构建变量 以及我们的许多其他功能集成到这些工具中的任何一个,都需要花费大量时间,并且在某些情况下是不可能的,除非进行分叉并进行大量修改。

我个人对 FountainJS 生成器的灵活性非常感兴趣,它是著名的 generator-gulp-angular 的下一代版本,两者均由 @zckrs@Swiip 创建。我希望我们能够在其架构之上进行构建。依靠 Yeoman 架构可以为他们的项目和我们的项目带来极大的灵活性和可扩展性。不幸的是,Angular 2 CLI 和 Ionic 2 CLI 没有使用 Yeoman,也没有提供在其功能之上进行构建的简单方法。事实上,这与我们在 Angular 1 和 Ionic 1 中遇到的问题完全相同,也是 我们最初开始构建生成器的原因

保持联系

您可以通过加入讨论来提供帮助,告诉我们您喜欢 Generator-M-Ionic、Angular 2 CLI 和 Ionic 2 CLI 的哪些功能,并希望我们能够使所有这些工具的开发更加紧密,消除一些决策疲劳,并为我们所有人带来更好的工具。

您可以从在 我们代码库中的此问题 上发表评论开始,或者深入了解 Yeoman 代码库 yeoman repo、Angular-cli 代码库 angular-cli repo 或 Ionic-cli 代码库 ionic-cli repo 中的相关讨论。

让我们知道您的想法,并帮助我们为下一代 HTML5 移动应用开发构建更好的工具!

对于其他所有内容,我们的 GitHub 代码库Gitter 频道 是您的最佳选择!


« 查看更多帖子