package.json과 가장 일반적인 스크립트 필드에 대해 이야기해 보겠습니다.

귀염둥이의 자기 구원 내
오픈 소스 도구 라이브러리: mdollar
이후 학습 준비 : unocss, 브라우저 가비지 수집 메커니즘(v8)

머리말

일상적인 개발에서 현재 프론트엔드 개발은 세 가지 주요 프레임워크로 대체되었으며 그 중 가장 주류는 vue와 React입니다. 이러한 프로젝트를 개발할 때 package.json 파일을 접해야 합니다. 하지만 정말로 이해하고 계십니까? 이 파일?

package.json이란 무엇입니까?

package.json 파일은 Node.js 프로젝트에 대한 메타데이터 및 종속성 정보가 포함된 JSON 형식 파일입니다. Node.js 시스템의 핵심이자 npm의 구성 파일입니다. package.json 파일을 사용하면 프로젝트에 필요한 외부 모듈을 쉽게 관리 및 설치할 수 있을 뿐만 아니라 명령줄에서 실행할 수 있는 일부 스크립트를 정의할 수도 있습니다. 또한 package.json 파일은 프로젝트 이름, 설명, 작성자, 라이선스 등에 대한 정보를 제공하므로 다른 개발자가 프로젝트를 더 쉽게 검색하고 사용할 수 있도록 해줍니다.

package.json 파일 구조에 대한 자세한 설명

package.json 파일은 키-값 쌍으로 구성된 객체로, 각 키-값 쌍에는 특정한 의미와 역할이 있습니다. 다음은 package.json 파일의 예입니다.

{
    
    
  "name": "my-project",
  "version": "1.0.0",
  "description": "一个测试项目",
  "main": "index.js",
  "scripts": {
    
    
    "start": "node index.js",
    "test": "mocha"
  },
  "dependencies": {
    
    
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    
    
    "mocha": "^9.1.3"
  },
  "author": "作者名字 <[email protected]>",
  "license": "MIT",
  "homepage": "https://example.com/my-project",
  "bugs": {
    
    
    "url": "https://github.com/myname/my-project/issues"
  },
  "repository": {
    
    
    "type": "git",
    "url": "https://github.com/myname/my-project.git"
  }
}

name: 패키지 이름입니다. 소문자여야 하며 한 단어만 포함해야 합니다. 하이픈과 밑줄을 포함할 수 있습니다. 패키지를 게시하려는 경우 이 필드는 버전 필드와 함께 고유 식별자를 형성하므로 필수입니다.
version: 의미론적 버전 사양을 준수해야 하는 패키지의 버전 번호, 즉 xxx 형식입니다. 이 필드는 이름 필드와 함께 고유 식별자를 형성하므로 패키지를 게시하려는 경우에도 필요합니다. 패키지를 게시할 계획이 없다면 두 필드는 모두 선택 사항입니다.
설명: 패키지에 대한 소개이며 문자열입니다. 이 필드는 다른 사람들이 npm 검색에서 귀하의 패키지를 찾는 데 도움이 됩니다.
main: 패키지의 항목 파일(보통 index.js)입니다. 이 파일은 다른 사람이 require() 함수를 사용하여 패키지를 소개할 때 로드됩니다.
scripts: npm run 명령어를 통해 실행될 수 있는 일부 스크립트를 정의하는 데 사용되는 개체입니다. 예를 들어, 시작 스크립트는 패키지를 시작하는 방법을 정의하고, 테스트 스크립트는 패키지를 테스트하는 방법을 정의합니다.
종속성: 패키지가 의존하는 다른 패키지와 해당 버전 범위를 나열하는 개체입니다. 이러한 종속성은 패키지를 설치하거나 게시할 때 자동으로 설치됩니다. 예를 들어 lodash는 일반적으로 사용되는 도구 라이브러리로 버전 범위를 ^4.17.21로 지정할 수 있으며 이는 4.17.21 이상 5.0.0 미만의 최신 버전을 설치한다는 의미입니다.
devDependency: 개발 또는 테스트 중에 패키지가 의존하는 다른 패키지와 해당 버전 범위를 나열하는 데 사용되는 개체이기도 합니다. 이러한 종속성은 개발 환경에만 설치되며 프로덕션 환경에는 영향을 미치지 않습니다. 예를 들어 mocha는 일반적으로 사용되는 테스트 프레임워크이며 해당 버전 범위를 ^9.1.3으로 지정할 수 있습니다.
작성자: 패키지의 작성자 정보이며 문자열 또는 개체일 수 있습니다. 문자열인 경우 일반적으로 작성자 이름과 이메일 주소가 포함됩니다. 객체인 경우 이름, 이메일, URL 등과 같은 필드를 포함할 수 있습니다.
라이센스: 패키지에서 사용하는 라이센스 유형으로, 일반적으로 문자열입니다. 예를 들어 MIT는 MIT 라이센스를 사용한다는 의미입니다.
홈페이지: 패키지의 프로젝트 홈페이지 주소이며 일반적으로 문자열입니다. 예를 들어 https://example.com/my-project는 프로젝트 홈페이지가 example.com에 있음을 의미합니다.
bugs: 패키지의 이슈 트래커 주소 또는 버그 보고를 위한 이메일 주소입니다. 문자열이나 객체일 수 있습니다. 문자열인 경우 일반적으로 이슈 트래커 주소를 나타냅니다. 객체인 경우 URL과 이메일이라는 두 개의 필드를 포함할 수 있습니다.
저장소: 패키지가 있는 코드 저장소(일반적으로 개체)의 주소와 유형입니다. 유형과 URL이라는 두 개의 필드를 포함할 수 있습니다. type은 git과 같은 웨어하우스 유형을 나타냅니다. url은 https://github.com/myname/my-project.git와 같은 창고 주소를 나타냅니다.

스크립트에 대한 자세한 설명

scripts는 아마도 우리가 가장 많이 접한 필드일 것입니다. scripts 필드에 대해 자세히 이야기해 보겠습니다. scripts 필드는 객체입니다. 각 속성은 스크립트 명령의 이름이고 해당 값은 수행할 명령입니다. 처형되다. 예를 들어:

{
    
    
  "scripts": {
    
    
    "build": "node build.js",
    "test": "mocha test/*.js",
    "start": "node index.js"
  }
}

여기에는 빌드, 테스트, 시작이라는 세 가지 스크립트 명령이 정의되어 있습니다. npm run build를 통해 node build.js를, npm run test를 통해 mocha test/*.js를, npm run start를 통해 node index.js를 실행할 수 있습니다.

npm run은 현재 프로젝트 아래의 node_modules/.bin 디렉터리를 PATH 환경 변수에 추가하므로 전체 경로를 지정하지 않고도 로컬에 설치된 모듈의 명령을 직접 사용할 수 있습니다. 예를 들어 위의 예에서는 node_modules/.bin/mocha를 작성하지 않고 mocha를 직접 사용할 수 있습니다.

스크립트 필드의 특수 스크립트 명령은 무엇입니까?

사용자 정의 스크립트 명령 외에도 스크립트 필드는 특정 상황에서 자동으로 실행되는 몇 가지 특수 스크립트 명령도 지원합니다. 이러한 특수 스크립트 명령은 다음과 같습니다.

start: npm start를 직접 실행하면 이 스크립트 명령이 실행됩니다. 일반적으로 프로젝트를 시작하는 데 사용됩니다.
test: npm test를 직접 실행하면 이 스크립트 명령이 실행됩니다. 일반적으로 테스트를 실행하는 데 사용됩니다.
install: 현재 프로젝트에서 npm install을 실행하면 설치가 완료된 후 이 스크립트 명령이 실행됩니다. 일반적으로 설치 후 일부 초기화 작업을 수행하는 데 사용됩니다.
uninstall: 현재 프로젝트에서 npm uninstall을 실행하면 제거가 완료된 후 이 스크립트 명령이 실행됩니다. 일반적으로 제거 후 일부 정리 작업을 수행하는 데 사용됩니다.
게시: 현재 프로젝트에서 npm 게시를 실행하면 게시하기 전에 이 스크립트 명령이 실행됩니다. 일반적으로 출시 전 검사 또는 준비 작업을 수행하는 데 사용됩니다.
prexxx 및 postxxx: 스크립트 명령을 실행할 때 해당 prexxx 또는 postxxx 스크립트 명령(xxx는 임의의 이름임)이 있는 경우 prexxx 또는 postxxx 스크립트 명령은 스크립트 명령 전후에 실행됩니다. 일반적으로 일부 사전 또는 사후 작업을 수행하는 데 사용됩니다.

스크립트 필드의 이점은 무엇입니까?

스크립트 필드를 사용하면 다음과 같은 이점이 있습니다.

일부 복잡한 명령은 단순화될 수 있습니다. 예를 들어 node build.js --env Production --minify --sourcemap 대신 npm run build를 사용할 수 있습니다.
다양한 운영 체제 및 환경에서 명령을 통합할 수 있습니다. 예를 들어 rm -rf dist 또는 del /s /q dist 등 대신 npm run clean을 사용할 수 있습니다.
npm에서 제공하는 일부 변수와 매개변수를 사용할 수 있습니다.예를 들어 npm_package_name을 사용하여 package.json의 name 필드 값을 가져오거나 npm_config_xxx를 사용하여 npm 구성의 xxx 필드 값을 가져올 수 있습니다.
다른 스크립트 명령을 쉽게 호출할 수 있습니다.예를 들어 npm run xxx를 사용하여 scripts 필드에 정의된 xxx 스크립트 명령을 호출하거나 npm explore – npm run xxx를 사용하여 종속 패키지에 정의된 xxx 스크립트 명령을 호출할 수 있습니다.

스크립트 항목의 주의사항은 무엇인가요?

스크립트 필드를 사용할 때 고려해야 할 몇 가지 사항은 다음과 같습니다.

스크립트 명령에 공백이나 특수 문자가 포함된 경우 "echo "Hello World"" 또는 'echo "Hello World"'와 같이 큰따옴표나 작은따옴표로 묶어야 합니다.
스크립트 명령에서 여러 명령을 사용해야 하는 경우 "echo "Hello" && echo "World"" 또는 "echo "Hello" || echo "World""와 같이 && 또는 ||를 사용하여 연결해야 합니다. .
환경 변수를 스크립트 명령에 사용해야 하는 경우 "echo $PATH" 또는 "echo %PATH%"와 같이 $ 또는 %로 인용해야 합니다.
주석을 스크립트 명령에 사용해야 하는 경우 "# 이것은 주석입니다" 또는 "// 이것은 주석입니다"와 같이 # 또는 //로 시작해야 합니다.

스크립트 필드의 예는 무엇입니까?

마지막으로, 영감과 참고 자료를 제공하기 위해 스크립트 필드의 몇 가지 예를 살펴보겠습니다.

예시 1: 스크립트 필드를 사용하여 프로젝트 컴파일 및 패키징

TypeScript 및 Webpack을 사용하여 개발된 프로젝트가 있다고 가정하면 스크립트 필드에 다음 스크립트 명령을 정의할 수 있습니다.

{
    
    
  "scripts": {
    
    
    "build": "npm run clean && npm run compile && npm run bundle",
    "clean": "rimraf dist",
    "compile": "tsc",
    "bundle": "webpack"
  }
}

이런 식으로 npm run build를 통해 원클릭으로 프로젝트를 컴파일하고 패키징할 수 있습니다. 안에:

빌드는 정리, 컴파일, 번들 스크립트 명령을 순서대로 실행하는 결합된 스크립트 명령입니다.
clean은 rimraf 모듈(rm -rf와 유사)을 사용하여 dist 디렉터리를 삭제하는 정리 스크립트 명령입니다.
compile은 tsc 모듈(TypeScript 컴파일러)을 사용하여 src 디렉터리의 모든 .ts 파일을 컴파일하고 dist 디렉터리에 출력하는 컴파일된 스크립트 명령입니다.
Bundle은 webpack 모듈(패키징 도구)을 사용하여 dist 디렉터리에 있는 모든 .js 파일을 패키징하고 dist 디렉터리에 출력하는 패키징 스크립트 명령입니다.

예시 2: 스크립트 필드를 사용하여 프로젝트 실행 및 디버그

Express와 Nodemon을 사용하여 개발된 프로젝트가 있다고 가정하면 스크립트 필드에 다음 스크립트 명령을 정의할 수 있습니다.

{
    
    
  "scripts": {
    
    
    "start": "node index.js",
    "dev": "nodemon index.js",
    "debug": "node --inspect index.js"
  }
}

이러한 방식으로 npm start, npm run dev 또는 npm run debug를 통해 프로젝트를 실행하고 디버깅할 수 있습니다. 안에:

start는 노드 모듈을 사용하여 프로젝트의 항목 파일인 index.js 파일을 실행하는 시작 스크립트 명령입니다.
dev는 개발용 스크립트 명령어로 nodemon 모듈을 이용해 index.js 파일을 실행하고 파일이 변경되면 자동으로 재시작하여 수정 효과를 실시간으로 확인할 수 있습니다.
debug는 디버깅 스크립트 명령입니다. node 모듈의 –inspect 매개변수를 사용하여 index.js 파일을 실행하고 디버그 모드를 켭니다. 이를 통해 Chrome DevTools 또는 기타 디버깅 도구를 사용하여 중단점을 지정하고 단계별로 실행할 수 있습니다. 변수 등을 봅니다.

예 3: 스크립트 필드를 사용하여 프로젝트 테스트 및 게시

Jest와 npm-publish-git-tag를 사용하여 개발된 프로젝트가 있다고 가정하면 스크립트 필드에 다음 스크립트 명령을 정의할 수 있습니다.

{
    
    
  "scripts": {
    
    
    "test": "jest",
    "prepublishOnly": "npm test",
    "publish": "npm-publish-git-tag"
  }
}

이러한 방식으로 npm test, npm 게시 또는 npm run 게시를 통해 프로젝트를 테스트하고 게시할 수 있습니다. 안에:

test는 jest 모듈(테스트 프레임워크)을 사용하여 테스트 디렉토리의 모든 테스트 케이스를 실행하고 테스트 결과 및 커버리지 보고서를 출력하는 테스트 유형의 스크립트 명령입니다.
prepublishOnly는 게시하기 전에 모든 테스트를 통과했는지 확인하기 위해 npm 게시 전에 실행되는 시험판 스크립트 명령입니다.
게시는 게시 스크립트 명령으로, npm-publish-git-tag 모듈(게시 도구)을 사용하여 프로젝트를 게시하고 package.json의 버전 필드와 동일한 git 태그를 자동으로 생성하여 푸시합니다. 원격 창고.

결론

이상이 package.json 및 scripts 필드에 대한 소개입니다. 모든 분들께 도움이 되기를 바랍니다. 스크립트 필드는 package.json 파일에서 다양한 스크립트 명령을 정의하고 관리할 수 있는 매우 강력하고 유연한 기능으로, 이를 통해 개발 및 유지 관리 프로젝트의 효율성과 품질을 향상시킵니다. 물론, 스크립트 분야에는 그 외에도 많은 용도와 기술이 있으므로 모두 나열하지는 않겠지만, 관심 있는 친구들은 스스로 탐색하고 시도해 볼 수 있습니다.

제 블로그 글을 읽어주신 모든 분들께 감사드리며, 유익하셨다면 좋아요나 댓글 부탁드립니다. 오류나 부족한 점이 있다고 생각되는 경우 지적해 주시면 시간이 지나면 수정하고 개선하도록 하겠습니다. 마지막으로 모두가 행복한 프로그래밍을 하길 바랍니다!