TypeScript 및 의미 체계 버전 관리를 사용하여 npm 라이브러리 생성 및 게시

? 최소한의 코드 작성 및 게시

npm에 라이브러리를 게시하려면 다음이 필요합니다.

1. npm 계정; 여기에서 가입하실 수 있습니다.

2. 프로젝트로서의 코드; 즉, 코드 디렉터리에 이름과 버전이 지정된 package.json이 있습니다. 다음을 통해 이 파일을 생성할 수 있습니다.
   

npm init

1. 프로젝트의 index.js 사용자가 함수를 가져올 수 있도록 하려면 함수를 내보내야 한다는 점을 기억하세요.

참고: 스크립트 이름이 index.js가 아니고 프로젝트 루트에 배치된 경우 package.json에서 "main" 속성을 지정해야 합니다. 자세한 내용은 이 답변을 참조하세요.

npm에서 이름을 사용했다면 @name-or-org/your-lib와 같은 접두사를 추가할 수 있습니다. 이것이 요즘 대부분의 다른 도서관이 하는 일입니다.

참고용으로 제 최소한의 예시를 확인하실 수 있지만, 이보다 더 멋진 글을 작성하실 수 있을 거라 믿습니다.

마지막으로 CLI 명령을 사용하여 게시합니다.

npm publish

접두사를 사용하여 패키지 이름을 설정하는 사람들에 대한 참고 사항: 반드시 npm 사용자 이름 또는 npm에 등록한 조직 이름이어야 합니다. 예를 들어 @remi_guan을 내 접두어로 사용할 수 있지만 다른 접두사는 사용할 수 없습니다.

또한 npm 게시 --access public을 실행해야 합니다. 왜냐하면 npm은 유료 기능인 비공개 패키지를 게시하려고 한다고 생각하기 때문입니다.

이 출력은 성공했음을 의미합니다. 하지만 문제가 발생하면 Google에서 검색하여 문제를 해결할 수 있습니다. 자신만의 라이브러리를 사용하는 방법은 다음과 같습니다.

이 가이드를 따랐다면 대신 자신의 라이브러리를 사용해 보세요.

또한 @backendbro에 이보다 훨씬 자세한 가이드가 있다는 것을 알았습니다. 더 알고 싶으시다면

코드를 게시한 후 코드를 업데이트하려면 npm 게시를 다시 실행할 수 있습니다. 단, 게시하기 전에 package.json의 버전 속성을 업데이트하고 Semantic Versioning을 준수하시기 바랍니다.

꼭 드셔보시길 추천드려요! 라이브러리의 v1.0.1 또는 v1.1.0을 게시하고 방금 수행한 것과 같은 다른 프로젝트에서 사용할 수 있습니까? npm 라이브러리 버전을 업데이트하는 방법을 알 수 있나요?

? 타입스크립트 사용

지금까지 우리가 만든 이 라이브러리는 현대적이지 않습니다. 유형 선언이 부족하여 라이브러리를 사용하는 사람들이 타이핑으로 강조 표시될 수 없습니다. 또한 사람들은 일반적으로 ECMAScript 구문과 함께 TypeScript를 사용합니다. 차이점에 대해 알아보려면: Node.js 모듈: CommonJS 및 ECMAScript(Saisathish

하지만 이번 포스팅에서는 TypeScript의 자세한 설정은 생략하겠습니다. inapeace0의 "Typescript 라이브러리 개발 방법"과 같이 TypeScript 프로젝트를 초기화하는 방법을 배울 수 있는 좋은 튜토리얼이 많이 있습니다.

또한 이미 많은 최신 도구, 모범 사례 등을 통합한 alexjoverm/typescript-library-starter와 같은 템플릿 TypeScript 저장소를 사용할 수 있습니다.

TypeScript 라이브러리를 게시하는 경우 몇 가지 중요한 참고 사항을 언급하겠습니다.

1. 게시하기 전에 빌드하세요. 대중에게 게시해야 하는 경우 가장 일반적인 Node.js 환경을 사용하는 사람들은 .js 파일만 실행할 수 있습니다. 따라서 tsc, Rollup(또는 롤업을 사용하는 vite) 또는 webpack을 사용하여 코드를 컴파일해야 합니다. 누구라도 괜찮아요.

package.json의 모듈, 기본 또는 항목 속성을 사용하여 컴파일된 파일을 올바르게 가리켜야 합니다. 템플릿을 사용하여 하나씩 학습하는 것이 좋은 선택입니다. 이번에도 alexjoverm/typescript-library-starter가 이를 훌륭하게 지정했습니다.

1. .d.ts 파일을 포함하세요. 같은 이유로 사용자도 유형 서명에 액세스해야 합니다.

그러나 라이브러리가 Deno, Bun 또는 ts-node에서 실행된다고 확신한다면 위의 지침은 기본적으로 TypeScript 코드 실행을 지원하므로 무시해도 됩니다.

가이드에 따라 TypeScript 라이브러리를 만들고 npm에 게시해 보세요. 첫 번째 예처럼 여전히 쉽습니다. 가져오기 구문을 사용하여 다른 프로젝트로 테스트해야 하며 IDE로 유형 힌트를 볼 수 있습니다.

TypeScript를 사용하면 다음 구문으로 라이브러리를 작성할 수 있습니다.

그리고 게시한 후 TypeScript 덕분에 설치하고 가져올 수 있으며 유형 힌트를 볼 수 있습니다.

✨ Semantic Versioning

There's a common but slightly advanced problem waiting to be solved: Each time we update our package, we need to edit the version code.

That's annoying, especially if you're frequently updating your code.

However, there are tools to help you out.

• semantic-release: Fully automatic; you can integrate it into GitHub CI to automatically update the version code and publish to npm each time you update your code on GitHub.
• release-it: Also helps you bump the version, but it's simple to use (no need for CI knowledge); meanwhile, you don't configure it as fully automated.

I used ChatGPT to generate this summary comparing the two tools. For new coders, I'd suggest you try release-it, but semantic-release is also convenient if you know how to integrate it with CI.

In this post I'm going to show you how to use release-it, well, after you have made change to the project, simply run this in your project:

npx release-it

And choose is it a minor change or major change, then you're done!

Summary

So there you have it! We've walked through publishing a simple npm library, updating it, and even using TypeScript to make it more modern and robust. Remember to:

• Export your functions properly so others can use them.
• Update your version numbers following Semantic Versioning.
• Consider using TypeScript for better type safety and developer experience.
• Automate your releases with tools like release-it or semantic-release to save time.

Give it a try! Publish your own library, update it, and see how it feels to contribute to the npm ecosystem. Happy coding!

위 내용은 TypeScript 및 의미 체계 버전 관리를 사용하여 npm 라이브러리 생성 및 게시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!