商城
作者 NativeScript.org
@nativescript/nx
由 NativeScript 团队贡献 | v19.0.0
Nx 的 NativeScript 插件
npm i --save @nativescript/nx

Nx 的 NativeScript 插件

License NPM Version

至少需要 NativeScript CLI v8.x.x 或更高版本。您可以通过运行 ns -v 来确认您的 CLI 版本。

目录

入门

创建新的 Nx 工作区

# Using npm
npx create-nx-workspace@latest

# Using yarn
yarn create-nx-workspace@latest

在提示时，您可以使用

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

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

? Package-based monorepo, integrated monorepo, or standalone project?
Integrated Monorepo:        Nx creates a monorepo that contains multiple projects.
# Choose "Integrated"

? Do you want Nx Cloud to make your CI fast? 
# Choice is completely up to you

初始化工作区

初始化 TypeScript 项目 -- 这将确保创建一个 tsconfig.base.json 以开始构建工作区。

npx nx g @nx/js:init

安装 NativeScript 插件

# Using npm
npm install --save-dev @nativescript/nx

# Using yarn
yarn add -D @nativescript/nx

注意：如果遇到关于 peer 依赖项的警告，您可以忽略。 例如

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @swc-node/[email protected]
npm WARN Found: @swc/[email protected]
npm WARN node_modules/@swc/core
npm WARN   peer @swc/core@">= 1.3" from @swc-node/[email protected]

创建应用程序

# Using npm
npx nx g @nativescript/nx:app <app-name> [...options]

# Using yarn
yarn nx g @nativescript/nx:app <app-name> [...options]

这将生成

apps/nativescript-<app-name>

NativeScript Nx 插件默认会对应用程序进行前缀处理，以帮助区分工作区中的其他应用程序，从而提高清晰度。

--framework [angular|vanilla]

省略此标志时，您将被提示选择一个框架。

使用此选项明确选择特定的前端框架集成应用程序。

此设置将在第一次使用时与插件设置一起保存，以便自动选择后续使用和具有其他生成器的前端框架集成，而无需再次指定标志。

--groupByName

如果您愿意，也可以提供一个后缀标志

npx nx g @nativescript/nx:app <app-name> --groupByName

这将生成

apps/<app-name>-nativescript

在模拟器和设备上开发

Android

npx nx run <app-name>:android

iOS: (仅限 Mac)

npx nx run <app-name>:ios

配置选项

通过 @nativescript/nx:build 提供自定义执行器，具有以下选项

"debug": {
  "type": "boolean",
  "default": true,
  "description": "Use 'ns debug' instead of 'ns run'. Defaults to true"
},
"device": {
  "type": "string",
  "description": "Device identifier to run app on.",
  "alias": "d"
},
"emulator": {
  "type": "boolean",
  "default": false,
  "description": "Explicitly run with an emulator or simulator"
},
"noHmr": {
  "type": "boolean",
  "default": false,
  "description": "Disable HMR"
},
"uglify": {
  "type": "boolean",
  "default": false,
  "description": "Enable uglify during the webpack build"
},
"verbose": {
  "type": "boolean",
  "default": false,
  "description": "Enable verbose logging"
},
"release": {
  "type": "boolean",
  "default": false,
  "description": "Enable release mode during build using the --release flag"
},
"forDevice": {
  "type": "boolean",
  "default": false,
  "description": "Build in device mode using the --for-device flag"
},
"production": {
  "type": "boolean",
  "default": false,
  "description": "Build in production mode using the --env.production flag"
},
"copyTo": {
  "type": "string",
  "description": "When building, copy the package to this location."
},
"provision": {
  "type": "string",
  "description": "(iOS Only) When building, use this provision profile name."
},
"aab": {
  "type": "boolean",
  "default": false,
  "description": "(Android Only) When building, create an Android App Bundle (.aab file)."
},
"keyStorePath": {
  "type": "string",
  "description": "(Android Only) When building, use the keystore file at this location."
},
"keyStorePassword": {
  "type": "string",
  "description": "(Android Only) When building, use this keystore password."
},
"keyStoreAlias": {
  "type": "string",
  "description": "(Android Only) When building, use this keystore alias."
},
"keyStoreAliasPassword": {
  "type": "string",
  "description": "(Android Only) When building, use this keystore alias password."
}

这些选项遵循 NativeScript 命令行选项标志。

以下是一个示例应用程序配置

"nativescript-mobile": {
  "projectType": "application",
  "sourceRoot": "apps/nativescript-mobile/src",
  "prefix": "",
  "targets": {
    "build": {
      "executor": "@nativescript/nx:build",
      "options": {
        "noHmr": true,
        "production": true,
        "uglify": true,
        "release": true,
        "forDevice": true
      },
      "configurations": {
        "prod": {
          "fileReplacements": [
            {
              "replace": "./src/environments/environment.ts",
              "with": "./src/environments/environment.prod.ts"
            }
          ]
        }
      }
    },
    "ios": {
      "executor": "@nativescript/nx:build",
      "options": {
        "platform": "ios"
      },
      "configurations": {
        "build": {
          "provision": "AppStore Profile",
          "copyTo": "./dist/build.ipa"
        },
        "prod": {
          "combineWithConfig": "build:prod"
        }
      }
    },
    "android": {
      "executor": "@nativescript/nx:build",
      "options": {
        "platform": "android"
      },
      "configurations": {
        "build": {
          "aab": true,
          "keyStorePath": "./tools/keystore.jks",
          "keyStorePassword": "your-password",
          "keyStoreAlias": "keystore-alias",
          "keyStoreAliasPassword": "keystore-alias-password",
          "copyTo": "./dist/build.aab"
        },
        "prod": {
          "combineWithConfig": "build:prod"
        }
      }
    },
    "test": {
      "executor": "@nativescript/nx:test",
      "outputs": ["coverage/apps/nativescript-mobile"],
      "options": {
        "coverage": false
      },
      "configurations": {
        "android": {},
        "ios": {}
      }
    },
    "clean": {
      "executor": "@nativescript/nx:build",
      "options": {
        "clean": true
      }
    }
  }
}

使用特定配置运行

Android

npx nx run <app-name>:android:prod

iOS: (仅限 Mac)

npx nx run <app-name>:ios:prod

运行测试

Android

npx nx run <app-name>:test:android

iOS: (仅限 Mac)

npx nx run <app-name>:test:ios

您可以通过使用 iOS 或 Android 等标志生成覆盖率报告，例如

npx nx run <app-name>:test:ios --coverage

您也可以在配置中设置此选项，例如

"test": {
  "executor": "@nativescript/nx:test",
  "outputs": ["coverage/apps/nativescript-mobile"],
  "options": {
    "coverage": true // can set to always be on for both platforms
  },
  "configurations": {
    "android": {
      "coverage": false // or can override per platform if needed
    },
    "ios": {
      "coverage": true
    }
  }
}

创建构建

除了在模拟器或设备上运行应用程序外，您还可以创建构建以用于分发/发布。iOS 和 Android 需要各种发布设置，这些设置可以作为额外的命令行参数传递。 有关更多信息，请参阅 NativeScript 文档。任何额外的 cli 标志，如文档所述，都可以传递到随后的 nx build 命令的末尾。

启用环境配置的构建（例如，使用 prod）

Android

npx nx run <app-name>:build:prod --platform=android

您可以在构建命令的末尾作为标志传递额外的 NativeScript CLI 选项。

  • 构建 AAB 包以上传到 Google Play 的示例
npx nx run <app-name>:build:prod --platform=android \
  --aab \
  --key-store-path=<path-to-your-keystore> \
  --key-store-password=<your-key-store-password> \
  --key-store-alias=<your-alias-name> \
  --key-store-alias-password=<your-alias-password> \
  --copyTo=./dist/build.aab

iOS: (仅限 Mac)

npx nx run <app-name>:build:prod --platform=ios

如前所述，您可以将任何额外的 NativeScript CLI 选项作为标志传递到您的 nx build 命令的末尾

  • 构建 IPA 以上传到 iOS TestFlight 的示例
npx nx run <app-name>:build:prod --platform=ios \
  --provision <provisioning-profile-name> \
  --copy-to ./dist/build.ipa

清理

有时清理应用程序会有所帮助。这将清除旧依赖项以及 iOS/Android 平台文件，为您的应用程序提供良好的重置。

npx nx run <app-name>:clean

创建 NativeScript 库

您可以创建一个 NativeScript 组件、插件或任何您想要的库。

npx nx g @nativescript/nx:library buttons

这将生成一个nativescript-buttons库，您可以在其中构建出适用于您的NativeScript应用的完整按钮行为和样式套件。

import { PrimaryButton } from '@myorg/nativescript-buttons';

NativeScript Nx插件默认会为库添加前缀，以帮助区分您工作区中的其他应用和库，提高清晰度。

--groupByName

如果您愿意，也可以提供一个后缀标志

npx nx g @nativescript/nx:library buttons --groupByName

这将生成一个buttons-nativescript库。

import { PrimaryButton } from '@myorg/buttons-nativescript';

使用 NativeScript 插件

NativeScript插件可以在Nx工作区中以以下两种方法之一使用

在应用程序级别安装 NativeScript 插件

如果插件仅需要一个应用，而不是其他应用，您可以为此特定应用安装它

cd apps/<app-name>
npm install <plugin-name>

在工作区级别安装 NativeScript 插件

或者，您可以在工作区（根目录）中安装插件，这样它就可以供您所有工作区应用访问

npm install --save <plugin-name>

已知问题

如果插件包含带有本地包含的平台文件夹，则必须在此时将该插件添加到应用的package.json中。https://github.com/NativeScript/nx/issues/17#issuecomment-841680719