Teach you to publish a TypeScript package to NPM in 30 seconds.

  javascript, npm, typescript

The article is read and translated fromThe 30 second guide to publishing a typescript package to npmPart of it has been revised.

This article requires you to have a certain knowledge of JS, TS and NPM. it would be better if you had written an ordinary NPM package. if not, there are many tutorials on the internet, which are very simple ~

Students who have published npm packages all know that to initiate an npm project, use it directlynpm init -yThat’s all right. What about ts? Directlytsc --initJust. These two operations generatepackage.jsonAndtsconfig.jsonDocuments. Then we will modify the configuration as follows:

1. Add"declaration": trueTo youtsconfig.json

This line tells TypsScript to automatically generate it for you at compile timed.tsDocuments. It should be noted that when you use a private type, but this type is also part of the external API, the user of this package will not be able to infer the type of this type, and the TS compiler will also issue a warning. At this time, you only need to add before this typeexportJust.

2. Add"types": "index.d.ts"To youpackage.json

When others import your package, this sentence tells the TS compiler where to find the type definition file. Here.d.tsDocuments andmainThe entry points to a folder, so normally your package.json will contain the following two lines:

"main": "dist/index.js",
"types": "dist/index.d.ts"

(the above default you intsconfig.jsonConfigured inoutDirPoint todistDirectory)

3. Promise youdistDirectory added to.gitignore

In our code warehouse, we generally do not need to include compiled code, only need to include source code. So we are wrongdistThe catalog does version management. And this does not affect our releasedistDirectory to npm.

4. Run the build command

runtscAll source codes can be compiled. This is very convenient, usually we can add a command topackage.json：

"build": "tsc"

5. run npm publish.

Next is to be released to npm, inpackage.jsonAdd the following command:

"release": "tsc && npm publish"

I am used to using it.standard-versioncoordinatecommitizenTo release the npm package, interested students can learn about it by themselves ~

If you want to debug the local package before publishing, you can use thenpm linkCommand, executed at the root directory of this projectnpm linkAnd then execute it in the demo project to be debuggednpm link <your package name>, and then directly introduced into the code.

JSON after the configuration is completed:

{
    "name": "my-ts-lib",
    "version": "1.0.0",
    "description": "My npm package written in TS",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "scripts": {
        "build": "tsc",
        "release": "tsc && npm publish"
    },
    "author": "savokiss",
    "license": "MIT",
    "devDependencies": {
        "typescript": "^3.5.3"
    }
}

Json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "lib": ["es2017", "es7", "es6", "dom"],
        "declaration": true,
        "outDir": "dist",
        "strict": true,
        "esModuleInterop": true
    },
    "exclude": ["node_modules", "dist"]
}

Related Posts: