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.
In this blog, I will share how I package the functions for reusing them in various other projects. The package is written in typescript and compiled & distributed with the extension of .d.ts, which enables even pure JavaScript users to benefit from the strengths Typescript.
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.
- src
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 problem is that this function is written in ES6 and Typescript. Someone or something needs to transpile the code to JavaScript, preferably ES5 version. It is done by tsc, short for Typescript compiler.
2. tsconfig.json
This is Typescript configuration file to set how and what Typescript converts the Typescript codes to JavaScript codes.
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.
3. package.json
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.
4. dist
If you read through the previous part, you will know what the “dist” folder will have. The JavaScript files in ES5, complied by tsc from the “src” folder reside in the folder.
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.
5. .gitignore
.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.
node_modules/
.idea
test
yarn-error.log 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.
6. .npmignore
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.
node_modules/
.idea
test
src
tsconfig.json
tslint.json
.prettierrc
yarn-error.logWhen 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.
Bye
