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

Webpack and Vue.js: Error - Definition missing for template or render function

I am encountering an issue while attempting to load a component in my root Vue instance. The error message I receive is displayed above. Below is the content of the main.js file: "use strict"; require('./../shared/bootstrap'); // loads jquery, ...

"Troubleshooting Angular 2 Directives That Cause Errors

Hey there, I'm currently working on understanding ANGULAR 2 routing, but I've encountered an error that's causing some trouble. Here's the issue I'm facing: app/app.component.ts(7,12): error TS2345: Argument of type '{ s ...

Identify all elements that include the designated text within an SVG element

I want to target all elements that have a specific text within an SVG tag. For example, you can use the following code snippet: [...document.querySelectorAll("*")].filter(e => e.childNodes && [...e.childNodes].find(n => n.nodeValue ...

Collaborating on a project that has been developed using various editions of Typescript

Currently, I am part of a team working on a large project using Typescript in Visual Studio. As we have progressed through different versions of the project, we have encountered an issue with versioning the installed TypeScript within Visual Studio. Situa ...

"Encountering another disappointing build failure due to an unhelpful error

During the process of moving a project from Heroku to Vercel to utilize Next.js, I encountered a strange bug that I've never seen before, despite previous experience with Next. I successfully built it last night and everything was functioning properl ...

Resolving "SyntaxError: Unexpected identifier" when using Enzyme with configurations in jest.setup.js

I'm currently facing an issue while trying to create tests in Typescript using Jest and Enzyme. The problem arises with a SyntaxError being thrown: FAIL src/_components/Button/__tests__/Button.spec.tsx ● Test suite failed to run /Users/mika ...

The Conundrum of Angular 5 Circular Dependencies

I've been working on a project that involves circular dependencies between its models. After reading through this StackOverflow post and its suggested solutions, I realized that my scenario might not fit into the category of mixed concerns often assoc ...

Converting an HTML table into an Excel spreadsheet

In the process of developing an application that populates a table based on a JSON dataset, I am seeking a way to store the filtered data into an Excel file or even a CSV. The structure includes two script files - app.js and mainController.js (organized fo ...

Creating web components with lit-element, leveraging rollup, postcss, and the tailwind framework for packaging

I have been attempting to package a functional web component that was developed using the lit-element/lit-html with the tailwind framework utilizing the postcss plugin from the rollup packager. Upon conducting a rollup, I discovered the compiled js and ht ...

typescriptCreating a custom useFetch hook with TypeScript and Axios

I have a query regarding the utilization of the useFetch hook with TypeScript and Axios. I came across an example of the useFetch hook in JavaScript, but I need help adapting it for TypeScript. The JavaScript implementation only handles response and error ...

Custom Joi middleware in Express v4 is failing to pass the Request, Response, and Next objects

I am currently in the process of developing a unique middleware function to work with Joi that will be placed on my routes for validating a Joi schema. In the past, I have created middlewares for JWT validation without passing any parameters, and they wor ...

Is it possible to enter NaN in Vue3?

Is there a way to handle NaN values and keep a field blank instead when calculating margins with a formula? https://i.stack.imgur.com/JvIRQ.png Template <form> <div class="row"> <div class="mb-3 col-sm ...

Has anybody managed to successfully implement this require or debug NPM module for use in a web browser?

Has anyone successfully implemented the require or debug NPM modules in a browser environment? Despite claims and instructions on the debug NPM module's page that it can be used in the browser, attempting to do so results in the following error: Unc ...

Develop a FormGroup through the implementation of a reusable component structure

I am in need of creating multiple FormGroups with the same definition. To achieve this, I have set up a constant variable with the following structure: export const predefinedFormGroup = { 'field1': new FormControl(null, [Validators.required]) ...

The error message "React is not defined" is commonly encountered when using React Native Storybook with

While attempting to configure React Native with Storybook, I encountered an issue when importing a .tsx component. The error displayed was: React is not defined ...

Issue with 1.bundle.js not loading during webpack production build with routing

I have been encountering an issue with my test repository for this specific problem (Link) It appears that the problem lies within the localization file, as I am using react-intl. The development version seems to be functioning properly. This is what&ap ...

What is the process for exporting a class to a module and then importing it into another module using TypeScript within an Angular environment?

I have a class called IGeneric that is exported to module A and imported into module B. However, I am unable to use this exported class in module B. Please note that the exported class is not a component, directive, or service; it is a plain TypeScript cl ...

TypeScript React Object.assign method return type

I have a unique custom function that utilizes Object.assign to return a specific result. The documentation mentions that this function returns an array, but surprisingly, it can be destructured both as an array and an object. Check out the code snippet be ...

The current version of NPM - typescript is 2.2.2, and we are unable to update it to 2.4.1 due to it being a symlink

While attempting to install TypeScript through NPM, I encountered the error below. Can you help me identify the issue? Command: npm install typescript Error: The installation of TypeScript failed because it requires an update from version 2.2.2 to 2.4. ...

Using TypeScript to Declare Third Party Modules in Quasar

I'm currently trying to integrate Dropzone-vue into my Quasar project. However, I've encountered an issue as I can't directly install and declare it in a main.js file due to the lack of one in Quasar's structure. Additionally, an error ...