>  기사  >  웹 프론트엔드  >  이 기사에서는 nodejs의 package.json을 이해하는 데 도움이 됩니다.

이 기사에서는 nodejs의 package.json을 이해하는 데 도움이 됩니다.

青灯夜游
青灯夜游앞으로
2021-07-15 18:16:575112검색

이 글에서는 Node.js 프로젝트의 package.json 파일과 그 기능, 생성 방법, package.json 관리 방법, package.json과 package-lock.json의 차이점을 안내합니다.

이 기사에서는 nodejs의 package.json을 이해하는 데 도움이 됩니다.

프런트엔드 엔지니어링 및 자동화의 발전과 함께 모듈식 개발이 현재 프런트엔드의 트렌드가 되었으며, 완전한 Node.js 프로젝트에서는 package.json 파일이 어디에나 있습니다. 첫째, 프로젝트 루트 디렉터리에서 발견되고, 둘째, node_modules에도 자주 나타납니다. 그렇다면 이 파일은 무엇을 위한 것이며 어떤 역할을 하는지 오늘 공개하겠습니다. [추천 학습: "nodejs Tutorial"]

package.json 파일의 역할

Node.js 프로젝트를 생성하다 보면 package.json 파일을 만나게 됩니다. 프로젝트의 루트 디렉터리에 위치한 JSON 파일입니다.

package.json에는 프로젝트에 대한 중요한 정보가 포함되어 있습니다. 여기에는 사람이 읽을 수 있는 프로젝트 메타데이터(예: 프로젝트 이름 및 설명)와 기능적 메타데이터(예: 패키지 버전 번호 및 프로그램에 필요한 종속성 목록)가 포함되어 있습니다. Node.js 모듈부터 시작해 보겠습니다.

Node.js에서 모듈은 라이브러리나 프레임워크일 수도 있고 Node.js 프로젝트일 수도 있습니다. Node.js 프로젝트를 만들 때 이에 대한 설명은 다음과 같습니다. 모듈 파일은 package.json 파일입니다.

package.json은 Node.js 프로젝트에서 매우 중요한 구성 파일입니다. 이 파일은 종속성과 메타데이터를 추적하고, 현재 프로젝트에 필요한 다양한 모듈과 프로젝트의 구성 정보를 정의합니다. 많은 메타정보를 담고 있는 프로젝트나 모듈 패키지에 대한 설명입니다.

프로젝트를 실행하는 데 필요한 다양한 종속성 및 프로젝트 구성 정보(예: 프로젝트 이름, 프로젝트 버전, 프로젝트 실행 항목 파일, 실행된 스크립트, 종속 플러그인, 프로젝트 기여자, 라이선스 및 운영, 개발 및 프로젝트에 필요한 정보)를 정의합니다. 선택적으로 npm에 프로젝트를 게시합니다).

프로그램과 상호 작용하고 실행하는 방법에 대한 구성 및 설명의 중심입니다. npm과 원사가 프로젝트를 식별하고 프로젝트의 종속성을 처리하는 방법을 이해하는 데 사용됩니다.

npm cli는 프로젝트 수명 주기 전반에 걸쳐 package.json 파일을 생성하고 업데이트하는 데 도움이 되므로 package.json을 관리하는 가장 좋은 방법이기도 합니다. package.json 파일은 JSON 개체이며, 개체의 각 멤버는 현재 프로젝트의 설정입니다.

package.json은 프로젝트 수명 주기에서 여러 역할을 수행하며 그 중 일부는 npm에 게시된 패키지에만 적용되며 프로젝트 시작, 스크립트 실행, 종속성 설치, npm 레지스트리에 게시 및 기타 여러 가지 유용한 기능을 수행할 수 있습니다. 작업. . 프로젝트를 npm 레지스트리에 게시하지 않거나 다른 사람에게 공개적으로 제공하지 않더라도 package.json은 개발 프로세스에 여전히 중요합니다.

npm에서 패키지를 설치하려면 프로젝트에 package.json도 포함되어 있어야 합니다. 이것이 프로젝트에 필요한 주요 이유 중 하나입니다.

npm install 명령은 이 파일을 기반으로 하는 모든 종속 모듈을 다운로드합니다. package.json은 일반적으로 프로젝트의 루트 디렉터리에 있습니다.

package.json 파일 생성

package.json 파일 생성 수동 생성자동 생성 두 가지 방법이 있는데 일반적으로 자동 생성을 더 많이 사용합니다.

1. 수동으로 생성

프로젝트 디렉터리 생성

$mkdir node-demo>cd node-demo>touch package.json

프로젝트 루트 디렉터리에 직접 새 package.json 파일을 생성한 후 해당 내용을 입력합니다.

{
  "name": "express-admin",
  "version": "1.0.0",
  "description": "Express Admin",
  "keywords": [
    "server",
    "express",
    "compression"
  ],
  "homepage":"https://gitee.com/xunzhaotech/express-admin.git",
  "bugs":"https://github.com/owner/project/issues",
  "license": "MIT",
  "author": {
    "name": "Amber luyb",
    "email": "luyb@xunzhaotech.com",
    "url": "https://www.xunzhaotech.com"
  },
  "contributors": [
    {
      "name": "Amber luyb",
      "email": "luyb@xunzhaotech.com",
      "url": "https://gitee.com/xunzhaotech/express-admin.git"
    }
  ],
  "funding": [
    {
      "type" : "individual",
      "url" : "http://example.com/donate"
    },
    "http://example.com/donateAlso",
    {
      "type" : "patreon",
      "url" : "https://www.patreon.com/my-account"
    }
  ],
  "files":[".git",
    "CVS",
    ".svn",
    ".hg",
    ".lock-wscript",
    ".wafpickle-N",
    ".*.swp",
    ".DS_Store",
    "._*",
    "npm-debug.log",
    ".npmrc",
    "node_modules",
    "config.gypi",
    "*.orig,"],
  "main": "index.js",
  "browser":"",
  "bin": {
    "myapp": "./cli.js"
  },
  "man": [
    "./man/foo.1",
    "./man/bar.1"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitee.com/xunzhaotech/express-admin.git"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "server": "node server.js",
    "start": "node index.js",
    "dev": "nodemon",
    "lint": "eslint **/*.js"
  },
  "config": {
    "port": "8080"
  },
  "devDependencies": {
    "eslint": "^7.22.0",
    "mockjs": "^1.1.0",
    "nodemon": "^2.0.7",
    "vuepress": "^1.8.2"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.5",
    "debug": "^4.3.1",
    "express": "^4.17.1",
    "express-session": "^1.17.1"
  },
  "peerDependencies": {
    "tea": "2.x"
  },
  "peerDependenciesMeta": {
    "soy-milk": {
      "optional": true
    }
  },
  "bundledDependencies": [
    "renderized",
    "super-streams"
  ],
  "optionalDependencies":{},
  "engines": {
    "npm": "~1.0.20"
  },
  "os": [
    "darwin",
    "linux"
  ],
  "cpu": [
    "!arm",
    "!mips"
  ],
  "private": false,
  "publishConfig":{},
  "workspaces": [
    "./packages/*"
  ]
}

2. 자동으로

생성 xz-nuxt-admin, 在项目根目录下执行 yarn init -ynpm init -y 命令后,也可以输入 npm inityarn init -y이라는 새 명령을 생성할 때 이 명령은 대화형 방법을 사용하여 사용자가 몇 가지 질문에 답한 다음 프롬프트에 따라 해당 콘텐츠를 단계별로 입력해야 합니다. . 완료되면 프로젝트 디렉터리에 표시됩니다. 기본 package.json 파일을 추가합니다. 모든 질문 중 프로젝트명(name)과 프로젝트 버전(version)만 필수이며, 나머지는 선택사항입니다. 내용은 다음과 같습니다.

{
 "name": "my-test",   # 项目名称
  "version": "1.0.0", # 项目版本(格式:大版本.次要版本.小版本)
  "author": "",       # 作者
  "description": "",  # 项目描述
  "main": "index.js", # 入口文件
  "scripts": {        # 指定运行脚本命令的 npm 命令行缩写
      "test": "echo \"Error: no test specified\" && exit 1"
  },
"keywords": [],       # 关键词
"license": "ISC"      # 许可证
}

package.json 파일 구성 설명

우리는 package.json에 포함된 가장 일반적이고 중요한 필드 중 일부가 프로젝트의 구성 정보를 관리하거나 게시하는 데 사용된다는 것을 알고 있습니다. npm 및 기타 일부는 npm CLI가 애플리케이션을 실행하거나 종속성을 설치하는 데 도움이 됩니다. 실제로 우리가 다룬 것보다 더 많은 필드가 있으며 나머지 부분에 대해서는 설명서에서 알아볼 수 있지만 다음은 꼭 알아야 할 package.json 속성입니다.

1、必须字段

package.json 中有非常多的配置项,其中必须填写的两个字段分别是 name 字段和 version 字段,它们是组成一个 npm 模块的唯一标识。

name

name 字段定义了模块的名称,其命名时需要遵循官方的一些规范和建议:

  • 项目/模块名称,长度必须小于等于214个字符,不能以"."(点)或者"_"(下划线)开头,不能包含大写字母。
  • 模块名会成为模块 url、命令行中的一个参数或者一个文件夹名称,任何非 url 安全的字符在模块名中都不能使用(我们可以使用 validate-npm-package-name 包来检测模块名是否合法)。
  • 语义化模块名,可以帮助开发者更快的找到需要的模块,并且避免意外获取错误的模块;
  • 若模块名称中存在一些符号,将符号去除后不得与现有的模块名重复。

name 字段不能与其他模块名重复,我们可以执行以下命令查看模块名是否已经被使用:npm view 3dc77a3840d1fe4f8d7a0f0a6f003876或者,我们也可以去 npm 上输入模块名,如果搜不到,则可以使用该模块名。

version

  • 在package.json文件中,版本是非常重要的一个概念,npm 包中的模块版本都需要遵循 SemVer 规范,该规范的标准版本号采用 X.Y.Z 的格式,其中 X、Y 和 Z 均为非负的整数,且禁止在数字前方补零:
  • X 是主版本号(major):第一位就是主要版本号。一般来说,重大功能的更新,或功能的添加又不能向后兼容的情况会提升该版本号。
  • Y 是次版本号(minor):中间那一位是指次要版本号。一般来说,一些功能的添加,但又能向后兼容,这种更新会提升该版本号。
  • Z 是修订号(patch):最后一位就是补丁版本号。一般来说,如果是项目的一些BUG修复,会将该版本号提升。

当某个版本改动比较大、并非稳定而且可能无法满足预期的兼容性需求时,我们可能要先发布一个先行版本。

先行版本号可以加到主版本号.次版本号.修订号的后面,通过 - 号连接一连串以句点分隔的标识符和版本编译信息:

  • 内部版本(alpha)
  • 公测版本(beta)
  • 正式版本的候选版本rc(即 Release candiate)

我们可以执行以下命令查看模块的版本:

$npm view <packageName> version  # 查看某个模块的最新版本
$npm view <packageName> versions # 查看某个模块的所有历史版本

2、可选字段

可选字段是除去必填字段需要补充的项目信息

描述信息(description & keywords)

  • description:字段用于添加模块的描述信息,便于用户了解该模块,是一个字符串。它可以帮助人们在使用npm search时找到这个包。
  • keywords 项目关键字,是一个字符串数组。用于给模块添加关键字。它可以帮助人们在使用npm search时找到这个包。
  • 当我们使用 npm 检索模块时,会对模块中的 description 字段和 keywords 字段进行匹配,写好 package.json中的 description 和 keywords 将有利于增加我们模块的曝光率。

安装项目依赖(dependencies & devDependencies)

  • dependencies:字段指定了项目运行所依赖的模块(生产环境下,项目运行所需依赖)。
  • devDependencies:指定项目开发所需要的模块(开发环境下,项目所需依赖)。

说明:

我们在使用vue框架开发一个程序,开发阶段需要用到webpack来构建你的开发和本地运行环境。所以vue一定要放到dependencies里,因为以后程序到生产环境也要用。webpack则是你用来压缩代码,打包等需要的工具,程序实际运行的时候并不需要,所以放到devDependencies里就可以了。或者我们在写程序要用ES6标准,浏览器并不完全支持,所以你要用到babel来转换代码,babel放devDependencies。程序里有用到开源组件,比如你想用antd,antd要放dependencies。

简化终端命令(scripts)

scripts 字段是 package.json 中的一种元数据功能,它接受一个对象,对象的属性为可以通过 npm run 运行的脚本,值为实际运行的命令(通常是终端命令),如:

  "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate"
 },

将终端命令放入 scripts 字段,既可以记录它们又可以实现轻松重用。

定义项目入口(main)

main 字段是 package.json 中的另一种元数据功能,它可以用来指定加载的入口文件。假如你的项目是一个 npm 包,当用户安装你的包后,const ModuleName = require('module-name') 返回的是 main 字段中所列出文件的 module.exports 属性。当不指定main 字段时,默认值是模块根目录下面的index.js 文件。

发布文件配置(files)

files 字段用于描述我们使用 npm publish 命令后推送到 npm 服务器的文件列表,如果指定文件夹,则文件夹内的所有内容都会包含进来。我们可以查看下载的 antd 的 package.json 的files 字段,内容如下:

"files": [
   "dist",
   "lib",
   "es"
    ……
],

可以看到下载后的 antd 包是下面的目录结构中包含了  /dist/"lib/es文件,另外,我们还可以通过配置一个 .npmignore 文件来排除一些文件, 防止大量的垃圾文件推送到 npm 上。

定义私有模块(private)

一般公司的非开源项目,都会设置 private 属性的值为 true,这是因为 npm 拒绝发布私有模块,通过设置该字段可以防止私有模块被无意间发布出去。

指定模块适用系统(os)

使用 os 属性可以指定模块适用系统的系统,或者指定不能安装的系统黑名单(当在系统黑名单中的系统中安装模块则会报错)

"os" : [ "darwin", "linux" ] # 适用系统
"os" : [ "!win32" ] # 黑名单

在 node 环境下可以使用 process.platform 来判断操作系统

指定模块适用 cpu 架构(cpu)

我们可以用 cpu 字段更精准的限制用户安装环境

"cpu" : [ "x64", "ia32" ] # 适用 cpu
"cpu" : [ "!arm", "!mips" ] # 黑名单

在 node 环境下可以使用 process.arch 来判断 cpu 架构

指定项目 node 版本(engines)

防止因node 版本不同,导致会出现很多奇奇怪怪的问题(如某些依赖安装报错、依赖安装完项目跑不起来等)。

"engines": {
  "node": ">= 8.16.0",
  "npm": ">= 6.9.0"
},

需要注意的是,engines属性仅起到一个说明的作用,当用户版本不符合指定值时也不影响依赖的安装

自定义命令(bin)

bin 字段用来指定各个内部命令对应的可执行文件的位置。主要应用在脚手架搭建中,当package.json 提供了 bin 字段后,即相当于做了一个命令名和本地文件名的映射。 当用户安装带有 bin 字段的包时,

  • 如果是全局安装,npm 将会使用符号链接把这些文件链接到/usr/local/node_modules/.bin/;
  • 如果是本地安装,会链接到./node_modules/.bin/。

如果要使用 mfd-cli 作为命令时,可以配置以下 bin 字段:

"bin": {
  "mfd-cli": "./bin/cli.js"
  }

上面代码指定,mfd-cli 命令对应的可执行文件为 bin 子目录下的 cli.js,因此在安装了 mfd-cli 包的项目中,就可以很方便地利用 npm执行脚本:

"scripts": {
    start: &#39;node node_modules/.bin/mfd-cli&#39;
 }

这里看起来和 vue create/create-react-app之类的命令不太一样?是因为:当需要 node 环境时就需要加上 node 前缀如果加上 node 前缀,就需要指定mfd-cli 的路径 -> node_modules/.bin,否则 node mfd-cli会去查找当前路径下的 mfd-cli.js,这样肯定是不对。若要实现像 vue create/create-react-app之类的命令一样简便的方式,则可以在上文提到的 bin 子目录下可执行文件cli.js 中的第一行写入以下命令:#!/usr/bin/env node这行命令的作用是告诉系统用 node 解析,这样命令就可以简写成 mfd-cli 了。

设置应用根路径(homepage)

当我们使用 create-react-app 脚手架搭建的 React 项目,默认是使用内置的 webpack 配置,当package.json 中不配置 homepage 属性时,build 打包之后的文件资源应用路径默认是/

一般来说,我们打包的静态资源会部署在 CDN 上,为了让我们的应用知道去哪里加载资源,则需要我们设置一个根路径,这时可以通过 package.json 中的 homepage 字段设置应用的根路径。

当我们设置了 homepage 属性后:

{
    "homepage": "https://xxxx.cdn/project-name",
}

打包后的资源路径就会加上 homepage 的地址:/project-name/bundle.js

기타 구성

  • 작성자: 프로젝트 개발자, 해당 값은 "계정 이름 a3c18c2750da2dca8e004dcacf4b667b" 규칙을 따르는 npmjs.org 웹사이트의 유효한 계정 이름입니다(예: xunzhaotech@aliyun.com).
  • private: 비공개인지 여부를 true로 설정하면 npm이 게시를 거부합니다.
  • 라이선스: 사용자에게 사용 권한 및 제한 사항을 알리는 소프트웨어 라이선스 조건입니다.
  • bugs: 버그 제출 주소.
  • 기여자: 프로젝트 기여자.
  • repository: 프로젝트 창고 주소입니다.
  • 모듈: ES 모듈(즉, ES6) 모듈 방식으로 로드됩니다. ES6 모듈 솔루션이 없었던 초기에는 모두 CommonJS 사양을 따랐고, CommonJS 사양의 패키지는 항목을 표현했기 때문입니다. 차별화를 위해 모듈 방식을 추가했지만 ES6 모듈러 솔루션이 더 효율적이므로 먼저 모듈 필드가 있는지 확인하고 없으면 메인 필드만 사용합니다.
  • eslintConfig: EsLint는 파일 구성을 확인하고 자동으로 확인 내용을 읽습니다.
  • browserslist: 사용할 브라우저 버전 목록입니다.
  • style: 브라우저에서 사용할 때 스타일 파일의 위치는 스타일 파일 패키징 도구 Parcelify가 스타일 파일의 패키징 위치를 알고 있습니다.

package.json과 package-lock.json의 차이점

package.json이 있는데 왜 package-lock.json 파일이 필요한가요? node_modules 폴더가 없거나 삭제되었을 때 필요합니다. npm install이 모든 종속성을 다시 로드하면 package-lock.json을 통해 다운로드 주소 및 관련 종속성을 직접 표시할 수 있으며 다운로드 속도도 빨라지고 오류 보고도 쉽지 않습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 이 기사에서는 nodejs의 package.json을 이해하는 데 도움이 됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 掘金--快智岛에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제