Create npm package of virtual background

The other day, I created my first ever npm package, so I’ll leave you with a record of my work flow. There may not be much new information.
The package I created is a component of the virtual background I mentioned earlier.

Virtual Background with Amazon Chime SDK & BodyPix

You can use it if you want.

Summary

Creating and publishing an npm package in the Typescript environment.

Premise

• Make a npm account.
• Create a github account and repository.
• Clone your git repository and move to that directory.

Workflow

First, let’s configure and log in to npm.

$ npm set init.author.name "xxxxxx"
$ npm set init.author.email "xxxx@xxxx.co.jp"
$ npm set init.author.url "https://qiita.com/wok"
$ npm adduser

Now, initialize the project and create a package.json.

$ npm init -y

Next, you need to install the necessary modules.
Since we will create a package using typescript, we need to install the Prepare the environment.”npx tsc” will generate tsconfig.json.

$ npm install -D typescript @types/node
$ npx tsc --init

We configure the tsconfig.json file to generate a declaration file so that people using the package can use type inference. I will also generate a source map to make debugging easier. This is my preference.The output should be “. /dist” to match the ones described in various places. The module needs to be changed depending on the purpose, but I don’t understand it very well. I’m using esnext in this case.
If you use esnext, you need to change moduleResolution to node. The compilation does not seem to pass.

"declaration": true, 
"sourceMap": true,
"outDir": "./dist",
"module": "esnext",
"moduleResolution": "node",

At this stage, you can start writing the source code. (I actually copied and pasted the original source code.)
Then compile. If there are no errors, you should see the following file output.

$ npx tsc
$ ls dist/
index.d.ts  index.js  index.js.map

Next, we’ll change the package.json and set the entry point for you.
In this case, the description will look like this.

"main": "dist/index.js",

At the same time, the package information is included in package.json. The name is automatically set to the repository name, but if that name is already in use (by someone else) will result in an error when publishing. So set it up so that it will not be the same. The error message is meaningless, so it’s hard to get into it. I think the message was something along the lines of “security is a problem”.

"name": "local-video-effector",
"author": "xxxxxx <xxxx@xxx.co.jp> (https://qiita.com/wok)",
"license": "Apache-2.0",

Once you’ve done that, you’re almost ready to publish.
Add version information and sync it with your git repository so that you can analyze it when a problem occurs. is going to be easy.

npm version patch
git tag -a v1.x.x
git commit
git push

Finally, publish and you’re done. Thank you for your time.

In the next article, I will describe the development of a demo using the virtual background package I created here.

I’ll see you soon.

I am very thirsty!!