Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Question

Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Our project is designed to be compatible with both Cordova and Electron, using a single codebase. This means it must import Node APIs and modules specific to Node for Electron, while ignoring them in Cordova. Previously, we relied on a custom webpack configuration that used an environment variable to determine whether to treat the Node components as 'externals' for Cordova or to 'require' them for Electron. However, with our migration to Angular 9, integrating the builder required to run a custom webpack script (@angular-builders/custom-webpack) with the Ionic dev server builder (@ionic/angular-toolkit:cordova-serve) seems like a daunting task. Is there a way to achieve this without using a custom webpack script?

angular typescript ionic-framework webpack electron

Answer 1

Answer №1

After much exploration, I stumbled upon the revelation that Webpack offers a hidden gem called __non_webpack_require__(), essentially acting as a runtime stand-in for require. This discovery opened the door to crafting a clever workaround for maintaining type safety with 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 { }

Here's what this snippet accomplishes:

Informs TypeScript about the existence of __non_webpack_require__()
Imports node-hid solely for type annotations (as tsc can exclude imports used purely for typing purposes)
Attempts to import node-hid into a variable defined with the correct type

This setup allows you to write code like this:

private device: node_hid_typeonly.HID;

and later on,

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

We've even managed to repurpose this technique in a non-webpack environment by incorporating:

global['__non_webpack_require__'] = require;

within index.ts before importing anything reliant on __non_webpack_require__.

Answer 2

After much exploration, I stumbled upon the revelation that Webpack offers a hidden gem called __non_webpack_require__(), essentially acting as a runtime stand-in for require. This discovery opened the door to crafting a clever workaround for maintaining type safety with 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 { }

Here's what this snippet accomplishes:

Informs TypeScript about the existence of __non_webpack_require__()
Imports node-hid solely for type annotations (as tsc can exclude imports used purely for typing purposes)
Attempts to import node-hid into a variable defined with the correct type

This setup allows you to write code like this:

private device: node_hid_typeonly.HID;

and later on,

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

We've even managed to repurpose this technique in a non-webpack environment by incorporating:

global['__non_webpack_require__'] = require;

within index.ts before importing anything reliant on __non_webpack_require__.

Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Answer №1

Similar questions

Combining default and named exports in Rollup configuration

Customizing Angular Forms: Set formcontrol value to a different value when selecting from autocomplete suggestions

Reference ngFor for Input Validation Template

Presenting a data table in Angular

Encountering issues during the installation of the Angular/CLI software

Refresh the Angular2 API at regular intervals to monitor any updates in the response

There was an issue: Control with the name 'name' could not be located

The PrimeNG FullCalendar feature seems to be malfunctioning and cannot be located

Ordering an array in Angular 2: A step-by-step guide

TypeScript Library encounters issues when importing a specific data type

Combining conditions and CSS classes within the ngClass directive in Angular

Tips for indicating errors in fields that have not been "interacted with" when submitting

Unable to transfer variable from a function to the test in Protractor

Encountered a React TypeScript issue stating that the type '{ ... }' cannot be assigned to the type 'IntrinsicAttributes & IntrinsicClassAttributes<...>'

Automatic renewal of bearer token in Angular 7

Steps for sending data from Angular2 or Angular4 to a Node.js server and saving it in a MySQL database:1. In your

Testing a NestJS service with multiple constructor parameters can be done by utilizing various techniques such as dependency

The build of the module in ./src/client-app/index.js has encountered an error: It cannot locate the module '@babel/core'

Troubleshooting a Cache Issue in Your Next.js Application

Updating the URL of a Link Message in a React App