Githubアクションを使用して最初のTyesScript NPMパッケージを公開する

JavaScript/typescript開発者として、あなたは今までNPMパッケージを公開する夢を見たことがありますか?はいならば、私は私が私の最初のNPMパッケージを発表するためにしたステップを通してあなたを歩かせます.

我々は使用する/タックルになるもの

ギタブアクション

国立天文台

何を知っている必要があります

ジット

Gitタグ

NODEJS

タイプスクリプト

ギタブ

Githubの秘密

最初にすること

Githubリポジトリを作成しなければなりません. それから、それをクローン化して、あなたのノード・アプリケーションを初期化してください

npm init

プロジェクトを設定した後、これらを見なければならないpackage.json プロパティー

{
  "name": "<@org_name>/<pkg_name>", // you can simply just add the package name and omit `"<@org_name>/` if you don't want to publish it into a certain organization
  "version": "1.1.2", // update this if you want to release a new version of you package
  "main": "lib/index.js", // entry point of your package
  "repository": {
    "type": "git",
    "url": "git+https://github.com/<username>/<repo_name>.git"
  },
  "keywords": ["node"],
  "author": "<your_name>",
  "bugs": {
    "url": "https://github.com/<username>/<repo_name>/issues"
  },// add these for devs/collaborators to submit an issue on your repository
  "homepage": "https://github.com/<username>/<repo_name>#readme", // add these to show the homepage of your package
  "typings": "./lib/index.d.ts" // add this to have a typescript badge in your package, this shows that your package has built in types
}

アプリケーションの設定

次のdev依存関係を追加します.

# using yarn
yarn add -D typescript @types/node nodemon ts-node

その後、我々は作成する必要がありますtsconfig.json :

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "lib",
    "moduleResolution": "Node",
    "rootDir": "./src",
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "types": ["node"],
    "esModuleInterop": true
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/**/*",
    ".webpack/**/*",
    "_warmup/**/*",
    ".github/**/*",
    ".vscode/**/*"
  ],
  "include": ["src/*.ts"],
  "buildOptions": {
    "assumeChangesOnlyAffectDirectDependencies": false
  }
}

This configuration outputs the transpiled code from src/* folder to lib directory.

gitからのファイルを除く

また、私たちの倉庫のいくつかのファイル/フォルダを除外しなければなりません.それらを除外するには、我々は作成する必要があります.gitignore , 私の場合は以下のファイルを無視しなければなりません:

# .gitignore
node_modules # these are the packages installed in our application
lib          # these are the transpiled output files

アプリケーションの作成

今、我々は内部のファイルを作成する必要がありますsrc ディレクトリ.

└── src
    ├── index.ts # entry point of our application
    └── types.ts # optional

内部src/index.ts , 我々は、この点を超えて何かを書くことができます.(数が奇数かどうかチェックするパッケージを作ることができます😏 このように

よく例として、我々はそれを行うことができます!💪🏽

// src/index.ts
const isOdd = (number: number): boolean => number % 2 !== 0;

export { isOdd };

パッケージの作成スクリプト

あなたはそれを公開する前に、ローカルであなたのアプリケーションを実行する必要があります.私たちはdev 内部スクリプトscripts あなたの財産package.json .

ビルドスクリプトを追加する必要がありますので、コードをJavaScriptに移行できます.

"scripts": {
  "dev": "nodemon --watch \"src/**\" --ext \"ts,json\" --ignore \"src/**/*.spec.ts\" --exec \"ts-node src/index.ts\"", // dev script
  "build": "tsc -p .", // build script
}

パッケージの発行

我々は今、最初のパッケージが最初のものを最初に公開する準備が整いました.

私たちはあなたのNPMのアクセストークンを取得する必要がありますnpm profile

これらのスコープのいずれかを選択してトークンを生成できます.

Note: You can use automation if you wanted to bypass 2-factor authentication. It is highly recommended to use in your ci/cd

アクセストークンを取得した後、あなたはGitthubの秘密にそれを置くことができます.

Tip: You can find it here. https://github.com/<username>/<repo_name>/settings/secrets/actions

今、我々は、NPMパッケージを公開するためにGithubアクションを使用することができます.これが使えますyaml 我々の出版活動のためのファイル.

Note: In the yml file, we're going to publish a new version once there is a tag pushed into our repository

Additional note: In order to create a tag, you have to commit all the changes first in your repository. Then you have to create a tag using this command:

git tag -a <version> -m '<message>' # the tag version should match the package version which can be seen on `package.json` 

すべてが解決されると、あなたは

git push --tags

あなたは、Ci/CDが成功するならば、待つだけで、チェックしなければなりません.

Note: If anything breaks in your development, you can reference my project here https://github.com/nljms/ph-mobile-networks

私はこれがあなたの最初のNPMパッケージを構築するあなたの旅のお手伝いをしたい!😄