阅读 390

node.js快速入门

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

node-1

那么这个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-2

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

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

VSCode调试

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

node-3

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

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

node-4

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

node-5

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(生产环境依赖)添加,方便项目的迁移:

node-6

如果想要直接添加到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;

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

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

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

文章分类
前端
文章标签