How to develop a JS library for the browser?

JavaScript
1

Hi there,
I want to build a small library for interacting with a chess board. It should only handle the board (drawing the board, moving pieces to a selected square) but not the game logic. I know that libraries like this exist but I want to use this project for practicing the following:

  • Developing a library that can be used in the browser (included via <script> tag) and also be installed with npm.
  • Using build tools: E.g. Writing code in ES6 (or even TypeScript) and transpiling it so that it will be supported by most browsers.
  • How to handle dependencies in such a project: I will probably use jQuery as a dependency. However jQuery should not be bundled into the build library since it it would be expected that the website already includes it via a <script> tag before my library.

I know there exist tools like webpack, gulp, etc that may get this job done. However I’m a bit overwhelmed by the number of available tools and want to make sure to choose the right tool for my job. I already started to study the webpack documentation but I have the feeling that webpack is more suited to larger applications instead of small libraries.

Thanks in advance! :grin:

3

Right, that’s all part of it. There is also the issue of creating the library on npm. There are various tutorials out there, like this one.

I recently built my first npm package, but it was in React so it is a little different. I might suggest looking around npm for packages using jQ to see how they structured it.

1 Like
4

Yes, you’re correct in thinking Webpack is primarily for applications (though of any size), not libraries. You can use it for packaging libraries, but there are better tools.

Rollup is the primary tool used for what you want. There are tools built on top of for the most common usecases, of which Microbundle does exactly what you’re looking for.

This is called a peer dependency. You install it as a development dependency so you have it whilst developing and you also specify it’s a peer dependency (eg yarn add -D jquery && yarn add -P jquery, can’t remember exact npm versions of commands). Then it just requires that jquery be installed to use it.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.