如何在没有自定义 webpack 配置的情况下进行条件导入？答案

【问题标题】：How to do conditional imports without custom webpack configuration?如何在没有自定义 webpack 配置的情况下进行条件导入？
【发布时间】：2020-10-24 14:31:37
【问题描述】：

我们有一个项目从一个代码库为 Cordova 和 Electron 构建，因此它需要在 Electron 中导入 Node API 和特定于 Node 的模块，并在 Cordova 中忽略它们。到目前为止，我们一直在使用自定义 webpack 配置来完成此操作，传递一个环境变量来告诉它是否将 Node 内容视为 externals (Cordova) 或 require it (Electron)。然而，现在我们使用 Angular 9，运行自定义 webpack (@angular-builders/custom-webpack) 的构建器与 Ionic 开发服务器构建器 (@ionic/angular-toolkit:cordova-serve) 发生冲突，集成它们看起来很痛苦。如果没有自定义 webpack 脚本，我们如何做到这一点？

【问题讨论】：

标签： angular typescript ionic-framework webpack electron

【解决方案1】：

我终于发现 Webpack 提供了__non_webpack_require__()，它只是转换为运行时require。这使得编写一个使用 TypeScript 维护类型安全的尽力而为的导入成为可能：

declare function __non_webpack_require__(path: string): any;

import * as node_hid_typeonly from 'node-hid';
let node_hid: typeof node_hid_typeonly;
try { node_hid = __non_webpack_require__('node-hid'); } catch { }

执行以下操作：

告诉 TypeScript __non_webpack_require__() 存在
导入 node-hid 仅用于类型注释（如果导入仅用于类型信息，tsc 将忽略它）
是否尽最大努力将node-hid 导入使用适当类型声明的变量中

你最终能够写作：

private device: node_hid_typeonly.HID;

以后，

this.device = new node_hid.HID(path);

我们还在一个非 webpack 项目中重用了其中的一些代码，我对此进行了调整：

global['__non_webpack_require__'] = require;

在index.ts 导入任何具有__non_webpack_require__ 的内容之前。

【讨论】：

创建一个全局变量，假设 require 存在，并依赖 Webpack 的实现细节可能对你来说很好，但它几乎没有什么可推广的。有很多方法可以有条件地导入东西
__non_webpack_require__ 是 Webpack 公共 API，而不是实现细节。不过，我对其他策略感兴趣……您会推荐什么？这是库代码（内部使用），需要在 Electron 和 Cordova 中使用 Angular+webpack 运行，以及在没有这些的节点下运行。