NativeScript 开发调试插件
此开发插件允许 NativeScript 插件作者使用预定义的工作流程,通过该工作流程可以开发并调试他们的 NS 插件的本地 iOS/Android 以及 TypeScript/JavaScript 封装源代码。此插件公开的主要 API 是通过 npm 脚本,这些脚本将被保存在你的插件源代码的 package.json 文件中。
npm i --save nativescript-dev-debugging

npm npm

NativeScript 开发调试插件

此开发插件允许 NativeScript 插件作者 使用 预定义的工作流程,通过该工作流程可以 开发调试 他们 NS 插件的本地 iOS/Android 以及 TypeScript/JavaScript 封装源代码。此插件公开的主要 API 通过 npm 脚本 实现,这些脚本将被保存在你的插件源代码的 package.json 文件中。

注意

  • 此 NS 开发插件已在 Mac 上开发,尚未在 Windows 上测试。
  • 使用插件的脚本将同时打开 Android Studio 和 XCode,请在执行脚本时注意这些应用程序将打开。

安装

要求

  • npm 6.4.1 或更高版本 (npm --version)
  • NativeScript 5.1.0 或更高版本 ($ tns --version)
  • Xcode 10.1 构建版本 10B61 ($ xcodebuild -version)
  • Android Studio 3.2.1 或更高版本 ($ mdls -name kMDItemVersion /Applications/Android\ Studio.app)
  • 你的插件的 Xcode 项目的构建方案必须与创建的框架名称相匹配(例如,创建 'TNSWidgets.framework' 的项目有一个名为 'TNSWidgets' 的方案)

你需要做的第一件事是安装插件

  • npm install nativescript-dev-debugging --save-dev
  • 在安装过程中,插件需要你提供有关源代码位置和相对信息的配置。这里有两种选项可供使用

全新配置

简单地安装软件包,然后按照提示操作,有两种选项,其中一种通过遵循 'plugin seed' 结构最小化所需输入,第二种是完全手动配置,如果你没有遵循 NativeScript 插件 seed 结构,则建议使用。

或者

使用 n.debug.config.json 文件进行配置

你可以在下方的 "配置文件" 部分查看有关配置文件所需内容的详细信息。要在安装软件包时使用 n.debug.config.json 文件,只需在你的插件源代码的根目录(其中包含 package.json 文件)中创建一个名为 n.debug.config.json 的文件,然后按正常方式安装软件包。

手动配置

建议用于未以 NativeScript 插件 seed 作为起点的插件。安装后脚本将询问以下插件结构配置设置

  • 包含你的插件 TypeScript/JavaScript 和 package.json 的文件夹的 "路径"
  • 包含你的插件 'platforms' 内容('android' 和 'ios' 文件夹)的文件夹的 "路径"
  • 包含 Xcode 项目的原生 iOS 源代码的 "路径",该项目的 iOS 框架是你插件的 iOS 框架
  • 你的插件 iOS 框架的名称
  • 包含 Android Studio 项目的原生 Android 源代码的 "路径",该项目的 Android 库是你插件的 Android 库
  • 你的插件 Android 库的名称
  • 存放用于演示您插件的原生脚本 NativeScript Vanilla 应用的文件夹的“路径”
  • 存放用于演示您插件的原生脚本 NativeScript + Angular 应用的文件夹的“路径”(可选)
  • 用于上述 NativeScript 应用的 Apple 配置文件(可选)

“插件种子”友好的配置

推荐用于那些以 使用 NativeScript 插件种子 为起点的插件。安装后脚本将询问您插件的以下结构配置设置

安装后脚本将询问您插件的以下结构配置设置

  • 包含你的插件 TypeScript/JavaScript 和 package.json 的文件夹的 "路径"
  • 你的插件 iOS 框架的名称
  • 你的插件 Android 库的名称
  • 用于上述 NativeScript 应用的 Apple 配置文件(可选)

配置文件

在上述配置阶段中的任何一个之后,您输入的配置参数将被写入到本地的一个配置 JSON 文件中,名为 n.debug.config.json。您可以在根目录(您的 {N} 插件源代码的 package.json 所在位置)手动创建此文件并预先配置它,以便在运行 npm postinstall 脚本时跳过 nativescript-dev-debugging 插件配置阶段。以下是所有必需的配置键/值对

{
"pluginSrcFolder": "/Users/USER/plugin_repo/src",
"pluginPlatformFolder": "/Users/USER/plugin_repo/src/platforms",
"pluginIosSrcFolder": "/Users/USER/plugin_repo/src-native/ios",
"iosLibraryName": "LibraryName",
"pluginAndroidSrcFolder": "/Users/USER/plugin_repo/src-native/android",
"androidLibraryName": "LibraryName",
"demoFolder": "/Users/USER/plugin_repo/demo",
"demoAngularFolder": "/Users/USER/plugin_repo/demo-angular",
"demoVueFolder": "/Users/USER/plugin_repo/demo-vue",
"provisioningProfile": "TestProfile"
}

注意:如果您手动修改了上述 n.debug.config.json 文件,您需要通过执行 npm run nd.config 命令来“重新配置” nativescript-dev-debugging 插件。

内置 'workflows' 的使用

此开发插件的公开 API 是通过使用 npm 脚本。在安装和配置步骤之后,您的插件的 package.json 将被修改,添加脚本、监视器和一些开发依赖项。您应该保留所有这些并不要手动更改它们,以确保 nativescript-dev-debugging 的功能按预期工作。如果您想重新配置插件,只需执行 npm run nd.config

启动 'workflow'

为了启动一个 'workflow',您可以使用单独的 npm 脚本,如 npm run nd.demo.ios.devicenpm run nd.demo.android,或者使用 '交互式脚本命令' nd.run。如果您不知道要启动哪个 workflow,最好使用 npm run nd.run 并遵循提示。

有关此插件的内置功能详情,请执行 npm run nd.help

预期的 workflows 示例

以下所有示例在 iOS 和 Android 之间是相同的,为了简化,我将使用 iOS 进行说明。

用于:观察/调试原生代码的 workflow

  • 运行 npm run nd.run
  • 选择 demo
  • 选择 ios
  • 选择 attach

在这个 workflow(demo ios attach)中,以下会发生:

  • 插件的本地源代码将以调试模式构建,Xcode 将打开这些源代码,NativeScript 应用将被构建和部署(实际上这是 tns run ios 的工作方式)。此 workflow 在您只想观察/调试原生 iOS 源代码而不希望对其进行更改时非常有用,如果需要进行更改(您想修复/开发插件的本地代码),您可以使用下一个 workflow。

用于:“更改/开发并调试原生代码”的 workflow

  • 运行 npm run nd.run
  • 选择 demo
  • 选择 ios
  • 选择 attach & watch

在这个 workflow(demo ios attach & watch)中,以下会发生:

  • 插件的本地源代码将以调试模式构建,Xcode 将打开这些源代码,NativeScript 应用将被构建和部署,并且一个文件监视器将启动在您的插件的原生 iOS 源代码上(通过使用 pluginIosSrcFolder 路径)。此 workflow 在您想同时观察/调试原生 iOS 源代码并对其进行更改以修复/开发问题或新功能时非常有用。

故障排除

由于 nativescript-dev-debugging 插件的特性和它使用多个第三方解决方案来提供工作流程(xcode 构建、gradle、NativeScript CLI 等)的方式,在某些特定的环境配置下,可能会出现一些问题。虽然该插件通常会启动并管理使用这些第三方解决方案的过程,但如果发生错误,控制台输出将是这些解决方案的原始输出,这应该有助于确定错误的原因,但在某些情况下,插件代码可能导致异常行为。当使用 npm run nd.run 命令时,你可以传递一个 log 参数来查看关于执行过程及其状态(如何/为什么文件监视器正在执行)的额外信息,只需运行 npm run nd.run log

贡献

为了在本地测试节点包

  • 打开应用文件夹 cd app
  • 运行 npm i
  • 运行 npm run nd.install - 将执行包的 postinstall 脚本,就像它是第一次在应用文件夹中安装一样