如何将现有的NativeScript应用程序迁移到Web应用程序-代码拆分

Question

在official documentation中，仅提供了有关如何将Web应用程序迁移到NativeScript的示例，但我想将现有的NativeScript迁移到Web应用程序。

我在互联网上的任何地方都找不到解决方案。甚至有可能以相反的方式或仅从WEB到NativeScript做到这一点？

我试图在NativeScript项目中执行相同的过程，但是我无法使用任何@angular/cli命令。

Answer 1

对于先前的仅移动设备{NS}项目，我做了同样的事情。最初，这并不是一帆风顺的事情，但是一旦您解决了，在Web和移动设备上使用相同的代码库将非常节省时间。以下是根据我的经验建议的步骤。

1. 您应该使用@ angular / cli @ 6.1.0或更高版本。 npm i -g @angular/cli
2. 安装nativescript-schematics。 npm i -g @nativescript/schematics
3. 创建一个新项目。 ng new --collection=@nativescript/schematics my-mobile-app（我是通过这种方式完成的，然后从移动应用复制到src / app文件夹中）。
4. 从现有项目复制app / src文件夹。 （您可能要在nsconfig.json "appPath": "app"中查找源文件夹）
5. 在使用移动设备特定组件的地方找到.ts文件，并为它们创建一个wrapper class。例如。我在移动应用中使用Fancy Alerts，所以我创建了一个包装助手类，例如helper.tns.ts和helper.ts

在helper.ts

public show() {
    alert('Javascript+HTML alert')  .
  }

在helper.tns.ts

中

public show() {
    TNSFancyAlert.showWarning('Warning!', 'Message', `Ok`, 0, 300).then(() => {
         resolve('Success');
    });  
  }

1. 将所有.html重命名为.tns.html并创建特定于Web的html文件。

构建网络应用

ng serve

构建移动应用

tns run android --bundle
tns run ios --bundle

P.S。 --bundle是仅编译移动专用文件的关键。 Web和移动应用程序之间定义组件视图的HTML代码应该不同。