CODEWITHSUNDEEP
javascriptnode.jsreactjsecmascript-6
Matheus Souza
Matheus Souza

Reputation: 13

Is there a way to conditionally change main entry file in package.json?

I'm currently developing two applications in two different projects: a React component library to be used as a design system, and a React webapp to render pages using components from design system.

Inside my webapp, I import the components as following:

import { Button } from 'designsystem'

Inside the package.json of designsystem, my main entry points to /src/index.js where all my components are exported as a ES6 module. When I'm developing that's ok, because when I update a component in designsystem it reflects on the webapp and that's the desired behaviour.

Although when I try to build my webapp, it only works if I point the main entry of designsystem to the dist folder, which contains a bundled file with all the components as UMD. This way, I can't see the changes of the components inside my webapp unless if I build everything again.

I already tried to conditionally return the components module or dist content in /src/index.js in order to point to the correct content. But nothing worked.

My question is: Is there a way to conditionally change the main entry in package.json? If not, is there another solution for this?

EDIT: When the main is pointing to the source, I can work fine with it using npm link. My problem comes when I try to build the parent, unless I switch the main to the build folder.

Upvotes: 1

Views: 1857

Answers (1)

Mosè Raguzzini
Mosè Raguzzini

Reputation: 15841

The "main" entry in your package.json deserves to point to the build folder:

The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require("foo"), then your main module's exports object will be returned.

This should be a module ID relative to the root of your package folder.

For most modules, it makes the most sense to have a main script and often not much else.

Ref:https://docs.npmjs.com/files/package.json#main

The root of your package has nothing to do with your dev app. You should use npm link while developing and leave unchanged your main pointing to build folder.

Upvotes: 2

Related Questions