Convert individual packages within the node_modules directory to ES5 syntax

I am currently working on an Angular 12 project that needs to be compatible with Internet Explorer. Some of the dependencies in my node_modules folder are non es5.

As far as I know, tsc does not affect node_modules and starts evaluating from the main option defined in angular.json.

While researching solutions, I have come across suggestions to use babel, but I am uncertain about the best approach.

  1. Should I incorporate babel with tsc or completely replace tsc with babel using a custom-webpack configuration?

  2. From what I gather, after transpilation, the code typically goes to an output directory. However, since I need to transpile js files within node_modules, how can I ensure that the transpiled files replace the originals in node_modules? Any ideas on this?

javascriptangulartypescriptbabeljsecmascript-5

Answer №1

To implement specific overrides in your tsconfig, you can utilize the include property.

"include": [
  "src/**/*",
  "node_modules/foo/index.ts",
  "node_modules/bar/quux.baz.mjs"
]

When bundling for the client, dependencies are typically not included as separate scripts. Instead, the bundler determines where to place them. If you are currently using a bundler, such as Webpack, with the allowJS: true option, Babel may not be necessary. For example, a modification to the Webpack config could include:

{
  test: /\.(js|ts)$/,
  exclude: /node_modules\/(?!(foo|bar)\/).*/, // this line

If automatic polyfills are desired, utilizing @babel/preset-env with a Browserslist string is recommended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for extracting user input from a text box on a webpage?

Having trouble with retrieving the value from a text box in my search function. SearchBar Component import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-search', templateUrl: './search.compon ...

angulartypescript

Develop a monitor for an entity that has not been created

Currently, I am tackling a feature that involves tracking an asynchronous request within a synchronous one. Let me elaborate. The code snippet I am working with looks something like this: const myObj = {}; function sendMessage(requestId, data) { kafkaP ...

javascriptpromise

Is memory allocated for 32 bits for variables with an undefined value in Javascript?

If I have a function with the signature below: function test(variable1, variable2) {} And I call it with only one parameter: test(5); Then within the test function, variable2 will be created but with a value of undefined. I'm interested to know if ...

javascript

Adjust the size of an image within a canvas while maintaining its resolution

My current project involves using a canvas to resize images client-side before uploading to the server. maxWidth = 500; maxHeight = 500; //handle resizing if (image.width >= image.height) { var ratio = 1 / (image.width / maxWidth); } else { var ...

javascripthtmlcanvashtml5-canvas

Exploring the sharing of observables/subjects in Angular 2

UPDATE: After further investigation, it appears that the SharedService is being initialized twice. It seems like I may be working with separate instances, causing the .subscribe() method to only apply to the initiator. I'm not sure how to resolve this ...

angularobservableangular2-services

Steps for resetting the counter to 0 following an Ajax Refresh or Submission to the database

I have been working on a code that successfully sends multiple data to a MySQL Database using JQuery Ajax. Everything works smoothly, but I encountered an issue when trying to refresh the page with ajax and add a new record; it populates the number of time ...

javascriptphpjquerymysqlajax

Accessing the NestJS DI container directly allows for seamless integration of dependency

I have been using NestJS for the past 4 months after working with PHP for 5 years, mainly with Symfony. With PHP, I had the ability to access the compiled DI container and retrieve any necessary service from it. For example, in an application with service ...

typescriptdependency-injectionnestjs

Allow for an optional second parameter in Typescript type definition

Here are two very similar types that I have: import { VariantProps } from "@stitches/core"; export type VariantOption< Component extends { [key: symbol | string]: any }, VariantName extends keyof VariantProps<Component> > = Extra ...

typescripttypes

Tips for adjusting HighCharts layout with highcharts-vue integrations

I have a fairly simple component: <template> <div> <chart v-if="!loading" ref="priceGraph" constructor-type="stockChart" :options="chartData" ...

javascripttypescriptvue.jshighchartsvuejs2

Trying to determine the specific key of an object based on its value in TypeScript?

Looking to create a function that can retrieve the key for a given value. type Items<T> = Exclude<{ [P in keyof T]: [P, T[P]]; }[keyof T], undefined>[]; export const getKeyName = <T extends Record<PropertyKey, unknown>, V>( col ...

typescript

What is the best way to import my json information into an HTML table and customize the rows as radio buttons using only Javascript?

I am facing an issue with processing a JSON response: var jsondata = dojo.fromJson(response); There is also a string that I am working with: var jsonString = jsondata.items; The variable jsonString represents the JSON data in the file: jsonString="[ ...

javascripthtmlarraysjson

Tips on maintaining the content of an element within a directive template

I'm currently facing an issue with adding the ng-click directive to a button. Here's my HTML: <button class="btn">clicky</button> This is the directive I am using: angular.module('app').directive('btn', function ...

javascriptangularjs

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

To ascertain whether the mouse is still lingering over the menu

I have a condensed menu construction that unfortunately cannot be changed in HTML, only CSS and JS modifications are possible! $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouse ...

javascriptjqueryhtmlcss

Drag the label into the designated paragraph to copy the text. Click on the specific point to transfer the text

How can I copy the text from a label to a specific point by dragging it? <label id="text_to_be_copied" > i am a student </label> Below is a paragraph where I want to paste the copied text: <p> this is the content where I want to copy t ...

javascriptjqueryhtmldrag-and-drop

Leverage the pre-defined Ionic Sass variables for optimal styling

Is it possible to utilize existing Sass Variables in Ionic 5 for our custom CSS classes? The specific variables I am referring to can be found here: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ I'm interested in creating som ...

iosangularionic-frameworksass

The conversion of Draft-js JSON to EditorState is not functioning correctly

Recently, I utilized Draft-js to generate blog posts. When a user creates a post, the data is transformed into a string and dispatched to the server for storage. The conversion of draft-js EditorState looked like this: JSON.stringify(convertToRaw(editorSta ...

javascriptreactjsdraftjsreact-draft-wysiwyg

Struggling to comprehend the intricacies of these generic declarations, particularly when it comes to Type Argument Lists

I'm currently reviewing the code snippet from the TypeScript definitions of fastify. I am struggling to understand these definitions. Although I am familiar with angle brackets used for generics, most TypeScript tutorials focus on simple types like Ar ...

typescript

To view the contents of the dropdown list on an iPhone, simply tap the arrow key next to the mobile dropdown list and the contents will be

I am attempting to trigger the dropdown list contents to open/show by tapping on the arrow keys near AutoFill on the iPhone mobile keyboard. This action should mimic clicking on the dropdown itself. Currently, I am working on implementing this feature for ...

javascriptjqueryhtmliosiphone

securely managing file access through lockfile.locksync in node.js

Currently, I am utilizing lockfile.locksync to secure a file in my node.js application. However, I am interested in understanding the inner workings of this utility in more detail. Despite multiple resources referring to it as a "very polite lock file util ...

javascriptnode.jsnpmlocking