[{"data":1,"prerenderedAt":574},["ShallowReactive",2],{"content:\u002F2021\u002Fnpm-package-json":3,"surround:\u002F2021\u002Fnpm-package-json":563},{"id":4,"title":5,"body":6,"categories":534,"date":536,"description":17,"draft":537,"extension":538,"image":539,"meta":540,"navigation":542,"path":543,"permalink":539,"published":539,"readingTime":544,"recommend":539,"references":549,"seo":556,"sitemap":557,"stem":558,"tags":559,"type":561,"updated":539,"__hash__":562},"content\u002Fposts\u002F2021\u002Fnpm-package-json.md","npm & package.json",{"type":7,"value":8,"toc":517},"minimark",[9,14,18,21,42,63,67,74,82,85,88,99,107,111,120,133,143,146,161,169,177,190,198,206,209,226,237,241,246,264,272,291,294,297,335,338,344,357,360,367,373,377,380,414,417,423,427,436,442,445,448,454,458,465,471,475,501],[10,11,13],"h1",{"id":12},"npm-是什么","npm 是什么",[15,16,17],"p",{},"npm 是 Node.js 的包管理工具，Node.js package manger，通过 npm Node.js 可以方便地使用第三方开发的开源模块，同时也可以把自己的模块发布到 npm 供其它开发者使用。",[15,19,20],{},"npm 主要由三部分组成：",[22,23,24,36,39],"ol",{},[25,26,27,28,35],"li",{},"npm website：",[29,30,34],"a",{"href":31,"rel":32},"https:\u002F\u002Fnpmjs.com",[33],"nofollow","npm website","，开发者查找发现 package 的站点",[25,37,38],{},"CLI（命令行）：开发者可以使用命令行工具和 npm 进行交互，对 package 进行安装、更新、删除等操作",[25,40,41],{},"registry（注册表）：package 及其元信息存储的数据库",[43,44,46],"alert",{"type":45},"info",[15,47,48,49,53,54,58,59],{},"注册表是一个巨大的数据库，保存了每个包（package）的信息。\n例如我们要查询 vue 包的信息，可以访问",[29,50,51],{"href":51,"rel":52},"https:\u002F\u002Fregistry.npmjs.org\u002Fvue",[33],"，就会看到 vue 模块所有版本的信息。\n模块名后面，还可以跟上版本号或者标签，用来查询某个具体版本的信息，例如：",[29,55,56],{"href":56,"rel":57},"https:\u002F\u002Fregistry.npmjs.org\u002Fvue\u002F3.0.0",[33]," 查看 vue 3.0.0 版本的信息\n具体用法就是，",[60,61,62],"code",{"code":62},"https:\u002F\u002Fregistry.npmjs.org\u002F模块名\u002F版本号",[64,65,66],"h2",{"id":66},"yarn",[15,68,69,73],{},[29,70,66],{"href":71,"rel":72},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fyarn",[33]," 是 Facebook 2017 年推出的和 npm 功能类似的包管理工具，主要解决当时 npm 的几个核心问题",[22,75,76,79],{},[25,77,78],{},"安装包不够快速与稳定",[25,80,81],{},"存在安全隐患",[15,83,84],{},"同时 yarn 的 cli 工具提供了更简单的命令，当然面对 yarn 带来的压力，npm 在 5.0 后提供了类似的改进，两者现在差距不再巨大，开发者可以根据个人习惯和项目规范自由选择（我个人更喜欢使用 yarn）",[64,86,87],{"id":87},"npx",[15,89,90,91,94,95,98],{},"npm 从5.2版本开始，增加了 npx 命令，npx 想要解决的主要问题，就是调用项目内部安装的模块。原理很简单，就是运行的时候，会到",[60,92,93],{"code":93},"node_modules\u002F.bin","路径和环境变量",[60,96,97],{"code":97},"$PATH","里面，检查命令是否存在；如果存在，则执行；不存在，则进行临时安装，然后执行，执行完毕后将包删除。",[15,100,101,102],{},"对 npx 的详细介绍见",[29,103,106],{"href":104,"rel":105},"http:\u002F\u002Fwww.ruanyifeng.com\u002Fblog\u002F2019\u002F02\u002Fnpx.html",[33],"npx使用教程",[10,108,110],{"id":109},"packagejson","package.json",[15,112,113,114,119],{},"npm 通过 Node.js 模块根目录的 package.json 文件获取模块元数据和依赖关系等，例如",[29,115,118],{"href":116,"rel":117},"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fblob\u002Fmaster\u002Fpackages\u002Freact\u002Fpackage.json",[33],"react 的 package.json"," 包含如下信息",[43,121,122],{"type":45},[15,123,124,125,128,129,132],{},"可以通过",[60,126,127],{"code":127},"npm init -y","或者",[60,130,131],{"code":131},"yarn init -y","生成一份默认的 package.json 配置",[134,135,140],"pre",{"className":136,"code":138,"language":139,"meta":118},[137],"language-json","{\n  \"name\": \"react\",\n  \"description\": \"React is a JavaScript library for building user interfaces.\",\n  \"keywords\": [\n    \"react\"\n  ],\n  \"version\": \"17.0.3\",\n  \"homepage\": \"https:\u002F\u002Freactjs.org\u002F\",\n  \"bugs\": \"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fissues\",\n  \"license\": \"MIT\",\n  \"files\": [\n    \"LICENSE\",\n    \"README.md\",\n    \"build-info.json\",\n    \"index.js\",\n    \"cjs\u002F\",\n    \"umd\u002F\",\n    \"jsx-runtime.js\",\n    \"jsx-dev-runtime.js\",\n    \"unstable-shared-subset.js\"\n  ],\n  \"main\": \"index.js\",\n  \"exports\": {\n    \".\": {\n      \"react-server\": \".\u002Funstable-shared-subset.js\",\n      \"default\": \".\u002Findex.js\"\n    },\n    \".\u002Findex\": {\n      \"react-server\": \".\u002Funstable-shared-subset.js\",\n      \"default\": \".\u002Findex.js\"\n    },\n    \".\u002Fbuild-info.json\": \".\u002Fbuild-info.json\",\n    \".\u002Fjsx-runtime\": \".\u002Fjsx-runtime.js\",\n    \".\u002Fjsx-dev-runtime\": \".\u002Fjsx-dev-runtime.js\",\n    \".\u002F\": \".\u002F\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact.git\",\n    \"directory\": \"packages\u002Freact\"\n  },\n  \"engines\": {\n    \"node\": \">=0.10.0\"\n  },\n  \"dependencies\": {\n    \"loose-envify\": \"^1.1.0\",\n    \"object-assign\": \"^4.1.1\"\n  },\n  \"browserify\": {\n    \"transform\": [\n      \"loose-envify\"\n    ]\n  }\n}\n","json",[60,141,138],{"__ignoreMap":142},"",[64,144,145],{"id":145},"name",[15,147,148,149,152,153,156,157,160],{},"name 是模块的唯一标识，安装、使用模块都需要使用模块的 name，可以使用字母（只能使用小写字母）、数字、",[60,150,151],{"code":151},"_","、",[60,154,155],{"code":155},"-","和",[60,158,159],{"code":159},".","，例如安装和使用 vue 需要用到如下命令",[134,162,167],{"className":163,"code":165,"language":166,"meta":142},[164],"language-shell","yarn add vue\n","shell",[60,168,165],{"__ignoreMap":142},[134,170,175],{"className":171,"code":173,"language":174,"meta":142},[172],"language-js","import {inject, Ref} from 'vue'\n","js",[60,176,173],{"__ignoreMap":142},[15,178,179,180,183,184,156,186,189],{},"可以通过 scope 组织具有相关性的模块，模块名义",[60,181,182],{"code":182},"@","开头的包就是一个 scoped package，scope 就是",[60,185,182],{"code":182},[60,187,188],{"code":188},"\u002F","之间的内容",[134,191,196],{"className":192,"code":194,"language":195,"meta":142},[193],"language-raw","@scope\u002Fproject-name\n","raw",[60,197,194],{"__ignoreMap":142},[15,199,200,201],{},"例如",[29,202,205],{"href":203,"rel":204},"https:\u002F\u002Fgithub.com\u002Fantvis\u002FG2Plot\u002Fblob\u002Fmaster\u002Fpackage.json",[33],"@antv\u002Fg2plot",[64,207,208],{"id":208},"version",[15,210,211,212,217,218,221,222,225],{},"版本号遵从",[29,213,216],{"href":214,"rel":215},"https:\u002F\u002Fsemver.org\u002Flang\u002Fzh-CN\u002F",[33],"语义化版本规范","，使用",[60,219,220],{"code":220},"x.y.z","形式，对应",[60,223,224],{"code":224},"主版本.次版本.修订版本"," ，版本号递增规则如下：",[22,227,228,231,234],{},[25,229,230],{},"主版本（major）：当你做了不兼容的 API 修改，一般改动很大，不兼容低版本",[25,232,233],{},"次版本（minor）：当你做了向下兼容的功能性新增，兼容同一个大版本的 API 和用法",[25,235,236],{},"修订版本（patch）：当你做了向下兼容的问题修正，一般用来修复 bug",[238,239,240],"h3",{"id":240},"先行版本",[15,242,243,245],{},[60,244,220],{"code":220},"格式是模块正式版本，重要模块为了保证稳定，会在放出正式版本之前提供先行版本",[247,248,249,252,255,258,261],"ul",{},[25,250,251],{},"alpha: 内部版本",[25,253,254],{},"beta: 公测版本",[25,256,257],{},"rc: Release candidate，正式版本的候选版本",[25,259,260],{},"stable: 稳定版",[25,262,263],{},"csp",[15,265,266,267],{},"例：npm 上 vue ",[29,268,271],{"href":269,"rel":270},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue",[33],"部分版本记录",[273,274,275],"blockquote",{},[15,276,277,278,282,283,286,287,290],{},"这种特殊版本除非开发者",[279,280,281],"strong",{},"精确声明使用","，例如",[60,284,285],{"code":285},"npm install vue@3.0.0-rc.13","，否则",[60,288,289],{"code":289},"npm install","不会自动安装对应版本内容",[238,292,293],{"id":293},"快捷命令",[15,295,296],{},"npm 提供了快捷升级命令",[247,298,299,305,311,317,323,329],{},[25,300,301,302],{},"升级主版本号：",[60,303,304],{"code":304},"npm version major",[25,306,307,308],{},"升级次版本号：",[60,309,310],{"code":310},"npm version minor",[25,312,313,314],{},"升级修订版本号：",[60,315,316],{"code":316},"npm version patch",[25,318,319,320],{},"设置版本号为指定的版本号：",[60,321,322],{"code":322},"npm version 版本号",[25,324,325,326],{},"升级先行版本号：",[60,327,328],{"code":328},"npm version prerelease",[25,330,331,332],{},"升级先行版本号并指定先行版本的名字：",[60,333,334],{"code":334},"npm version prerelease --preid=\u003Cprerelease-id>",[15,336,337],{},"示例：",[134,339,342],{"className":340,"code":341,"language":166,"meta":142},[164],"# 假定现在的版本号是1.1.1\nnpm version major  # 2.0.0\nnpm version minor  # 1.2.0\nnpm version patch  # 1.1.2\nnpm version prerelease # 1.1.2-0\nnpm version prerelease --preid=alpha # 1.1.2-alpha.0\nnpm version 4.1.2  # 4.1.2\n",[60,343,341],{"__ignoreMap":142},[43,345,346],{"type":45},[15,347,348,349,352,353,356],{},"执行",[60,350,351],{"code":351},"npm version","修改完版本号之后，还会默认执行 git add -> git commit -> git tag 操作，commit 的信息和为 tag 均为版本号，且该步骤应在",[60,354,355],{"code":355},"npm publish","之前进行。",[64,358,359],{"id":359},"tag",[15,361,362,363,366],{},"npm 中的 tag 类似于 git 中的 branch ，发布者可以在指定的 tag 上进行发版，使用者可以选择指定 tag 来安装，默认的 tag 是",[60,364,365],{"code":365},"latest","。这对于我们日常开发非常有用，很多时候我们想要发布版本来进行验证功能，但是又不想影响正在使用的人，我们就可以利用 tag 和先行版本来进行发包。",[134,368,371],{"className":369,"code":370,"language":166,"meta":142},[164],"npm publish --tag alpha  # 发版到名为 alpha 的 tag 上\nnpm i \u003Cpackage>@\u003Ctag>    # 从指定 tag 上安装包\n",[60,372,370],{"__ignoreMap":142},[64,374,376],{"id":375},"dependencies-devdependencies","dependencies & devDependencies",[15,378,379],{},"dependencies 和 devDependencies 字段用来表示模块的依赖和开发环境依赖，模块依赖的版本号有些几种不同写法，来保证安装的时候使用对应的版本",[22,381,382,387,393,399,408],{},[25,383,384,386],{},[60,385,220],{"code":220}," 使用精确版本号",[25,388,389,392],{},[60,390,391],{"code":391},"*"," 任意版本，第一次安装会使用模块最新版本",[25,394,395,398],{},[60,396,397],{"code":397},"^x.y.z"," x 位锁死，y、z 位使用最新版本",[25,400,401,156,404,407],{},[60,402,403],{"code":403},"3.x",[60,405,406],{"code":406},"^3.0.0","含义相同，x 位使用指定版本，y、z 位使用最新",[25,409,410,413],{},[60,411,412],{"code":412},"~x.y.z"," x、y 锁定，z 位使用最新版本",[15,415,416],{},"npm 提供了快捷命令，可以在安装的时候就自动把对应内容写到 package.json 中",[134,418,421],{"className":419,"code":420,"language":166,"meta":142},[164],"npm install \u003Cpackage_name> --save # 安装模块并写入 dependencies\nnpm install \u003Cpackage_name> --save-dev # 安装模块并写入 devDependencies\n",[60,422,420],{"__ignoreMap":142},[64,424,426],{"id":425},"peerdependencies","peerDependencies",[15,428,429,430,435],{},"有时候模块需要与宿主模块共享依赖，也就是有可能会用到某个模块，但自己不安装，希望宿主环境安装的时候使用 peerDependencies 声明，比如 ",[29,431,434],{"href":432,"rel":433},"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fblob\u002Fmaster\u002Fpackages\u002Freact-dom\u002Fpackage.json",[33],"react-dom 的 package.json"," 的使用",[134,437,440],{"className":438,"code":439,"language":139,"meta":142},[137],"\"dependencies\": {\n  \"loose-envify\": \"^1.1.0\",\n  \"object-assign\": \"^4.1.1\",\n  \"scheduler\": \"^0.20.1\"\n},\n\"peerDependencies\": {\n  \"react\": \"17.0.3\"\n}\n",[60,441,439],{"__ignoreMap":142},[64,443,444],{"id":444},"repository",[15,446,447],{},"repository 用来指定模块源代码信息",[134,449,452],{"className":450,"code":451,"language":139,"meta":142},[137],"\"repository\": {\n  \"type\": \"git\",\n  \"url\": \"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact.git\",\n  \"directory\": \"packages\u002Freact\"\n}\n",[60,453,451],{"__ignoreMap":142},[64,455,457],{"id":456},"main-字段","main 字段",[15,459,460,461,464],{},"main 字段用来标识模块的默认入口文件，比如 react ",[60,462,463],{"code":463},"main: \"index.js\""," ，下面两句写法含义相同",[134,466,469],{"className":467,"code":468,"language":174,"meta":142},[172],"const react = require('react');\nconst react = require('react\u002Findex.js');\n",[60,470,468],{"__ignoreMap":142},[10,472,474],{"id":473},"发布-package","发布 package",[22,476,477,485,496],{},[25,478,479,480,484],{},"在 ",[29,481,483],{"href":31,"rel":482},[33],"npmjs.com"," 上注册账号",[25,486,487,488,491,492,495],{},"在",[279,489,490],{},"命令行","使用",[60,493,494],{"code":494},"npm login","登录",[25,497,491,498,500],{},[60,499,355],{"code":355},"进行发布",[43,502,504],{"type":503},"warning",[15,505,506,507,509,510,128,513,516],{},"在进行",[60,508,355],{"code":355},"操作前，请确认使用的是 npm 官方源，如果当前使用的是非官方源，可以使用",[60,511,512],{"code":512},"npm config set registry https:\u002F\u002Fregistry.npmjs.org",[60,514,515],{"code":515},"nrm","切换至 npm 官方源",{"title":142,"searchDepth":518,"depth":518,"links":519},4,[520,522,523,524,529,530,531,532,533],{"id":66,"depth":521,"text":66},2,{"id":87,"depth":521,"text":87},{"id":145,"depth":521,"text":145},{"id":208,"depth":521,"text":208,"children":525},[526,528],{"id":240,"depth":527,"text":240},3,{"id":293,"depth":527,"text":293},{"id":359,"depth":521,"text":359},{"id":375,"depth":521,"text":376},{"id":425,"depth":521,"text":426},{"id":444,"depth":521,"text":444},{"id":456,"depth":521,"text":457},[535],"学习笔记","2021-06-17",false,"md",null,{"comments":537,"slots":541},{},true,"\u002F2021\u002Fnpm-package-json",{"text":545,"minutes":546,"time":547,"words":548},"9 min read",8.035,482100,1607,[550,553],{"title":551,"link":552},"那些我们必须掌握的npm知识","https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6956025049254428680",{"title":554,"link":555},"NPM & package.json","https:\u002F\u002Fwww.yuque.com\u002Fsunluyong\u002Fnode\u002Fnpm",{"title":5,"description":17},{"loc":543},"posts\u002F2021\u002Fnpm-package-json",[560,110],"npm","tech","SsvblPOrGqysEYhgxBCQbI6ev6xmdzqfX6nQhlsP0BM",[564,569],{"title":565,"path":566,"stem":567,"date":568,"type":561,"children":-1},"Google 搜索技巧","\u002F2021\u002Fgoogle-search-skills","posts\u002F2021\u002Fgoogle-search-skills","2021-03-01 11:28:30",{"title":570,"path":571,"stem":572,"date":573,"type":561,"children":-1},"第三方应用授权：OAuth 2.0","\u002F2021\u002Foauth2","posts\u002F2021\u002Foauth2","2021-06-21",1793699839998]