How to make universal JavaScript / TypeScript library

0
votes

I like to write small and simple TypeScript libraries which I can share across my projects and I want to share them with the wider opensource community. But one problem is holding me back from it:

Often happens to me that I publish an NPM module that is working in one context but makes strange errors in others. For example, it works in create-react-app but it does not in ts-node. Or it works everywhere but it makes problems in build. Despite it is just a pure function that does not use something context-dependent like window.

How to prevent these types of problems?

Is there some "magic" method to make it work (and test) it in every possible context and combination like browser, old browser without ES6, typescript project, create-react-app project, node, ts-node, ES module, imported with require, imported with import, partially imported...?

I am searching for some unified and simple way how to write code not spend most of the time with configuration and updates of (ts, webpack) configs without a ton of boilerplate code. For example, some library that makes builds for every platform for me and autoconfigure it into package.json? Some create-react-app but for libraries.

1
typescriptnpmwebpackcreate-react-apptsconfig

1 Answers

1
votes

Thanks for your effort in contributing to the open-source community!

I was wondering about a similar issue while working on this article How to set up ES module library for the frontend JavaScript, and I took a shortcut by reducing the scope by writing the library in JavaScript. There are few issues that writing your code in TypeScript brings:

  • JS can be safely left uncompiled - you write your code as ES module, and the compilation is set up by the client application
  • on the other hand, TS modules that are published in npm are supposed to be compiled. This not only forces you to answer the question you have here, but it will require setting up some infrastructure for building & publishing your code

Let's get in touch if you are interested in developing this use case together. I think it could be at least covered by some code generator, similar to what I presented in How to quickly start a webpack project, but more elaborate & focused on libraries. I'm spending a lot of time figuring out webpack related stuff, and it would be nice to have a concrete use case & somebody to bounce ideas with.