NativeScript 预览

NativeScript CLI 中出现了一个新命令，它将改变您处理项目的方式。

在您的 NativeScript 项目中运行 tns preview 时，将会显示一个二维码。使用NativeScript 预览应用扫描二维码，您的应用将在NativeScript 预览应用中启动。

然后，每次您对项目进行更改时，应用都将自动更新并刷新。

我想要它，现在就想要 - 即设置

您可能在问自己
"我需要在我的机器上施展什么魔法才能实现这个功能？"

事实上，您不需要做太多事情。如果您的机器上安装了 Node，您可以在不到 5 分钟内完成设置。

NativeScript CLI

您需要安装NativeScript CLI 5.0 或更高版本。

npm install -g nativescript

配套应用

您还需要配套应用

• NativeScript Playground - 用于扫描二维码
  • App Store (iOS)
  • Google Play (Android)
• NativeScript 预览 - 用于显示您的应用
  • App Store (iOS)
  • Google Play (Android)

原生构建工具 - 不，谢谢

无需安装Android SDK或Xcode。安装它们也没有坏处（如果您决定进行完整构建），但您无需使用它们来预览您的应用。

是的，您没看错，tns preview 允许您在无需经过完整构建过程的情况下测试您的应用。

从 Windows 或 Linux 预览 iOS

更棒的是，您还可以从Windows或Linux机器上运行tns preview命令，并在iOS 设备上预览应用🤯。

它是如何工作的？

不深入太多细节。
NativeScript 预览应用充当一个容器应用，用于显示您的应用。

当您运行tns preview命令并扫描二维码时，会发生以下情况

1. NativeScript CLI 检查 npm 包，并在您使用不受支持的库或受支持库的不同版本时向您发出警告
2. CLI 检测您是从 Android 设备还是 iOS 设备扫描的代码 - 这很重要，这样 CLI 才能知道是提供.android文件还是.ios文件
3. CLI 使用您的代码和图像准备一个包，并将其发送到 NativeScript 预览应用
4. 预览应用接收包，并用打包的内容替换当前内容
5. 应用在预览应用中显示
6. CLI 将保持活动同步模式 - 意味着每次您保存对项目的更改时，更改都会被推送
   

请注意，在步骤 1-4 之间，预览应用将为空白，因为准备初始包需要一些时间。但是，后续的每次更新都应该快得多。

选项

您可以使用tns preview命令传递几个不同的标志。请注意，这两个标志目前都处于 Beta 阶段，因为这仍然是我们不断尝试改进的一项新功能。

Webpack --bundle

--bundle标志指定应使用Webpack打包器打包应用程序。

要在项目中使用 Webpack，您需要在项目中安装nativescript-dev-webpack。

热模块替换 --hmr

--hmr指定应使用热模块替换(HMR)。

HMR 使用 Webpack 来实现其功能，因此无需添加--bundle标志。

您可以从Stanimira 的博客了解更多关于 HMR 的信息。

代码共享项目

就我个人而言，预览工作流我最喜欢的优势之一是您可以将其用于代码共享项目。

如果您有一个基于 Schematics 的代码共享项目，您可以简单地运行ng serve来构建 Web 应用，并运行tns preview --bundle来构建移动应用。

您可以从我在angular.io 上的博文和NativeScript 文档中了解更多关于代码共享项目的信息。

您可以使用迁移后的 tour-of-heroes 项目自己尝试一下，网址：tour-of-heroes/finished

有什么限制吗？

就像世界上任何事物一样，预览命令也有一些限制。

由于预览命令跳过了构建原生应用的步骤，因此任何通常需要重新构建原生应用的操作都是其限制所在。

应用资源

应用资源在构建时编译到应用中。
放入App_Resources文件夹中的任何内容都无法在预览应用中使用。

插件

您可以添加任何不包含任何原生 iOS 或 Android 二进制文件的 npm 模块库，例如 moment.js。

您无法添加任何包含原生 iOS 和/或 Android 二进制文件的 npm 模块，因为这需要重新构建原生应用。

但是，NativeScript 预览应用预装了一些插件，包括所有 nativescript-ui-x 插件等等。

提示：要获取已包含插件的列表，请访问play.nativescript.org，按下二维码按钮，扫描二维码。然后转到设备选项卡，并展开您的设备。您可以在此处找到 npm 模块的完整列表。

Android 权限

在 Android 中，添加权限需要您对AndroidManifest.xml文件进行更改。为了使这些更改生效，您需要重新编译您的原生应用程序。这无法通过预览应用完成。

发布

要发布您的应用，您仍然需要安装Android SDK和Xcode，然后运行tns build。

或者，您可以使用NativeScript Sidekick在云端构建您的应用。是的，即使是来自 Windows/Linux 机器上的 iOS 应用。

仅限真实设备

NativeScript 预览应用仅在真实设备上可用，因为它需要从 App Store 或 Google Play 下载。
这意味着您无法将模拟器与预览工作流一起使用。

报告问题

请不要犹豫，分享您的反馈或报告您在使用此功能时遇到的任何问题，方法是在以下位置打开一个新问题：NativeScript CLI 存储库。

结语

预览工作流引入了一种全新的构建应用方式，并且改变了您使用 NativeScript 项目的方式。

您可以用多种方式将其用于自己的利益。
对我来说，tns preview非常适合我举办的研讨会。现在，我可以走进一个房间，里面坐满了 NativeScript 新手，15 分钟后，每个人都能启动并运行他们的第一个应用。这包括 10 分钟的 Wi-Fi 连接时间。

您打算如何使用预览工作流？

在下面的评论中分享您的反馈、想法和创意。