Nx 工作空间的跨平台（xplat）工具

xplat 是 Nx 的增值包，为不同的平台/框架组合提供额外的应用程序生成器和可选的辅助架构。

当前支持的平台

Electron

使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序。
Ionic

在单个代码库中，使用 Web 构建任何平台上的出色应用程序。
NativeScript

直接从 JavaScript 访问原生 API，构建丰富的 iOS 和 Android 应用程序。

快速入门

npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose "None"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose "Integrated"

? Package-based or integrated? … 
Integrated:    Nx creates a workspace structure most suitable for building apps.

初始化工作区

安装 @nx/js 插件。

npm install @nx/js -D

现在初始化 -- 这将确保创建一个 tsconfig.base.json 以开始构建您的工作区。

npx nx g @nx/js:init

安装工具

npm install @nstudio/xplat -D

现在您已准备好创建应用程序

npx nx g @nstudio/xplat:app

潜在的模式错误：如果您遇到 SchematicNameCollisionException 问题，您可以查看此 gist 以应用补丁：https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

应用程序生成示例

可以使用以下方式使用附加的应用程序生成器

Electron

Electron 应用程序生成器可以使用工作区中的任何 Web 应用程序作为其目标。

如果您还没有 Web 应用程序，请先创建一个

npx nx g @nstudio/xplat:app sample

选择 web

现在您可以使用 Web 应用程序作为 Electron 目标

npx nx g @nstudio/xplat:app desktop --target=web-sample

选择 electron

开发方式

npm run start.electron.desktop

Ionic

npx nx g @nstudio/xplat:app sample

选择 ionic

使用浏览器进行开发

npx nx serve ionic-sample

构建 Ionic 应用

npx nx build ionic-sample

A. Capacitor iOS - 准备开发

npm run prepare.ionic.sample.ios

现在您可以在 Xcode 中打开以进行进一步开发

npm run open.ionic.sample.ios

B. Capacitor Android - 准备开发

npm run prepare.ionic.sample.android

现在您可以在 Android Studio 中打开以进行进一步开发

npm run open.ionic.sample.android

NativeScript

nx g @nstudio/xplat:app mobile

选择 nativescript

A. iOS

npx nx run nativescript-mobile:ios

B. Android

npx nx run nativescript-mobile:android

文档

演讲

由 Nathan Walker 和 Jeff Whelpley 的《功能强大，服务器端渲染的渐进式原生应用程序》
ngAir 172 - 与 Nathan Walker 一起使用 Nx 工作空间的 xplat（跨平台）工具

不同场景的示例仓库

Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing

上下文

为什么很难决定技术 by Adam Klein