npm 脚本
,这些脚本将被保存在你的插件源代码的 package.json 文件中。- 版本:2.0.2
- GitHub: https://github.com/NativeScript/nativescript-dev-debugging
- NPM: https://npmjs.net.cn/package/nativescript-dev-debugging
- 下载量
- 昨天:1
- 上周:2
- 上个月:14
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.device
和 npm 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 脚本,就像它是第一次在应用文件夹中安装一样