Question

Can I use IsDebugMode to switch out import libraries?

Can I do:

if (IsDebugMode) {
    import { SQLiteMock, SQLiteObject } from '../mocks/SQLiteMock';
}
else {
    import { SQLite, SQLiteDatabaseConfig, SQLiteObject } from '@ionic-native/sqlite';
}

Answer 1

不，遗憾的是，您无法有条件地导入库。你可以做的是导入两个库，在你的构造函数和然后中有条件地使用isDevMode()，（没有isDebugMode（））你可以使用你喜欢的每种情况。

这不是一个非常好的解决方案，因为这意味着你将在内存中加载两个库，并且因为你在构造函数中注入它们，在构建时发生的树干不会忽略它们。

如果这样做很少，它甚至可能没有区别（负面）。我建议您使用开发工具在运行时对内存大小进行基准测试，如果有明显的增益超过了清洁方法的手动性质，那么只需在使用该模拟开发功能时替换导入中的Mock类。

Answer 2

即使某些插件在浏览器上运行应用程序时可能会起作用（使用ionic serve时），我也想注入该插件的模拟版本，以避免在控制台中出现警告（或者因为找不到cordova.js）。

我发现这样做的最简单方法是使用工厂来决定应该注入哪个插件实现。我将使用Keyboard cordova插件向您展示一个演示，以保持简短，但任何cordova插件都可以使用（即使它不是Ionic Native的一部分）。< / p>

在我的providers文件夹中，我有一个名为plugins的自定义文件夹，在该文件夹中，我添加了一个名为keyboard.provider.ts的文件。在该文件中，我已经定义了以下内容：

// Ionic
import { Platform } from 'ionic-angular';

// RxJS
import { Observable } from 'rxjs/Observable';

// Ionic native
import { Keyboard } from '@ionic-native/keyboard';

// Browser implementation
export class BrowserKeyboardProvider extends Keyboard {

    public hideKeyboardAccessoryBar(hide: boolean): void {
        console.log(`[Keyboard Browser]: hideKeyboardAccessoryBar set to ${hide}`);
    }

    public show(): void {
        console.log(`[Keyboard Browser]: show`);
    }

    public close(): void {
        console.log(`[Keyboard Browser]: close`);
    }

    public disableScroll(disable: boolean): void {
        console.log(`[Keyboard Browser]: disableScroll set to ${disable}`);
    }

    public onKeyboardShow(): Observable<any> {
        console.log(`[Keyboard Browser]: onKeyboardShow`);
        return Observable.of(true);
    }

    public onKeyboardHide(): Observable<any> {
        console.log(`[Keyboard Browser]: onKeyboardHide`);
        return Observable.of(true);
    }

}

// Mobile implementation
export class MobileKeyboardProvider extends Keyboard { }

// --------------------------------------------------------
// Keyboard factory
//    parameters: dependencies of the target service
//    returns: instance of the service (for real devices or the browser)
// --------------------------------------------------------
export function keyboardFactory(platform: Platform) {
    return platform.is('cordova') ? new MobileKeyboardProvider() : new BrowserKeyboardProvider();
}

// keyboardProvider: used to import the service in the NgModule declaration
export let keyboardProvider =
    {
        provide: Keyboard,
        useFactory: keyboardFactory,
        deps: [Platform]
    };

就像你可以看到的那样，我只是创建了两个扩展类Keyboard类的类，而在浏览器实现中我只是在控制台中写了几样东西，并返回一个模拟的回应。你可以在这些方法中做任何你想做的事。

要知道应该模拟哪些方法，可以检查该插件的index.d.ts文件。

移动实现没有定义任何内容，因此将使用超类（键盘插件）中的方法。

代码中最重要的部分是过去：

export function keyboardFactory(platform: Platform) {
    return platform.is('cordova') ? new MobileKeyboardProvider() : new BrowserKeyboardProvider();
}

// keyboardProvider: used to import the service in the NgModule declaration
export let keyboardProvider =
    {
        provide: Keyboard,
        useFactory: keyboardFactory,
        deps: [Platform]
    };

keyboardFactory获取Platform的实例，我们使用该实例检查te app是在浏览器中还是在cordova设备中执行。基于此，我们返回浏览器实现或移动实现。

keyboardProvider只是告诉angular它应该使用keyboardFactory工厂来创建Keyboard类的实例，并且工厂依赖于Platform的实例工作正常。

现在唯一要做的就是告诉主模块（app.module.ts文件中的模块）使用我们的自定义提供程序。

// Cordova plugins providers
import { keyboardProvider } from '../providers/plugins/keyboard.provider';

@NgModule({
    declarations: [
        MyApp,
        // ...
    ],
    imports: [
        // ...
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        //...
    ],
    providers: [
        // Cordova plugins
        keyboardProvider,  // <-- Use the provider instead of just Keyboard

        // ...
        { provide: ErrorHandler, useClass: IonicErrorHandler }
    ]
})
export class AppModule { }

Ionic - Change import library based on IsDebugMode

2 个答案: