release-it을 사용하여 릴리스 구성 요소 라이브러리를 자동으로 관리
이전 기사에서는 구성 요소 라이브러리를 패키징했으며 이 기사에서는 구성 요소 라이브러리를 게시하는 방법을 소개합니다. 물론 이 글에서 소개하는 것은 단순히 퍼블리싱만큼 단순한 것은 아니다.
구성 요소 라이브러리 출시
pnpm init게시하려는 패키지의 이름은 패키징을 따서 easyest로 지정하므로 생성은 easyest에서 수행됩니다.package.json
{
"name": "easyest",
"version": "1.0.0",
"main": "lib/index.js",
"module": "es/index.mjs",
"files": [
"es",
"lib"
],
"keywords": [
"easyest",
"vue3组件库"
],
"sideEffects": [
"**/*.css"
],
"author": "小月",
"license": "MIT",
"description": "",
"typings": "lib/index.d.ts",
}
몇 가지 필드 설명
- 기본
구성 요소 라이브러리 항목 파일
- 기준 치수
컴포넌트 라이브러리를 사용하는 환경에서 esmodule을 지원하는 경우 엔트리 파일은 이 필드가 됩니다.
- 파일
npm의 파일 디렉토리에 게시
- 부작용
패키징된 컴포넌트 코드가 포함하는 것과 같이 트리 쉐이킹으로 인한 부작용이 있는 코드는 무시하십시오.
import "./xxx.css"
이렇게 하면 빌드 도구가 이 코드에 부작용이 있는지(즉, 다른 가져온 파일의 코드가 사용되는지 여부) 알 수 없으므로 빌드할 때 모든 코드를 패키징하고 자동 주문형 가져오기 기능을 잃게 됩니다. 에스모듈. 따라서 sideEffects 필드를 추가하면 이 코드가 부작용을 일으키지 않는다는 것을 빌드 도구에 알릴 수 있으며 트리 쉐이킹을 안심할 수 있습니다.
- 타이핑
파일 항목을 선언
하고 패키징 디렉토리에서 pnpm publish를 실행합니다. 이때 npm 계정으로 로그인됩니다. 그렇지 않은 경우 공식 웹 사이트로 이동하여 등록할 수 있습니다. 게시하기 전에 코드를 제출해야 합니다. 창고 또는 접미사 추가 pnpm publish --no- 그냥 git-checks, npm에 로그인하여 방금 릴리스한 패키지를 확인하십시오.
자동 게시
위 릴리즈가 업데이트 될 때마다 수동으로 버전 업그레이드, 수동 태깅 등을 해야 하는 번거로움이 있습니다.
전역적으로 먼저 설치release-it
pnpm add release-it -D -w
그런 다음 가장 쉬운 패키지 파일 아래의 package.json에 스크립트 스크립트와 git 창고 주소를 추가합니다.
{
"name": "easyest",
"version": "1.0.1",
"main": "lib/index.js",
"module": "es/index.mjs",
"files": [
"es",
"lib"
],
"keywords": [
"easyest",
"vue3组件库"
],
"sideEffects": [
"**/*.css"
],
"author": "小月",
"license": "MIT",
"description": "",
"typings": "lib/index.d.ts",
"scripts": {
"release": "release-it"
},
"repository": {
"type": "git",
"url": "https://github.com/qddidi/easyest"
}
}
게시 작업을 위해 스크립트 디렉토리에 새 publish/index.ts를 만듭니다.
import run from "../utils/run";
import {
pkgPath } from "../utils/paths";
import {
series } from "gulp";
export const publishComponent = async () => {
run("release-it", `${
pkgPath}/easyest`);
};
export default series(async () => publishComponent());
스크립트 명령 gulp를 추가하여 루트 디렉터리의 package.json 파일에서 publish/index.ts를 실행합니다.
"scripts": {
"build:easyest": "gulp -f packages/components/script/build/index.ts",
"publish:easyest": "gulp -f packages/components/script/publish/index.ts"
},
그런 다음 변경 사항을 제출하고 실행하면 pnpm run publish:easyest버전 업그레이드 방법, 게시 여부, 태그 추가 여부 등을 선택할 수 있습니다. 
선택 후 구성 요소 라이브러리가 성공적으로 릴리스되고 github가 또한 성공적으로 태그를 추가했습니다.
