1.4　npm

在使用任何一个框架之前，必然要经历的一个环节是环境搭建，而npm是配置React环境的必要工具，其在下载各种依赖包时起着重要作用。本节主要为读者解析npm是怎样的一个工具。

1.4.1　什么是npm

简单来说npm（Node Package Manager）是包含在Node.js里面的一个包管理工具，如果读者之前使用过Node.js，那对npm应该不会陌生，因为npm会随着Node.js一起安装。npm是世界上最大的软件注册表，其为开发者连接到了一个广阔的JavaScript世界。据官方数据统计，npm大约每周有30亿的惊人下载量，其中包含大约60万个package（代码模块）。

npm为开发者提供了一个代码模块共享的大平台，开发者既可以从npm服务器上下载其他开发人员共享的package，也可以上传自己的package供其他开发者使用。Node.js和npm的环境搭建将在2.2节中详细讲述。

1.4.2　理解npm scripts

npm scripts指的是npm脚本，其主要用途是执行配置文件（package.json）中“scripts”属性对应的脚本语句。在理解npm scripts之前，这里先介绍一下package.json文件。

在搭建一个前端项目时，一般在项目的根目录下要生成一个package.json文件，该文件用来定义项目信息、配置包依赖关系。package.json文件可以自己手动创建，也可以用如下命令创建：

这里列举一个简单的package.json文件，如下所示：

上述package.json文件只定义了项目名称和项目版本号。一般情况下，在实际开发中，package.json文件是非常丰富的，接下来列举一个实际开发中比较全面的package.json文件，如下所示：

上述package.json文件内容多了几个字段，private、dependencies、devDependencies和scripts。private指包的私有属性，如果设置为true，则npm会拒绝发布，主要是为了避免私有repositories不小心被发布出去。dependencies、devDependencies两个字段在1.4.3小节介绍，这里主要介绍scripts。

scripts里面放的是npm要执行的命令，格式是key-value形式，为了简化操作，具体命令为value，自定义的简化命令为key，当npm运行key命令时，等同于执行后面的value命令。例如，执行npm run start命令，相当于执行了React-scripts start。

简而言之，package.json配置文件中的脚本，就叫作npm scripts。其实scripts里面的命令可以是任何的shell命令，执行npm run的时候，会自动构建一个shell，脚本都是在shell中执行，所有package.json中的脚本可以是任何可以在shell中有效执行的命令。

也许有读者会有疑问，为什么scripts命令可以直接使用。这里解释一下，npm run在新建一个shell的时候，会将当前目录的node_modules/.bin目录配置到path环境变量中，如果以前用过Java，应该了解在配置jdk时需要将jdk目录配置到path环境变量中才可以全局使用。这里npm是自动将node_modules/.bin配置到了环境变量中。其实上面的scripts字段可以改写为下面的样子：

1.4.3　dependencies和devDependencies

在1.4.2小节中介绍package.json文件的内容时提到了dependencies和devDependencies两个字段：

dependencies和devDependencies两个配置字段都是用来安装依赖包的，区别在于前者安装项目运行所依赖的模块，后者安装项目开发所依赖的模块。

在npm安装模块的时候，会有两个命令：

和

第一个命令是用来对应dependencies字段的，第二个命令是对应devDependencies字段的。上述示例中有些模块的版本号之前有个插入号“^”，比如“React“： “^16.2.0“，表示安装React的16.x.x的最新版本（不低于16.2.0），但是不安装17.x.x，也就是说安装时不改变大版本号。如果版本号前面没有任何标识，比如“React-scripts“： “1.1.1“，表示只安装React-scripts的1.1.1版本。