npm系列：package.json

野性酷女 2022-09-09 04:45 7阅读 0赞

1、[关于packag.json的基础知识][packag.json]

[这还是我最熟悉的package.json吗？][packag.json]

2、[npm发包流程][npm]

[npm发包流程 - 知乎][npm]

3、sh: vue-cli-service: command not found

[mac 报错：sh: vue-cli-service: command not found\_充电五分钟...-CSDN博客][mac _sh_ vue-cli-service_ command not found_...-CSDN]

**一、在开发npm包，或者库的时候，package.json以下属性的配置很重要：**

**1）files：**定义了哪些文件应该被包括在 npm install 后的 node\_modules中（有些文件是自动暴露的），避免一些不必要的文件暴露到 node\_modules，比如开发一个组件库或者插件的时候，避免使用方多安装依赖

files值可以是文件夹名称，也可以是具体文件名称

// 可以
      "files": [
        "src"
      ]
       
      // 不可以，前面不能用绝对路径的写法
      "files": [
        "./src"
      ]

**注意**：如果在发布的包或者库中，没有在package.json中定义files字段，则会暴露源码

**2）dependencies、devDependencies**：

网上大多数文章说dependecies用于生产依赖、devDependencies用于开发环境依赖（通常是工具类的包），但是在做项目的时候，把依赖都安装到devDependencies时候，生产上项目也是可以正常跑起来。这是为什么呢？

因为webpack不管依赖是放在dependencies，还是devDependencies，只要在项目中引用了相关依赖，那么这些依赖就会出现在webpack的Dependency Graph( 依赖图)，在构建的时候，都会把依赖打包进构建结果中

**个人感觉**：这两个属性的作用主要在于开发插件、组件库的时候，发布npm包时候的区分。当发布了一个npm包即A包，第三方在npm install A包时，会将A包中package.json里面的depengdencies依赖都安装，devDependencies不会安装。这样的话可以最大限度避免第三方重复安装依赖。

举个例子：开发了一个基于Vue的插件，那么这个插件要在Vue搭建的项目中才能使用，即第三方的项目里面一定有安装了Vue依赖。为了避免用户在安装插件A的时候又装了一遍Vue，可以在开发A插件的项目的package.json将Vue定义在devDependencies中并结合peerDependencies就可以实现上面的功能了

**3）peerDependencies**：

在开发npm包的时候，**提示宿主环境**去安装满足插件A中peerDependencies所指定依赖的包，然后在插件import、require所依赖的包的时候，永远都是引用宿主环境统一安装的npm包，最终**解决插件与所依赖包不一致的问题，避免依赖重复安装**

**4）main**：指定引用模块的路径

**5）name：**包名

**6）verision：**包版本，每次修改内容在发布之前，要修改包版本

**7）repository（string，object）**：代码仓库的地址

**二、package.json中字段browser   module     main的优先级**

[package.json中你还不清楚的browser，module，main 字段优先级 - 浅笑· - 博客园][package.json_browser_module_main _ - _ -]

**1、文件优先级**：ejs>js

**2 、npm包使用环境**：

1）只允许在客户端使用

2）只允许在服务端使用

3）允许在客户端和服务端使用

**三、package.json文件中的字段含义和作用**

[一些字段的解释][Link 1]：[package.json里的一些属性讲解 - 知乎][Link 1]

**1）description（字符串）、keywords（字符串数组）**

这两个字段都是用来在**npm官网**上**搜索**的, 区别是一个是字符串, 一个是字符串数组。**npm**会对`description`做分词搜索, 而对于 `keywords`会做精准搜索

"description": "Reactive, component-oriented view layer for modern web interfaces.",
    "keywords": [
      "vue"
    ]

**2）name（string）、version（string）（option）**

在开发npm包的时候一定要写，因为**名字**加**版本号是包的**唯一标识；name表示包名；version表示包的版本。但是如果是项目的话，可以不写。

"name": "vue",
    "version": "2.6.14"

**需要注意下面几点**

**包名注意事项：**

A、包名必须少于等于 214 字符,
    B、包名不能以 .或_开头
    C、包名不能含有大写字母 (历史原因, 有的老包还有大写字母,新的已经不能用大写字母)
    D、另外, 一些URL规范里不允许的字符也不能用(具体哪些字符就需要大家自己查查了)
    E、建议不要在包名里包含js``node等字眼, 因为npm默认就是js或node的
    F、因为包名最终会用在require语句里, 所以尽可能短一些,但要注意能明确表达自己的用途
    G、你开发一个包之前, 最好自己上 npm官网看看名字是不是已经被占用了(很重要)

**版本号注意事项：对于版本号, npm使用业界标准的 `{major}.{feature}.{patch}` 模式**

major：做了重大改变

feature：增加新功能

patch：修复一些bug

**3）homepage（url）：**这个包的官网 （option）

"homepage": "https://github.com/vuejs/vue#readme"

**4）bugs（object）**：给用户提供上报缺陷的途径。可以是email或者直接给出链接（option）

bugs: { 
        "url" : "https://github.com/owner/project/issues",
        "email" : "project@hostname.com"
    }

**5）license（string）**：使我们可以定义适用于 *package.json* 所描述代码的许可证，有MIT 、 ISC（option）

"license": "MIT",

**6）author（object）、contributors（对象数组）（option）**

这是关于作者或者其他开发人员信息的字段。区别是**author**是单个对象, 而**contributors**是数组，每一项是一个对象

"author": { 
        "name" : "Barney Rubble", 
        "email" : "b@rubble.com", 
        "url" : "http://barnyrubble.tumblr.com/"
    },
    "contributors": [
      { 
          "name" : "Barney Rubble", 
          "email" : "b@rubble.com", 
          "url" : "http://barnyrubble.tumblr.com/"
      }, { 
          "name" : "Barney Rubble", 
          "email" : "b@rubble.com", 
          "url" : "http://barnyrubble.tumblr.com/"
      }
    ]

**7）funding**：捐助信息，一般用不到（option）

**8）files（array）**：在发布包的时候，很重要，指明包中应该包含哪些文件，支持目录和通配

"files": [
        "src",
        "dist/*.js",
        "types/*.d.ts"
      ]

发包时候，一些文件会自动忽略掉

.git
    CVS
    .svn
    .hg
    .lock-wscript
    .wafpickle-N
    .*.swp
    .DS_Store
    ._*
    npm-debug.log
    .npmrc
    node_modules
    config.gypi
    *.orig
    package-lock.json

**9）browser**：定义npm包在客户端下的入口文件

// browser 可定义成和 main/module 字段一一对应的映射对象，也可以直接定义为字符串
      "browser": {
        "./lib/index.js": "./lib/index.browser.js", // browser+cjs
        "./lib/index.mjs": "./lib/index.browser.mjs"  // browser+mjs
      },
    
      // "browser": "./lib/index.browser.js" // browser

**10）module**：定义npm包在node端的入口文件

"module": "lib/index.mjs", // module

**11）main**：定义npm包在客户端和node端的入口文件

"main": "lib/index.js",  // main

**12）bin**：定义了一系列可执行命令, 在全局安装的命令行包里尤其多见；带有`bin`信息的包, 在局部安装后, 可执行文件会在`./node_modules/.bin`下,；如果是全局安装, 可执行文件会在 `$PATH` 里对应`npm`那个目录下.

带有`bin`信息的包, 在局部安装后, 可执行文件会在`./node_modules/.bin`下,

如果是全局安装, 可执行文件会在 `$PATH` 里对应`npm`那个目录下

"bin": {
        "pm2": "./bin/pm2",
        "pm2-dev": "./bin/pm2-dev",
        "pm2-docker": "./bin/pm2-docker",
    }

**13）man（manuel手册）**：指定一个(或多个)文件, 用于执行`man {包名}`时, 用来指定当前模块的man文档的位置

"man" :[ "./doc/calc.1" ]

**14）directories**：是一个**object**, 包含了```lib``bin``man``doc``example``test```等属性,

主要是用来告诉用户某些功能目录放在哪里

"directories": {
        "bin": "./bin",
        "doc": "./doc",
        "lib": "./lib",

**15）repository（string，object）**：代码仓库的地址

"repository": "git+https://github.com/vuejs/vue.git"
    
    
    
     "repository": {
        "type": "git",
        "url": "git+https://github.com/vuejs/vue.git"
      },

**16）scripts**：指定了运行脚本命令的npm命令行缩写

"scripts": {
        "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
        "build": "node scripts/build.js",
        "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
        "build:weex": "npm run build -- weex",
    }

**17）config（object）**：添加命令行的环境变量

package.json内容如下：

{
      "name": "foo",
      "config" : { "port" : "8080" },
      "scripts" : { "start" : "node server.js" }
    }

在`server.js`脚本就可以引用`config`字段的中port的值：npm\_package\_config\_xxx，如npm\_package\_config\_port

http
      .createServer(...)
      .listen(process.env.npm_package_config_port)

用户执行`npm run start`命令时，这个脚本就可以得到值：

npm run start

修改端口号，（**但是实际中没有生效，待解决**） ：

$ npm config set foo:port 80

**18）dependencies、devDependencies（object）**：指定项目的依赖

两者的区分，如上面所述。

对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围，版本范围格式如下：

1、version Must match version exactly
    2、>version Must be greater than version
    3、>=version etc
    4、<version
    5、<=version
    6、~version "Approximately equivalent to version" See semver
    7、^version "Compatible with version" See semver
    8、1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
    9、http://... See 'URLs as Dependencies' below
    10、* Matches any version
    11、"" (just an empty string) Same as *
    12、version1 - version2 Same as >=version1 <=version2.
    13、range1 || range2 Passes if either range1 or range2 are satisfied.
    14、git... See 'Git URLs as Dependencies' below
    15、user/repo See 'GitHub URLs' below
    16、tag A specific version tagged and published as tag See npm dist-tag
    17、path/path/path See Local Paths below
    
    
    
    {
      "dependencies": {
        "foo": "1.0.0 - 2.9999.9999",
        "bar": ">=1.0.2 <2.1.2",
        "baz": ">1.0.2 <=2.3.4",
        "boo": "2.0.1",
        "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
        "asd": "http://asdf.com/asdf.tar.gz",
        "til": "~1.2",
        "elf": "~1.2.3",
        "two": "2.x",
        "thr": "3.3.x",
        "lat": "latest",
        "dyl": "file:../dyl"
      }
    }

a）固定版本号，形如：“2.0.1”

b）版本范围，由运算符+固定版本号组成，运算符如下：

< ：小于
    <=：小于等于
    > ：大于
    >=：大于等于
    =：等于. 该符号在实际中可以被忽略掉
    
    形如：
    >=1.2.7 <1.3.0：表示版本范围在大于等于1.2.7，小于1.3.0都可以
    1.2.7 || >=1.2.9 <2.0.0：可以是1.2.7,1.2.9等，但不能是1.2.8，2.0.0

c）预发布标签alpha

如：>1.2.3-alpha.3中带了预发布标识alpha，那么带预发布标识的版本号需要
    [major, minor, patch]一样，即1.2.3-alpha.4,但是1.2.4-alpha.4不满
    足条件。没有带预发布标识的版本只要满足大于1.2.3-alpha.3就可以了，比如：1.2.5

d）预发布标识beta

1.2.4-beta.0

e）连字符范围“-”：`X.Y.Z - A.B.C`

1、1.2.3 - 2.3.4 等价于 >=1.2.3 <=2.3.4
    2、如果在第一个范围内少了的部分，则用0替换：
      1.2 - 2.3.4 等价于 >=1.2.0 <=2.3.4
    3、如果在第二个范围内少了的部分，则范围都要从这个版本开始：
      1.2.3 - 2.3 等价于 >=1.2.3 <2.4.0-0
      1.2.3 - 2   等价于 >=1.2.3 <3.0.0-0

f）波浪号范围“～”：`~1.2.3`     `~1.2     ` `~1`

1、~1.2.3 等价于 >=1.2.3 <1.(2+1).0 即：>=1.2.3 <1.3.0-0
    2、~1.2 等价于 >=1.2.0 <1.(2+1).0 即：>=1.2.0 <1.3.0-0 (Same as 1.2.x)
    3、~1 等价于 >=1.0.0 <(1+1).0.0 := >=1.0.0 <2.0.0-0 (Same as 1.x)
    4、~0.2.3 := >=0.2.3 <0.(2+1).0 := >=0.2.3 <0.3.0-0
    5、~0.2 := >=0.2.0 <0.(2+1).0 := >=0.2.0 <0.3.0-0 (Same as 0.2.x)
    6、~0 := >=0.0.0 <(0+1).0.0 := >=0.0.0 <1.0.0-0 (Same as 0.x)
    7、~1.2.3-beta.2 := >=1.2.3-beta.2 <1.3.0-0 Note that prereleases in the 1.2.3 version will be allowed, if they are greater than or equal to beta.2. So, 1.2.3-beta.4 would be allowed, but 1.2.4-beta.2 would not, because it is a prerelease of a different [major, minor, patch] tuple

g）插入符号范围“^“：`^1.2.3`     `^0.2.5`       `^0.0.4`

1、^1.2.3 := >=1.2.3 <2.0.0-0
    2、^0.2.3 := >=0.2.3 <0.3.0-0
    3、^0.0.3 := >=0.0.3 <0.0.4-0
    4、^1.2.3-beta.2 := >=1.2.3-beta.2 <2.0.0-0 Note that prereleases in the 1.2.3 version will be allowed, if they are greater than or equal to beta.2. So, 1.2.3-beta.4 would be allowed, but 1.2.4-beta.2 would not, because it is a prerelease of a different [major, minor, patch] tuple.
    5、^0.0.3-beta := >=0.0.3-beta <0.0.4-0 Note that prereleases in the 0.0.3 version only will be allowed, if they are greater than or equal to beta. So, 0.0.3-pr.2 would be allowed.

**19）peerDependencies同上述**

**20）peerDependenciesMeta** 用户安装您的软件包时，如果peerDependencies尚未安装指定的软件包，npm将发出警告。该 peerDependenciesMeta字段用于向npm提供有关如何使用对等依赖项的更多信息

**21）bundledDependencies** 这些软件包名称将在发布软件包时捆绑在一起

**22）optionalDependencies** 如果找不到依赖项或安装失败，则希望npm继续，则可以将其放在 optionalDependencies对象中

**23）`engines`**字段指明了该模块运行的平台，比如 Node 的某个版本或者浏览器

{ "engines" : { "node" : ">=0.10.3 <0.12" } }

**24）os** 指定操作系统

{
        "os": [
            "darwin",
            "linux",
            "!win32"
        ]
    }

**25、cpu** 指定cpu

{
        "cpu": [
            "x64",
            "ia32",
            "!arm",
            "!mips"
        ]
    }

**26、private**

这个设置为`true`, 就会无法`npm publish。如果项目需要保密，则需要设置该字段为true，如果需要发包，则不能设置为true`

**27、publishConfig**，定义一个包在发布到`npm`时的一些配置项

[packag.json]: https://mp.weixin.qq.com/s/B3oppFdPYi6KD1zJhdv3XQ
[npm]: https://zhuanlan.zhihu.com/p/136603951
[mac _sh_ vue-cli-service_ command not found_...-CSDN]: https://blog.csdn.net/Eva3288/article/details/106380896/
[package.json_browser_module_main _ - _ -]: https://www.cnblogs.com/qianxiaox/p/14041717.html
[Link 1]: https://zhuanlan.zhihu.com/p/33928507