How to make your own npm package with Typescript .d.ts extension
As you handle more than one project, you may encounter situations where you have to code trivial functions repeatedly across the projects.
As a sincere DRYer (Don’t Repeat Yourself), in order to avoid it, I package the frequently-used-functions using the npm(also known as Node Package Manager). Then, all I have to do is to install the package and use it without repeating myself in every other project.
I already published my own package at @tofusoup429/pubfuncs and the git repository is at https://github.com/tofusoup429/pubfuncs. As of writing this blog, its version is 1.0.5. with just a few functions.
Here, I will go through quite high level only. If you are interested in more details, please visit the project repository.
- Project structure
The package has folders “dist”, “node_modules”, “src”, “test”. The only folder that I have to touch is the “src” folder.
The files in “src” folder are compiled and moved to “dist” file in the end. And eventually, the files in the “dist” folder get packaged and distributed.
In the “src” folder, I have Typescript files written in ES6. The sub-folders such as “dates” and “objects” are made only for classifying purposes. They are not necessary ones.
One of the files “checkIfNoSameElementExistInArray.ts” looks like this.
It is a very simple function to check if there are repetitive elements in a array. If so, it returns false. Otherwise it returns true.
The configuration setting tells the Typescript compiler things as follows.
(1) To compile the Typescript codes inside the “src” folder only.
(2) To compile the Typescript codes to ES5.
(3) To compile the Typescript codes with declaration files, which have extensions of “d.ts”.
(4) To move the compiled codes to the “dist” folder.
How do I start the Typescript compiler? it is done with the npm script in package.json.
Look at the “scripts” part. I defined what the project will do on typing “yarn run build” or “yarn build” or “npm run build” in terminal.
On typing “yarn build” in terminal, the project automatically removes previously saved files in the “dist” folder, and supply the folder with new files compiled from the “src” folder by tsc.
The files look similar to the “src” folder, but there are files with .d.ts extensions in addition to the original files. If you look at each file, you will notice it is not ES6 anymore. It it ES5 code: “let” are replaced with “var”.
It has d.ts. file as well.
.gitignore file is also another configuration file to set what files or folders are ignored when committed in the git repository. It is your choice how much you expose your project. The following is what I want to ignore when committed to the git repository.
I want the “src” folder not to be ignored because I have multiple laptops to work with. By not ignoring the “src” folder, I can clone the “src” folder to any laptops and continues to work with the latest version.
Similar to .gitignore, .npmignore file includes files or folders to be ignored when published to npm package. The followings are files that I want to be ignored in my package.
When publishing, I want my package to be minimal size. Thus, I ignored everything except the “dist” folder, “readme.md”, and package.json.
7. yarn publish or npm publish
This is the final stage of publishing your package. In order to publish, you have to have an account in npmjs. Once you have account, type “yarn login” or “npm login” in terminal and login with your username, email address and password.
If you have a paid account, you can create private packages. Otherwise, you are only allowed to have public packages.
You are all set. Only thing left is to type in “yarn publish” or “npm publish” in terminal. If everything went successfully, you will see message like
You set new version, then pressing enter key make your package uploaded.
Thank you for reading my blog.