Публикация вашего первого npm-пакета Typescript с помощью действий Github

Как разработчик Javascript/Typescript, мечтали ли вы когда-нибудь опубликовать npm-пакет? Если да, то я проведу вас через шаги, которые я сделал, чтобы опубликовать свой первый npm-пакет.

Что мы будем использовать/разбираться

• Действия Github
• Npm

Что вам нужно знать

• Git
• Теги Git
• Nodejs
• Typescript
• Github
• Секреты Github

Первое, что нужно сделать

Вы должны создать свой репозиторий на github. затем клонировать его и инициализировать ваше приложение node, используя

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
}

Настройте ваше приложение typescript

Добавьте следующие 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
  }
}

Эта конфигурация выводит транспонированный код из папки src/* в каталог lib.

Исключение файлов из 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.
• Вы можете сгенерировать токен, выбрав любую из этих областей:

Примечание: Вы можете использовать автоматизацию, если хотите обойти двухфакторную аутентификацию. Настоятельно рекомендуется использовать в вашей ci/cd.

• После получения токена доступа вы можете поместить его в секреты Github.

Совет: Вы можете найти его здесь. https://github.com/<username>/<repo_name>/settings/secrets/actions.

• Теперь мы можем использовать действия github для публикации нашего пакета npm. Вы можете использовать этот yaml-файл для нашего действия публикации.

Примечание: В yml-файле мы собираемся публиковать новую версию, как только в наш репозиторий будет добавлен тег.

Дополнительное примечание: Чтобы создать тег, необходимо сначала зафиксировать все изменения в репозитории. Затем нужно создать тег с помощью этой команды:

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.

Примечание: Если что-то сломается в вашей разработке, вы можете обратиться к моему проекту здесь https://github.com/nljms/ph-mobile-networks.

Надеюсь, это поможет вам в вашем пути создания вашего первого пакета npm! ?