Node.js以及相关工具笔记

Node.js

• Node.js是一个基于Chrome V8引擎的JavaScript运行环境，让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
• Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。

实际上Node.js就是优化Chrome V8引擎某些特殊API接口，使得V8在非浏览器环境下运行得更好的优化版Chrome V8引擎，专门用于运行JS以及基于JS的Vue（Vue框架，Nuxt框架）。

• 1、什么是Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
• 2、Node.js有什么用 如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。

Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。
当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

Node.js在服务端运行后就像是自己在服务端搭建了一个浏览器，(渲染前端模拟浏览器，向后端发送HttpClient请求）
前端代码就可以在自己的服务器的Node服务中编译运行了
而外部浏览器则可以通过网址进行本地项目的访问。

前端服务器：Node.js==后端服务器：Tomcat：将项目在对应平台（Node.js/Tomcat）运行起来。
Vue/Springboot项目都是在Node/Tomcat服务器上运行，然后通过localhost本地端口进行访问的。
知识扩展
服务器运行编译后的文件，实现对应功能。

安装完node之后就会自启动，vscode就能通过终端进行操作。

npm(node.js集成的工具)

• 前端npm相当于后端maven
• 前端package.json相当于后端pom.xml

• NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven。
  同样也要配置淘宝镜像，方便使用。 #经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载 npm
  config set registry https://registry.npm.taobao.org
• NPM工具的安装位置 我们通过npm 可以很方便地下载js库，管理前端工程。 Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules 在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具

npm命令以及详解

npm全局安装和局部安装

npm在vue框架中的运用

导入Vue/Nuxt框架后：

• npm install将package.json中框架所需要的依赖导入进行初始化项目，
• 然后便可npm run dev运行框架。

启动项目，进行模块化，打包等等，项目在node.js(前端服务器)上运行，默认运行index.html，然后外部浏览器可以通过url访问该项目。

npm start等命令失灵问题

原因：npm install出现了问题，命令脚本未下载到node_modules中。
npm install下载package.json中的依赖和命令脚本到node_modules中。
工程的命令框运行的命令就是下载到node_modules中的命令脚本。

总结：

若想使用npm的package.json管理项目依赖的前提下:

npm init -y

• 若项目未被npm初始化过（标志：项目无package.json就要npm初始化），npm init -y用于npm初始化项目生成package.json文件，进行依赖的管理。
• 若项目已经npm初始化过（标志：自带package.json）例如Vue/Nuxt框架：则就可以直接使用 npm install下载package.json的依赖初始化项目，然后npm run dev运行。
  
  为什么备份和传输的时候不携带node_modules文件夹呢？
  我曾经压缩过我毕设的VUE前端，就是因为携带node_modules
  一起压缩导致等了两个小时，压缩软件还没扫描完全部文件，node_modules中的依赖文件太多了（我一个小毕设的node_modules就有两万多依赖文件，更别说大型企业项目了）
  

babel

ES6（标志：箭头函数）兼容性不好，要想在所有浏览器（IE）中运行，需要使用babel转为ES5。
这样就可以使用ES6配合VUE编程然后babel转码为ES5.
babel是个转码器，可以将es6规范的js转换成es5规范的js，保证前端代码的浏览器兼容性。

package.json和package-lock.json区别

package.json与package-lock.json的区别及详细解释
package.json

记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）,不能锁定后面的小版本，

package-lock.json

package-lock.json 是在 npm install时候生成一份文件。记录了node_modules目录下所有模块（包）的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。
package-lock.json的作用

如果重新 npm install 的时候以及当node_modules文件夹并不存在或被删除时，需要用到npm install重新装载全部依赖时，通过package-lock.json可以直接表明下载地址和相关依赖，就无需再从package.json逐个分析包的依赖项，因此会大大加快安装速度，package-lock.json目的就是确保所有库包与你上次安装的完全一样。

如果要升级package-lock.json里面的库包

npm install XXX@x.x.x  

package-lock.json是当 node_modules 或 package.json发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。
注意事项

以后直接改 package.json 文件相应模块的版本号，再执行npm install不会更新了（好可怕），你只能手动用npm install xxx@yy指定版本号来安装，然后它会自动更新 package-lock.json 文件。 直接执行npm install时，如果不存在 package-lock.json 文件，它会根据安装模块后的 node_modules 目录结构来创建；
如果已经存在 package-lock.json 文件， 则它只会根据 package-lock.json文件指定的结构来下载模块，并不会理会 package.json 文件。

clean project with some deps in package.json.you run npm imodules are
installed and package-lock.json file is created.say you update module
A in package.json file.you run npm i. I would expect this updates the
package-lock.json file but it doesn’t. which results in module A not
being updated

.
Git工程中可以上传package-lock.json来同步管理全部人员的依赖版本
package-lock.json存储node_modules下每个依赖包的信息，包括版本号、下载地址等。 锁定安装时的包版本号，需要上传到git上，保证其他人在install时候，依赖版本相同。

在.gitignore文件里面把package-lock.json字样删除，后面每次提交git时就会检测提交package-lock.json文件了

总结区别
为什么有了package.json，还需要package-lock.json文件呢？
当项目中已有 package-lock.json 文件，在安装项目依赖时，将以该文件为主进行解析安装指定版本依赖包，而不是使用 package.json 来解析和安装模块。因为 package 只是指定的版本不够具体，而package-lock 为每个模块及其每个依赖项指定了版本，位置和完整性哈希，所以它每次创建的安装都是相同的。无论你使用什么设备，或者将来安装它都无关紧要，每次都应该给你相同的结果。
npm安装的依赖/组件都是放在node_modules下的，没有这些module我们的项目是肯定运行不起来的，但是上传到github上的时候缺不上传这个，一来是因为体积较大，而来文件过多，速度慢。
所以就通过package-lock.json严格管理版本包类型。
拓展知识
‘^’ :放在版本号之前，表示向后兼容依赖，说白了就是在大版本号不变的情况下，下载最新版的包。

模块化（js文件之间的相互调用）

模块化：
Es5使用exports 和require 来导出、导入模块

因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
ES6使用 export 和 import 来导出、导入模块

node.js可以运行此种写法的Es6

后记：

现在ES6的模块化只需要在package.json声明“type”:"module"就行了
node.js已经可以处理ES6模块化了，模块化后才可以实现js文件之间相互调用。

webpack

打包工具，可以把多个静态资源文件打包成一个文件，将相互引用的文件整合到一起。


webpack.base.conf.js中定义了@这代表src
import request from '@/utils/request'