Entry point for a js browser lib in package.json

Question

Suppose I have a tiny js browser library that I want to publish to npm (for example this one ). The library simply gets included in the html file with a <script> tag and then used normally within the html document (or another js):

<script src="aplouder.js"></script>

<script>
  var library = new Aplouder({...});
</script>

1. What shall I specify for the main parameter in the package.json ?

2. Should I go for browser instead of main or don't specify either of those entirely?

3. OPTIONAL: What if I had 2 js files (eg es5 and es6 variant) that I wanted to publish with the library, and it's for the user to decide which one they would use?

Thanks :)

Answer 1

1 and 2: Your app should be bundled with its dependencies in a /build folder

3: Your app should be bundled in es5 and es6 bundles

The bundles should be managed with Webpack , usually es6 files are stored in /src directory while bundles are stored in /build or /dist folder

A nice article to get started publishing on NPM

Answer 2

Often times you want to distribute your js library both as an npm package, and as a browser library (old-fashioned way). One way to handle this is to treat your js lib as an npm package and provide a browser bundle in a /dist folder for those who don't rely on any build system aka module bundler (eg webpack, parcel, rollup, etc.)

However, if your module is meant to be used client-side, the browser field should be used instead of the main field. So, answering the question:

1 and 2 : Use browser :

"browser": "src/aplouder.js"

3: I recommend to stick with either of those: es5 or es6 , and not both, since you cannot have more than one browser keys in a json.