NPM 패키지 빌드, 테스트 및 게시

헬로월드👋

이 기사에서는 문자열이 이메일 주소인지 여부를 확인하기 위해 npm 패키지를 빌드, 테스트 및 게시할 것입니다. 그러니 우리가 어떻게 할지 알고 싶다면 안전벨트를 매고 갑시다 🚗

전제 조건:

시스템에 Nodejs가 설치되어 있어야 합니다(설치되어 있지 않은 경우 다운로드할 수 있습니다here).

npm 계정이 있습니다. 없으면 npmjs.com에서 계정을 만들 수 있습니다.

약간의 JavaScript 지식도 필요합니다.

🛠️ 빌드

먼저 코드를 보관할 디렉토리가 필요하므로 하나를 만들고 터미널로 연 다음 다음 명령을 실행하여 새 Nodejs 프로젝트를 초기화합니다.

npm init -y

이 명령은 나중에 편집할 기본값이 있는 package.json 파일을 생성합니다.

다음으로 디렉터리 안에 새 디렉터리를 만들고 이름을 src로 지정한 다음 src 안에 코드를 포함할 index.js 파일을 만듭니다.

이제 루트 디렉토리의 파일 구조는 다음과 같습니다.

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

src/index.js 파일 내부로 들어가 문자열을 인수로 받아 이메일 주소인지 확인하는 함수를 내보냅니다. 이를 위해 Regular Expressions(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 protected]")).toBe(true);
    expect(isEmail("[email protected]")).toBe(true);
    expect(isEmail("[email protected]")).toBe(true);
    expect(isEmail("[email protected]")).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에 나열된 대로 사람들이 패키지를 검색하는 데 도움이 되는 몇 가지 키워드를 추가할 것입니다. here에서 npm의 package.json 처리).

이제 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 <[email protected]>",
  "license": "ISC",
  "devDependencies": {
    "jest": "^28.0.3"
  }
}

터미널로 돌아가서 먼저 다음 명령을 실행하여 npm에 로그인하겠습니다.

npm login

사용자 이름, 비밀번호 및 이메일을 입력하라는 메시지가 표시됩니다. 추가하면 성공적으로 로그인됩니다!

이제 마지막 단계로 패키지를 게시하는 명령을 실행해 보겠습니다.

npm publish

그리고 짜잔! 방금 npm 패키지를 게시했습니다 🎉

생각이 있거나 실수를 발견한 경우 트위터로 메시지를 보내주세요.

이 문서의 소스 코드는 여기repo에서 찾거나 npm에서 확인할 수 있습니다.

감사합니다 😁