Newbie Webpack/NPM question

Development
1

Possibly a easy question from a newbie here to webpack and publishing to NPM.

I’ve set up the “openmrs-contrib-reactcomponents” project to package and publish reusable React components.

I’m using webpack to build a packages min.js file. So, my question is, what should be published to NPM? Just the packaged min.js file? Do I include the src files as well? Test files?

Take care, Mark

1 Like
2

Running npm publish will push the whole the directory I think. The important part is that the main key in package.json points to the entry point of your library (usually index.js, but it could be the build output, like lib/index.min.js).

Most people are going to be minifying whatever they build with your library, so for development they usually want to use the un-minified version.

3

Cool, thanks Pascal.

Yeah, npm publish publishes everything (or at least npm pack packs everything, and I assume publish just publishes the pack), but you can add a .npmignore.

Another newbie question, though… if I include both the minified and un-minified code, but then have the “main” point to the minified code, how will the unminified code ever be found?

For instance, I’m working on setting up a library of reusable React components, “openmrs-contrib-reactcomponents”.

I minify and publish it, so the main in my package.json is:

"main": "./lib/openmrs-contrib-reactcomponents.bundle.min.js"

So say I define a reusable Header and then a package (which builds an OWA) imports it:

import { Header } from 'openmrs-contrib-reactcomponents';

Assumedly the other package will only know how to find the minified version of Header, not the full source?

If the idea is that a package such as “openmrs-contrib-reactcomponents” is never supposed to be stand-alone, but always included within another package, is best practice just to include the unminified src in “openmrs-contrib-reactcomponents” and the consuming package will just import what it needs and webpack it up to create the OWA?

Hope that made some sense… :slight_smile:

Take care, Mark

1 Like
4

Webpack and npm are pretty smart about sniffing out the minified and unminified versions as long as you follow the naming convention (i.e. index.js and index.min.js), so I wouldn’t worry too much about that.

My suggestion is that you point main to the un-minfied version, and let the user do the production build of their end product. If a user wants to include the minified version directly in a <script> tag, they can access it directly using unpkg.

5

Makes sense, thanks Pascal!

1 Like
6

Hi @mogoodrich,

I found this great book very useful

in getting started with webpack. The same authors also have one on maintaining JS projects/NPM packages Introduction which I havent read but maybe thats also helpful :slight_smile:

I added them to the Programming Learning Resources - Documentation - OpenMRS Wiki which has some more resources on JS stuff. If you or @pascal have/find great resources you want to share please add them so we our communities developers have a great place to learn :blush: :

7

Thanks @teleivo!