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

文档

演讲

不同场景的示例仓库

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

背景

由 Adam Klein 撰写的为什么选择技术很困难