Designing architecture for NPM packages in TypeScript

I am currently developing multiple NPM packages using TypeScript and I am exploring the most effective strategies for supporting various target architectures.

When compiling to ES3, there is extensive support but it comes with additional boilerplate for compatibility reasons (resulting in larger file sizes and code that may be challenging to parse). On the other hand, targeting esnext results in clean output code without boilerplate, but with limited support.

An issue arises as the TypeScript compiler does not transpile JavaScript code or any code located within the node_modules directory. This presents a challenge when compiling a library to ES6 and then trying to use it in a browser application that targets ES3 or ES5.

What approach should be considered best practice in this scenario? How should I configure my package.json and tsconfig.json? Additionally, if users of the library need to take action, what is the recommended method?

Thank you for your help!

javascripttypescriptnpmpackagecompatibility

Answer №1

I believe that finding a middle ground is possible. Personally, I find it important to incorporate ES6 into the library in order to support rollup's tree-shaking functionality. This can be achieved by utilizing the module option in the package.json file:

"main": "dist/alina-core.js",
"module": "dist/alina-core-es.js",

When a user employs rollup, they will need to transpile to ES5 post tree-shaking regardless, hence why the ES6 version is specified in the module field. However, if a library user sticks with an older build pipeline, they will receive the transpiled ES5 version indicated in the main field.

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

Issues with Dynatree loading on Internet Explorer 9

Having integrated a dynatree into a web application, the dynatree is generated from the server using a JSON object. The dynatree functions perfectly on updated versions of Firefox, Safari, Chrome, and Opera, but I encounter an issue with Internet Explorer ...

javascriptjsoninternet-explorerdynatree

Attempting to persist a nested document in MongoDB using mongoose within a Nodejs environment

I attempted to save an address as a nested document in the following format When sending data from the client side, it was formatted like this: const address = JSON.stringify( { addressline1:form.addressline1.value, addressline2:form.addressline2.value, c ...

javascriptnode.jsmongodbexpressmongoose-schema

Enhancing the building matrix with JavaScript (or jQuery)

I have created a custom Javascript function for extracting specific data from a matrix. The main purpose of the function is to retrieve data based on dates within a given range. Here's how it works: The matrix[0][i] stores date values I need to extr ...

javascriptjquerymatrix

encountering difficulties calling setAttribute within a function

I am encountering an issue while attempting to use setAttribute() within toggleDiv(). My IDE does not seem to recognize the function and is throwing an error. How can I resolve this problem so that the function is recognized? This specific case relates t ...

angulartypescriptfunctiondom-events

Releasing a Node.js package to the npm registry

Looking for guidance on utilizing .ENV variables when releasing an npm package. Is it possible to include .env variables when publishing my npm package? Appreciate any help! I am currently incorporating the "dotenv" version: "^16.0.3" ...

npmnpm-installnpm-scriptsnpm-publishnpm-package

Transforming jQuery code to pure vanilla Javascript

For my project, I decided to convert my jQuery code into native JavaScript. The goal is to eliminate the dependency on jQuery and achieve the same functionality. The current setup involves two pages - page.html and side.html. The page.html document fetches ...

javascriptjqueryhtml

How can you define a function type for a rest parameter in Typescript?

At this point, I have a function that takes in two parameters: param 'a' as a string and 'b' as a function that returns a string. My intention is to call it using a rest parameter and specify the types accordingly. However, on line 10 ...

typescript

Node.js package installation was unsuccessful

Recently, I've encountered an issue while trying to install node.js npm packages. Whenever I attempt to install them, the installation process starts but then unfortunately freezes. Strangely, when I try to install angular packages, there are no issue ...

node.jsnpm

Using Formik with MUI Multiple Select

Exploring the world of MUI and Formik, I encountered a challenge with creating a multiple Select in my form. It's my first time working with these tools, so I have a question regarding the implementation. Here's what I've tried based on the ...

javascriptreactjsmaterial-uiformikyup

Retrieve text from a dropdown menu while excluding any numerical values with the help of jQuery

I am currently implementing a Bootstrap dropdown menu along with jQuery to update the default <span class="selected">All</span> with the text of the selected item by the user. However, my objective is to display only the text of the selected it ...

javascriptjqueryhtmldrop-down-menu

What seems to be the issue with this basic Node.js function not functioning properly?

I'm attempting to utilize a function that returns a boolean answer and then verifying it using if-else statements. function checkDNS(domain, tld) { var dns = require('dns'); dns.lookup(domain+'.'+tld, function (err, addres ...

javascriptnode.jsnodes

Guide on how to programmatically assign a selected value to an answer using Inquirer

Currently, I'm utilizing inquirer to prompt a question to my users via the terminal: var inquirer = require('inquirer'); var question = { name: 'name', message: '', validation: function(){ ... } filter: function( ...

javascriptnode.jsnpm

Having trouble generating a dynamic ref in Vue.js

I am currently working on rendering a list with a sublist nested within it. My goal is to establish a reference to the inner list using a naming convention such as list-{id}. However, I'm encountering difficulties in achieving this desired outcome. B ...

javascriptvue.jsvuejs2

Encountering a NoSuchElementException when transitioning from frame[0] to window[1] in Firefox GeckoDriver using Selenium with Python

Encountered an issue with the Firefox GeckoDriver browser where I receive an error stating `element not found`. The problem arises when I navigate from window[1] to frame[0], back to window[1], and then attempt to click the close frame button. I prefer u ...

javascriptpythonseleniumgeckodriverfirefox-marionette

Using Javascript to define cookie values

I'm attempting to use JavaScript to set a cookie that will instruct Google Translate to select the language for the page. I've experimented with setting the cookie based on my browser's cookie selection of a language. <script> $(doc ...

javascriptcookiesgoogle-translate

What is the best way to activate a function within an npm package in a Vue application?

I'm just starting out with Vuejs and I've recently installed the vue-countup-v2 npm package. I successfully imported it into my Vue component and noticed that it works perfectly when the page loads. However, I am interested in triggering the Coun ...

javascriptvue.jsnpmwebpackvue-component

How to get the initial item from an API using JavaScript mapping

When mapping my arrays, I usually use the following code: moviesList.map(movie => <MovieCard movieID={movie} key={movie} However, there are instances where my API returns multiple results. Is there a way to modify my .map function to display only t ...

javascriptreactjs

What is the best way to obtain and transmit an ID from an Angular dropdown menu selection

Can you assist me with a coding issue? In my template, I have a select dropdown with options saved in a list of settings. Each setting has its own unique id. I also have a data model in my interface for fields sent or received from the backend. How can I e ...

angulartypescript

Troubleshooting a Windows installation error with AWS Amplify CLI

Could use some assistance with installing the aws amplify cli on Windows. I am currently stuck at this point when trying to run the command "npm install -g @aws-amplify/cli". Does anyone have any advice or tips for me? https://i.sstatic.net/W9baU.png ...

node.jsamazon-web-servicesnpmaxiosaws-amplify

After the function has been executed, the default parameters will still be present. What should be done in this

When I set default parameters in a function and then call the function again without those parameters, they still remain. I want them to be reset on every function call. It seems like a simple issue, but as a beginner, I'm struggling to understand it ...

javascript