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

上下文

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