-
vercel의 깃헙 next 프로젝 패키지.js 코드 분석Coding/vercel 2023. 11. 28. 16:35
packages/next/package.json 파일은 Next.js 프레임워크에 대한 구성 정보를 담고 있는 JSON 파일입니다. 이 파일은 Next.js의 메타데이터, 의존성, 스크립트 등을 정의합니다.
/*기본정보*/ { "name": "next", "version": "7.0.1", "description": "Minimalistic framework for server-rendered React applications", "main": "./dist/server/next.js", "license": "MIT", /*저장소 정보*/ "repository": "zeit/next.js", "bugs": "https://github.com/zeit/next.js/issues", "homepage": "https://github.com/zeit/next.js", /*파일포함 : 'file'필드는 패키지에 포함될 파일들을 나열*/ "files": [ "dist", "app.js", "asset.js", "babel.js", "client.js", "config.js", "constants.js", "document.js", "dynamic.js", "error.js", "head.js", "link.js", "prefetch.js", "router.js" "name": "nextjs-project", "private": true, /*작업공간 설정*/ "workspaces": [ "packages/*" ], /*실행 가능 파일:'bin'은 실행 가능한 파일의 경로를 지정*/ "bin": { "next": "./dist/bin/next" }, /*스크립트: 'scripts'는 다양한 작업을 자동화하기 위한 스크립트를 정의한다. 예로 'build', 'test', 'lint'등의 작업을 정의한다. lerna는 대규모 프로젝트에서 여러 자바스크립트 패키지를 관리하는 데 도움을 주는 도구로 단일 저장소에 여러 패키지가 있는 환경에서 유용하다. 주요 기능 통합된 워크플로우: 여러 패키지의 버전 관리, 의존성 설치, 링킹, 배포 등을 하나의 도구로 관리 의존성 관리: 패키지 간의 의존성을 효과적으로 관리하고, 변경된 패키지만 빌드하거나 업데이트하는 기능을 제공 버전 관리 및 배포: 각각의 패키지에 대한 버전을 독립적으로 관리하거나, 필요에 따라 통합적으로 관리할 수 있음 */ "scripts": { "build": "taskr", "release": "taskr release", "lerna": "lerna", "bootstrap": "lerna bootstrap", "pretestonly": "taskr pretest", "testonly": "cross-env NODE_PATH=test/lib jest \\.test.js", "posttestonly": "taskr posttest", "testall": "npm run testonly -- --coverage --forceExit --runInBand --verbose --bail", "pretest": "npm run lint && npm run flow", "pretest": "npm run lint", "test": "cross-env npm run testall || npm run testall", "coveralls": "nyc --instrument=false --source-map=false report --temp-directory=./coverage --reporter=text-lcov | coveralls", "flow": "flow check", "lint": "standard 'bin/*' 'client/**/*.js' 'examples/**/*.js' 'lib/**/*.js' 'pages/**/*.js' 'server/**/*.js' 'build/**/*.js' 'test/**/*.js'", "prepublish": "npm run release", "precommit": "lint-staged" "precommit": "lint-staged", "lint": "lerna run lint", "prepublish": "lerna run prepublish" }, "taskr": { "requires": [ "./taskfile-babel.js" ] "lint-staged": { "*.js": "standard", "bin/*": "standard" }, "standard": { "parser": "babel-eslint", @@ -55,73 +31,22 @@ "**/examples/with-mobx/**" ] }, "lint-staged": { "*.js": "standard", "bin/*": "standard" "jest": { "testEnvironment": "node", "roots": [ "test/" ] }, /*의존성: 'dependencies'프로덕션 환경에서 필요한 패키지들, 'devDependencies'개발 시 필요한 패키지들 babel은 자바스크립트 컴파일러로, 주로 최신 자바스크립트(ECMAScript) 코드를 이전 버전의 자바스크립트로 변환하는 데 사용된다. 이를 통해 개발자는 최신 언어 기능을 사용하면서도 다양한 브라우저와 환경에서의 호환성을 유지할 수 있다. 주요 기능 ES6 이상의 코드 변환: 최신 자바스크립트 문법(예:화살표 함수, 클래스, 모듈 구문 등)을 이전 버전의 자바스크립트로 변환함 JSX 및 React 지원: React 개발에 널리 사용되는 JSX 문법을 지원함 플러그인 및 프리셋: 다양한 플러그인과 프리셋을 통해 사용자 정의 변화을 적용할 수 있음 */ "dependencies": { "@babel/core": "7.0.0", "@babel/plugin-proposal-class-properties": "7.0.0", "devDependencies": { "@babel/plugin-proposal-object-rest-spread": "7.0.0", "@babel/plugin-syntax-dynamic-import": "7.0.0", "@babel/plugin-transform-runtime": "7.0.0", "@babel/preset-env": "7.0.0", "@babel/preset-react": "7.0.0", "@babel/runtime": "7.0.0", "@babel/runtime-corejs2": "7.0.0", "@babel/template": "7.0.0", "ansi-html": "0.0.7", "autodll-webpack-plugin": "0.4.2", "babel-core": "7.0.0-bridge.0", "babel-loader": "8.0.2", "babel-plugin-react-require": "3.0.0", "babel-plugin-transform-react-remove-prop-types": "0.4.15", "case-sensitive-paths-webpack-plugin": "2.1.2", "cross-spawn": "5.1.0", "del": "3.0.0", "etag": "1.8.1", "event-source-polyfill": "0.0.12", "find-up": "2.1.0", "fresh": "0.5.2", "friendly-errors-webpack-plugin": "1.7.0", "glob": "7.1.2", "hoist-non-react-statics": "2.5.5", "htmlescape": "1.1.1", "http-errors": "1.6.2", "http-status": "1.0.1", "launch-editor": "2.2.1", "loader-utils": "1.1.0", "minimist": "1.2.0", "mkdirp-then": "1.2.0", "nanoid": "1.2.1", "path-to-regexp": "2.1.0", "prop-types": "15.6.2", "prop-types-exact": "1.2.0", "react-error-overlay": "4.0.0", "recursive-copy": "2.0.6", "resolve": "1.5.0", "send": "0.16.1", "source-map": "0.5.7", "strip-ansi": "3.0.1", "styled-jsx": "3.1.0", "terser-webpack-plugin": "1.0.2", "unfetch": "3.0.0", "url": "0.11.0", "webpack": "4.20.2", "webpack-dev-middleware": "3.4.0", "webpack-hot-middleware": "2.22.3", "webpack-sources": "1.2.0", "webpackbar": "2.6.3", "write-file-webpack-plugin": "4.3.2" }, "devDependencies": { "@babel/preset-flow": "7.0.0", "@taskr/clear": "1.1.0", "@taskr/esnext": "1.1.0", "@taskr/watch": "1.1.0", "@zeit/next-css": "0.2.1-canary.1", "@zeit/next-sass": "0.2.1-canary.1", "@zeit/next-typescript": "1.1.0", "babel-core": "7.0.0-bridge.0", "babel-eslint": "9.0.0", "babel-jest": "23.4.2", "babel-plugin-transform-define": "1.3.0", @@ -138,6 +63,7 @@ "get-port": "3.2.0", "husky": "0.14.3", "jest-cli": "21.2.0", "lerna": "^3.4.0", "lint-staged": "4.2.3", "micro": "9.1.0", "mkdirp": "0.5.1", @@ -151,15 +77,5 @@ "standard": "11.0.1", "taskr": "1.1.0", "wd": "1.10.3" }, "peerDependencies": { "react": "^16.0.0", "react-dom": "^16.0.0" }, "jest": { "testEnvironment": "node", "roots": [ "test/" ] } }구성 요소
2.기본 정보:
- name: 패키지의 이름 (next)
- version: 패키지의 버전 (7.0.1)
- description: 패키지에 대한 간략한 설명
- main: 패키지의 메인 엔트리 파일 (./dist/server/next.js)
- license: 사용되는 라이선스 (MIT)
2. 저장소 정보:
- repository: 코드 저장소 위치 (zeit/next.js)
- bugs: 버그 리포트를 위한 링크
- homepage: 프로젝트 홈페이지 링크
3. 파일 포함: files 필드는 패키지에 포함될 파일들을 나열합니다.
4. 작업 공간 설정: workspaces는 여러 하위 패키지들을 관리하기 위한 설정입니다. (packages/*)
5. 실행 가능 파일: bin은 실행 가능한 파일의 경로를 지정합니다.
6. 스크립트: scripts는 다양한 작업을 자동화하기 위한 스크립트를 정의합니다. 예를 들어 build, test, lint 등의 작업을 정의하고 있습니다.
7. 의존성:
- dependencies: 프로덕션 환경에서 필요한 패키지들
- devDependencies: 개발 시 필요한 패키지들
8. 기타 설정:
- lint-staged, standard, jest 등 프로젝트에 필요한 추가 설정들을 포함합니다.
이 파일은 Next.js 프로젝트의 구조와 동작을 정의하는 중요한 부분입니다. 각 필드와 스크립트는 프로젝트의 빌드, 테스트, 배포 등 다양한 단계에서 중요한 역할을 합니다. 또한, 이 파일을 통해 Next.js 프로젝트가 어떤 외부 라이브러리에 의존하고 있는지, 어떻게 빌드되고 테스트되는지 등의 정보를 알 수 있습니다.
위 코드에서 lerna랑 babel
lerna와 babel은 둘 다 자바스크립트 프로젝트에서 널리 사용되는 도구입니다.
Lerna
Lerna는 대규모 프로젝트에서 여러 자바스크립트 패키지를 관리하는 데 도움을 주는 도구입니다. 주로 monorepo(단일 저장소에 여러 패키지가 있는) 환경에서 유용하게 사용됩니다. Lerna의 주요 기능은 다음과 같습니다:
- 통합된 워크플로우: 여러 패키지의 버전 관리, 의존성 설치, 링킹, 배포 등을 하나의 도구로 관리할 수 있습니다.
- 의존성 관리: 패키지 간의 의존성을 효과적으로 관리하고, 변경된 패키지만 빌드하거나 업데이트하는 기능을 제공합니다.
- 버전 관리 및 배포: 각각의 패키지에 대한 버전을 독립적으로 관리하거나, 필요에 따라 통합적으로 관리할 수 있습니다.
Babel
Babel은 자바스크립트 컴파일러로, 주로 최신 자바스크립트(ECMAScript) 코드를 이전 버전의 자바스크립트로 변환하는 데 사용됩니다. 이를 통해 개발자는 최신 언어 기능을 사용하면서도 다양한 브라우저와 환경에서의 호환성을 유지할 수 있습니다. Babel의 주요 기능은 다음과 같습니다:
- ES6 이상의 코드 변환: 최신 자바스크립트 문법(예: 화살표 함수, 클래스, 모듈 구문 등)을 이전 버전의 자바스크립트로 변환합니다.
- JSX 및 React 지원: React 개발에 널리 사용되는 JSX 문법을 지원합니다.
- 플러그인 및 프리셋: 다양한 플러그인과 프리셋을 통해 사용자 정의 변환을 적용할 수 있습니다.
lerna와 babel은 함께 사용되어 대규모, 복잡한 자바스크립트 프로젝트의 개발 및 유지보수를 용이하게 합니다. lerna는 프로젝트 관리 측면에서, babel은 코드 변환 및 호환성 측면에서 중요한 역할을 담당합니다.
