package.json

2018-09-20 本文已影响31人 DHFE

Node为前端工程化，模块化注入了新鲜的血液，而npm是其中关键的一环。对于刚接触这些新颖概念的我，此文作为学习笔记加强记忆帮助使用。

目前最新版本的Node环境已经集成了npm，下载Node便可使用了。

package.json：是一个用于包的依赖管理文件

package.json可以通过npm init命令生成。

执行命令后，它会像用户提问一系列问题，用于初始配置文件，当然即使你跳过此步骤，后续也可以继续修改。

愈要跳过此步骤：npm init -y

键入yes确认，生成json文件。

{
  "name": "studynpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在package.json中，有一些属性是必须写入的。即最少配置项

name
- 全部为小写字母
- 一个单词，无空格
- 允许半角破折号和下划线
version
- 遵循语义化版本控制规范（SemVer）
- 格式为：x.y.z
- z：bug修复，打补丁
- y：新的功能，向下兼容。
- x：新的版本发布，不向下兼容。

你可以通过set命令来提前设置好一些配置项。如：

npm set init.author.email "wombat@npmjs.com"
npm set init.author.name "ag_dubs"
npm set init.license "MIT"

Package.json 属性说明

name - 包名
version - 包的版本号
description - 包的描述
**homepage - 包的官网 url **
author - 包的作者姓名
contributors - 包的其他贡献者姓名
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js
keywords - 关键字(便于检索)

接下来演示一些基本用法。

在前端上古时期，没有包、模块等概念的时候，要在浏览器中使用jQuery最常见的做法就是，找到官网——复制or下载源码——贴入src这样的操作了。

那么，在node中，我们如何使用jQuery？

首先cd到项目目录，生成package.json文件，随后观察这个json文件，注意发现有什么改变。

{
  "name": "studynpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

CLI中键入npm install jquery
执行这条命令的时候，终端会链接到npm服务器，寻找是否存在这个名字的包。如果不存在，会返回error。

正确输入package name后，自动下载到当前目录下的node_modules目录中。

所有通过npm安装的包都会存放在当前项目node_modules目录下。

又安装了一个包

有一些包和工具必须全局安装（比如eslint和gulp）才能方便使用，这里要用到全局安装命令。

npm install -global <package name>
npm install -g <package name>

这样就会将包安装在根目录下。

那么现在，想要在HTML页面中引入jQuery，我们可以：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script>
        console.log($(document));
    </script>
</body>
</html>

浏览器打开：

那么问题来了，目录下文件那么多，我们怎么知道是/jquery/dist/jquery.js呢？
这些都写在了包自带的package.json中。

main属性就指定了这个包的入口文件，通俗的说，如果你想用它，从“这里”开始。

好了，现在假设你离职了，后续的人需要接管你的代码，那么他怎么知道你这个项目依赖什么包呢？靠的也是package.json。

现在回到install之前的package.json文件中，发现到了什么变化吗？

{
  "name": "studynpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "vue": "^2.5.17"
  }
}

多了一个属性，dependencies，翻译过来：依赖，顾名思义，这个属性就是管理你当前包的依赖的。
并且详细到，依赖的包的版本号也会纪录。

现在，我们手动删除node_modules目录。

现在想回到之前的开发环境怎么办？

既然有package.json，直接npm insatll。

又回来了，这样，别人需要知道你的依赖，直接发package.json文件给他就好了。

怎么知道一个包是否存在呢？
进入npm官网查询。

或者使用npm search

npm search

npm search命令用于搜索npm仓库，它后面可以跟字符串，也可以跟正则表达式。

以往的npm，将一个包保存入dependencies属性需要命令：npm install <package name> --save，也就是说，你要明确指定save in dependencies，它才会将此包作为依赖放入dependencies属性内。

新版本npm中，通过npm install安装的包都会自动添加进入dependencies，这是默认的。

如何更新依赖？

npm update

// 升级当前项目的指定模块
npm update [package name]

//升级全局安装的模块
npm update -global [package name]

它会先到远程仓库查询最新版本，然后查询本地版本。如果本地版本不存在，或者远程版本较新，就会安装。

使用-s或--save参数，可以在安装的时候更新package.json里面模块的版本号。

// 更新之前的package.json
dependencies: {
  package1: "^1.1.1"
}

// 更新之后的package.json
dependencies: {
  package1: "^1.2.2"
}

如果需要指定安装版本，可以在package name后@版本号。

npm install jquery@x.y.z

当然，更新之后，dependencies内的版本号也会改变。

如何卸载一个包呢？

本地卸载：npm uninstall <package name>

同时，package.json的dependencies属性也会删除此依赖。当然，也可以手动删除它。
npm uninstall --save vue

全局卸载：npm uninstall -g <package name>

有时候，当我们开发一个项目时，一些包只是作为开发依赖，并不是项目必须的，比如一些测试工具，不会在生产环境下运行。

那么就涉及到devDependencies项了。
devDependencies指定项目开发所需要的模块。

{
  "name": "studynpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.19.0"
  }
}

package.json —— bin字段
bin字段用来指定各个内部命令对应的可执行文件的位置。

"bin": {
  "start": "./bin/start.js"
}

上面代码指定，start命令对应的可执行文件为bin字目录下的start.js文件，node会寻找这个文件

一些常用命令

npm update <package name>：更新node模块

npm rebuild <package name>：用于更改包内容后进行重建

npm view <package name> dependencies：查看包的依赖关系

npm view <package name> repository.url：查看包的源文件地址

npm view <package name> engines：查看包所依赖的Node的版本

npm outdated：检查包是否已经过时，此命令会列出所有已经过时的包，可以及时进行包的更新

npm update moduleName：更新node模块

package.json

npm search

npm update

一些常用命令

猜你喜欢

热点阅读