Сборка, тестирование и публикация пакета NPM


Hello World 👋

В этой статье мы собираемся собрать, протестировать и опубликовать пакет npm для проверки того, является ли строка адресом электронной почты или нет. Итак, если вы хотите узнать, как мы это сделаем, пристегните ремень безопасности, и поехали 🚗.

Необходимые условия

  • На вашей машине установлен Nodejs (если нет, вы можете скачать его здесь).
  • У вас есть аккаунт npm, если нет, вы можете создать его на npmjs.com.
  • И немного знаний JavaScript.

🛠️ Сборка

Во-первых, нам нужен каталог для хранения нашего кода, поэтому создайте его и откройте в терминале, затем инициализируйте новый проект Nodejs, выполнив команду :

npm init -y
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта команда создаст файл package.json со значениями по умолчанию, которые мы отредактируем позже.

Далее, внутри нашего каталога создадим новый каталог и назовем его src, затем внутри src создадим файл index.js, который будет содержать наш код.

Теперь наш корневой каталог имеет следующую структуру файлов:

.
└─src
│ └ index.js
│ package.json

Вход в полноэкранный режим Выход из полноэкранного режима

Давайте войдем в файл src/index.js и экспортируем функцию, которая принимает строку в качестве аргумента и проверяет, является ли она адресом электронной почты. Для этого мы будем использовать регулярные выражения (regex)
 и проверять, соответствует ли заданная строка regex-шаблону адреса электронной почты:

// ./src/index.js

const isEmailAddress = (string) => {
  const regex =
    /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
  return regex.test(String(string).toLowerCase());
};

module.exports = isEmailAddress;

Вход в полноэкранный режим Выйти из полноэкранного режима

Отлично! Теперь, когда мы создали наш пакет, давайте перейдем к следующему шагу.

🚨 Тест

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

npm install —-save-dev jest
Войти в полноэкранный режим Выйти из полноэкранного режима

затем создадим новый каталог внутри нашего корневого каталога и назовем его test, а внутри него создадим файл index.test.js, который будет содержать наши тесты.

Теперь файловая структура нашего корневого каталога будет выглядеть следующим образом:

.
└─src
│ └ index.js
└─test
│ └ index.test.js
│ package.json

Вход в полноэкранный режим Выход из полноэкранного режима

Внутри test/index.test.js импортируем функцию, которую мы экспортировали из src/index.js, и напишем наши тесты:

// ./test/index.test.js

const isEmail = require("../src");

describe("isEmail", () => {
  it("should return false if the email is not valid", () => {
    expect(isEmail("123")).toBe(false);
    expect(isEmail("email")).toBe(false);
    expect(isEmail("example.com")).toBe(false);
    expect(isEmail("email@example")).toBe(false);
  });

  it("should return true if email is valid", () => {
    expect(isEmail("email@example.com")).toBe(true);
    expect(isEmail("email123@example.com")).toBe(true);
    expect(isEmail("email-12@example.com")).toBe(true);
    expect(isEmail("email+az@example.com")).toBe(true);
  });
});

Войти в полноэкранный режим Выход из полноэкранного режима

Чтобы запустить наши тесты, давайте перейдем в файл package.json и отредактируем тестовый скрипт для использования jest:

- "test": "echo \"Error: no test specified\" && exit 1”
+ "test": "jest"

Войти в полноэкранный режим Выйти из полноэкранного режима

затем выполним следующую команду:

npm run test

Войти в полноэкранный режим Выйти из полноэкранного режима

и вы увидите, что наши тесты пройдены 🎉

🚀 Публикация

Чтобы опубликовать наш пакет, нам нужно внести несколько изменений в файл package.json, и начнем мы с названия пакета, я просто назову его is-email-address, но прежде чем назвать пакет, вам сначала нужно убедиться, что название вашего пакета уникально и не существует в реестре npm, иначе вы получите ошибку при попытке публикации.

Я также добавлю небольшое описание и установлю точку входа нашего пакета в src/index.js, а также добавлю несколько ключевых слов, чтобы помочь людям найти наш пакет в списке npm search (Вы можете узнать больше о специфике работы с package.json в npm здесь).

Теперь файл package.json выглядит следующим образом:

{
  "name": "is-email-address",
  "version": "1.0.0",
  "description": "check whether a string is an email address",
  "main": "src/index.js",
  "scripts": {
    "test": "jest"
  },
  "files": [
    "src"
  ],
  "keywords": [
    "email",
    "is-email-address",
    "is-email"
  ],
  "author": "Omar Baabouj <baabouj.dev@gmail.com>",
  "license": "ISC",
  "devDependencies": {
    "jest": "^28.0.3"
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вернемся к терминалу, давайте сначала войдем в npm, выполнив команду:

npm login
Войти в полноэкранный режим Выйти из полноэкранного режима

Вам будет предложено ввести имя пользователя, пароль и email. Как только вы их введете, вы успешно вошли в систему!

Теперь перейдем к последнему шагу — выполним команду для публикации нашего пакета:

npm publish
Войти в полноэкранный режим Выйти из полноэкранного режима

И вуаля! Вы только что опубликовали пакет npm 🎉.

Если у вас есть какие-либо мысли или вы заметили какие-либо ошибки, пожалуйста, напишите мне @baabouj_ в Twitter.

Вы можете найти исходный код этой статьи в этом репозитории или проверить его на npm

Спасибо 😁

Оцените статью
devanswers.ru
Добавить комментарий