node.js快速入门

当我们具备了足够的JavaScript知识后，下一步就要进行Vue的学习了。打开Vue的官方教程，第一步自然是安装：

那么这个npm是什么呢？该怎么调用这个命令呢？为什么会用到这个？

别急，这就是涉及到了我们今天的主题：Node.js。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它的运行不依赖于浏览器作为宿主环境，而是和服务端程序一样可以独立的运行，这使得 JavaScript 编程第一次从客户端被带到了服务端。Node.js 在服务端的优势是，它采用单线程和异步 I/O 模型(JavaScript就是单线程的语言)，实现了一个高并发、高性能的运行时环境。

一句话来进行概括，我们平时使用的JavaScript都得在浏览器中才能看到效果，Node.js的效果就是不需要打开浏览器，本地即可实现对JavaScript代码的调试。

Node.js安装

直接从官网就可以找到它的安装包：下载链接

安装过程中程序会自动提示我们是否要将其加入Path路径，勾选即可。安装结束后，你就有了两个可用的命令：node、npm，打开cmd可以查看其版本：

 node -v

 npm -v
复制代码

可以在命令提示符输入node，此刻你将进入Node.js的交互环境。在交互环境下，你可以输入任意JavaScript语句，回车后将得到输出结果。这样，我们就实现了一次简单的对js代码的调试，怎么样？是不是没有经过浏览器？

到这里我们就清楚了node.js的功能，但一般调试工作不会在命令行进行，都是基于开发工具的，下面以VSCode为例进行一次DeBug。

要退出Node.js环境，连按两次Ctrl+C。

VSCode调试

1.首先准备一个写好的js文件来作为我们调试的对象；

2.进入VSCode的调试界面，在program中配置文件路径；

如果第一次可能需要在这个界面提示你创建launch.json.

然后点击左上角的绿色按钮就可以在调试控制台看到结果：

NPM

说完node，我们再聊聊Vue的重要基础npm，npm其实是Node.js的包管理工具。

为啥我们需要一个包管理工具呢？

因为我们在Node.js上开发时，经常会引入一个好的JavaScript库，如果每次都需要手动引入的话，随着库文件的逐渐增多工作量将会越来越大。使用npm来进行管理，当你需要引入一个库时，只需要npm install进行新增即可。并且项目迁移时只用关注配置文件是否正确，然后异地下载，就不需要进行库的迁移了(其实跟Maven还有一点相似)。只要开发者发布某个模块到仓库中，其他人就可以从 npm 网站或者命令行中下载、使用。

package.json

正如它的名字，package.json就是在NPM包管理中的重要配置文件，下面是一个新创建Vue项目的package.json。

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}
复制代码

该文件至少要有两部分内容：

“name”
项目的名称：全部小写，没有空格，可以使用下划线或者横线

“version”
版本号：x.x.x

脚本的执行：

scripts：支持的脚本

npm run 后跟具体的脚本名称(serve)即可执行
复制代码

生产信息：

1. dependencies：在生产环境中需要用到的依赖
2. devDependencies：在开发、测试环境中用到的依赖

输入npm install 后默认会安装 package.json 中 dependencies 和 devDependencies 里的所有模块。如果想只安装 dependencies 中的依赖，可以使用 –production 字段：

npm install --production
复制代码

如果在项目中新增一个模块，直接下载即可，下载完成后会添加到node_modules目录中：

npm install jQuery

卸载一个模块，同时删除package.json中的配置
npm uninstall jQuery
复制代码

与此同时，会在package.json文件中的dependencies(生产环境依赖)添加，方便项目的迁移：

如果想要直接添加到devDependencies下面，需要通过命令来显示指定：

npm install <package_name> --save-dev
复制代码

除去安装跟卸载之外，还有一个包管理较为常用的命令：

npm cache clean -f 
清除缓存
复制代码

Semantic versioning

以一个生产环境的包为例，前面的一个是具体的依赖名字，后面的版本号为什么是^3.6.5呢？

 "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  }
复制代码

这就涉及到了在npm中的语义版本控制：

如果一个项目打算与别人分享，应该从 1.0.0 版本开始。并且以后要升级版本应该遵循以下标准：

补丁版本：解决了 Bug 或者一些较小的更改，增加最后一位数字，比如 1.0.1
小版本：增加了新特性，同时不会影响之前的版本，增加中间一位数字，比如 1.1.0
大版本：大改版，无法兼容之前的，增加第一位数字，比如 2.0.0

作为使用者，我们就可以在 package.json 文件中写明我们可以接受这个包的更新程度：

如果只打算接受补丁版本的更新（也就是最后一位的改变），就可以这么写：
1.0
1.0.x
~1.0.4
如果接受小版本的更新（第二位的改变），就可以这么写：
1
1.x
^1.0.4
如果可以接受大版本的更新（自然接受小版本和补丁版本的改变），就可以这么写：

x

淘宝镜像

在npm中进行包的依赖下载时，由于使用的是国外的源会比较慢，可以切换成淘宝镜像提高速度：

设置淘宝镜像：

npm config set registry registry.npm.taobao.org
​再设置回原来的：
npm config set registry registry.npmjs.org

错误信息收集

在安装了淘宝镜像之后，PowerShell报错：在此系统上禁止运行脚本。

1.以管理员身份运行vscode;

2. 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的;
3. 执行：set-ExecutionPolicy RemoteSigned;
4. 这时再执行get-ExecutionPolicy，就显示RemoteSigned;

到此，我们就学到了node.js的一些基础操作。

参考链接：[npm 与 package.json 快速入门教程](