31
loading...
How to package an existing typescript project and release it to npm in 5 steps
We will ensure the following things
It has the following file structure
Below is the content of getJoke.ts
import fetch from 'node-fetch';
export default async (): Promise<string> => {
const res = await fetch('https://official-joke-api.appspot.com/random_joke');
const json = await res.json();
const joke = json.setup + '\n' +json.punchline;
return joke;
}Below is the content of index.ts
import getJoke from './getJoke'
for (let i = 0; i < 20; i++) {
getJoke().then(joke => {
console.log(joke)
console.log('\n \n')
})
}It's a simple project which prints 20 random jokes.
I used
tsc -initand
npm initto generate my tsconfig.json and package.json files respectively.
My package.json is almost unchanged, the only difference is the addition of a script
"scripts": {
"main": "tsc && node ./dist/index.js"
}My tsconfig.json has a few changes. I deleted all the irrelevant configurations and add paths to outDir and rootDir. Below is my tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["es2017", "es7", "es6", "dom"],
"outDir": "./dist",
"rootDir": "./src",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true ,
"declaration": true
}
}Add the following to your tsconfig.json
"declaration": trueFirst we will need to add the path to our types.
"main": "./dist/index.js",
"types": "./dist/index.d.ts",We will need to add a new key-value for "types" the value should be the same as that of "main". The only difference is the extension, the value for "types" should have ".d.ts" instead of ".js"
We will need to add another key-value pair
"files":[
"dist/**"
]This will tell npm which files to include in the package. Since we only want to include our compiled javascript files, we only include the files inside the dist folder. If your JS files are stored in some other directory, ensure you whitelist the correct files/path.
Add the following to gitignore
distThis will ensure that our javascript files do not get pushed to our repo
Run the following command
tsc && npm packThis should create a zip file. The zip file is essentially a representation of what your package would look like when installed using npm. After you run the command, it will also generate an output with the file contents. Ensure the javascript files are included in the package.
Update the name,author,license etc in package.json if you'd like. Once you are ready, simply run the below command
tsc && npm publishIf you get an error like below
npm ERR! publish Failed PUT 404Try running the following command to login the npm using the cli
npm loginand then adding an user to the registry
npm adduserEnsure you have an npm account with a verified addres.
If you want to republish, run the following command
tsc && npm version <new version number> && npm publishWe will import it in a typescript file and then in a javascript file.
Install your packages
npm i typescript-jokes-rahulYou can check the package inside node_modules to confirm that right files have been added to the package.
Importing package in JavaScript
const joke = require('typescript-jokes-rahul/dist/getJoke')
joke.default()
.then(
joke => console.log(joke),
)Importing package in typescript
import getJoke from 'typescript-jokes-rahul/dist/getJoke'
getJoke()
.then(
joke => console.log(joke),
)In my next article, I will talk about how to fix the weird import paths.
Resources
31