Steps to prevent subfolder imports in my npm package

My npm package is built using:

  • typescript
  • webpack

webpack.config:

{...
entry: './src/index.ts
}

library tree:

- package.json
- src
- - index.ts
- - ...all_my_code...

I have all my library functionality and types exported from the index.ts file.

The issue I am facing is that the /dist directory, which gets installed in a user's node_modules folder, contains unwanted subfolders of the library source code. These subfolders are not meant to be used by the library's users and are essentially garbage to them.

Is there a way to prevent exporting these subfolders?

Answer №1

All my library functionality and types are exported from the main index.ts file.

-- Exporting directly from the index.ts file is not possible. The TypeScript project needs to be compiled into JavaScript for consumers to use. This results in the creation of a 'dist' folder where the compiled JavaScript files should be placed along with the package.json file. Declaration files can be generated using Typescript and stored in the dist folder.

The challenge now is how to conceal the 'dist' folder from direct importing by consumers.

Three options are available - Traditional Bundler, Barrel pattern, or package exports.

Bundler approach: Bundle all files into one using tools like Webpack or Rollup, resulting in a single output file that would be specified as the 'main' field in the package.json.

Barrel exports: Utilize the Barrel Pattern to compile the package with plain Typescript, placing the files in a dist folder while setting the barrel export file as the 'main' configuration.

Package.json exports: Opt for Node.js package exports for a future-proof method of concealing internal modules in the 'dist'. However, this may not be compatible with older versions of Node.js and has limited tooling support.

A recommended approach would be to combine Barrel exports with package.json exports.

Rullup is ideal for bundling libraries, while Webpack is preferred for bundling applications.

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

Troubleshooting the issue with mocking the useTranslation function for i18n in JEST

Currently, I am facing an issue with my react component that utilizes translations from i18next. Despite trying to create tests for it using JEST, nothing seems to be getting translated. I attempted to mock the useTranslation function as shown below: cons ...

Is React Context malfunctioning due to a syntax error?

Using the function "login" from React context is causing an error for me: const handleLogin = async (data: LoginType) => { try { await login(auth, data.email, data.password); router.push("/Dashboard"); } catch (error: an ...

How can I rectify the varying vulnerabilities that arise from npm installation?

After running npm audit, I encountered an error related to Uncontrolled Resource Consumption in firebase. Is there a solution available? The issue can be fixed using `npm audit fix --force`. This will install <a href="/cdn-cgi/l/email-protection" clas ...

I am having trouble initializing npm due to an error

I am currently working on a Node.js project but I am having trouble starting Node.js. In my existing Angular project, and after creating a new project with the following commands: sudo npm install -g @angular/cli After that, run: ng new mean-angular5 ...

Is it possible to automatically access the most recent Beta build through package.json and npm?

We are currently working on a project that has a specific dependency requirement for the latest beta build from an npm library. However, there are also -dev builds within the library. For instance, in the "x-library" there might be versions like: "1.2.3- ...

React application encountering URI malformed error when running on Mac operating system

I'm currently attempting to run a React app locally. When I execute npm run dev, an error is returned vite v2.6.14 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 182ms. /Users/markoz/ ...

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

Is it possible to run two Livescript (a fork of Coffeescript) applications using just one globally installed package?

I am currently using a modified version of Coffeescript called LiveScript for my application development. To execute files, I typically use the lsc command like this: $ lsc app.ls Recently, there was an update that changed the way modules are required. ...

establishing a new React development environment

Currently in the process of setting up a new React project using webpack and babel. Encountering an error when running the project. Seeking assistance to resolve this issue. I have included screenshots of the error for reference. It seems that my babel in ...

Failure in Dependency Injection in Angular with Typescript

My mobile application utilizes AngularJS for its structure and functionality. Below is the code snippet: /// <reference path="../Scripts/angular.d.ts" /> /// <reference path="testCtrl.ts" /> /// <reference path="testSvc.ts" /> angular.mo ...

Exploring the latest whatwg-fetch update with TypeScript version 2.5.3

Within my TypeScript project, I am currently utilizing "whatwg-fetch": "2.0.3" as the latest version of this polyfill. Additionally, for types, I am using version "@types/whatwg-fetch": "0.0.33", and everything functions smoothly when working with TypeScri ...

Leverage the multiSubnetFailover feature within sequelize and mssql libraries

I am running a backend application using Node.JS that relies on the mssql (v7) and sequelize (v6) npm packages. Due to the fact that my production DB configuration can only be accessed by an AGL, I have to include multisubnetfailover=true in the DB connec ...

An automatic conversion cannot handle spaces and prohibited characters in Object keys

The AlphaVantage API uses spaces and periods in the keys. Their API documentation is not formal, but you can find it in their demo URL. In my Typescript application, I have created data structures for this purpose (feel free to use them once we solve the ...

Encountering issues with Angular2 App when attempting to load simulated data using a Promise causes malfunction

Looking to implement my mocked data loading using a promise, similar to the approach shown in the Angular2 Tutorial found here. Service (Mock): import { Injectable } from '@angular/core'; import { ERGEBNISSE } from "./mock-ergebnisse"; @Inject ...

Unable to execute commands from local npm packages like webpack and babel on Windows command prompt. An error message appears indicating a missing cygdrive/c path. I am not employing cygwin

UPDATE: Reverting back to npm v3.10.10 fixed the issue for me. I haven't tested other versions, but both npm@latest (currently 6.8.0) and npm@next (currently 6.9.0) cause errors. If anyone can shed light on what I might be doing wrong, I would greatly ...

Error message appears when using TypeScript with a React Material table showing a generic type error

I am currently attempting to implement react-material in a Typescript project. As a newcomer to Typescript, I am encountering some errors that I am unsure how to resolve. In this gist, I am trying to create a reusable React component (Please view the gis ...

Having trouble launching simple ionic template: Issue with locating module 'fast-deep-equal'

Recently I started using Ionic and followed the steps to install the basic blank template as shown below. First, I installed Ionic and Cordova by running the command: npm install -g ionic Cordova. After that, I created my first Ionic project using the f ...

Node.js is raising an error because it cannot locate the specified module, even though the path

Currently in the process of developing my own npm package, I decided to create a separate project for testing purposes. This package is being built in typescript and consists of a main file along with several additional module files. In the main file, I ha ...

Developing personalized middleware definition in TypeScript for Express

I have been struggling to define custom middleware for our application. I am using [email protected] and [email protected]. Most examples of typing middleware do not involve adding anything to the req or res arguments, but in our case, we need to modify ...

Regular expressions that identify text located at the conclusion of a URL

Although the title may not be entirely appropriate, my goal is to create a regex that will remove any trailing '/' at the end of a URL under certain conditions. For example: http://stackoverflow.com/questions/ask/ to http://stackoverflow.com/qu ...