nodejs,npm,npx,webpack等概念总结

nodejs

官网给出了nodejs的概念：Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境也就是说Node.js实际上是为了javascript专门开发的一个环境，负责解释js语言的，最早Node.js用于后端领域，替代了原本后端常用的其他语言，结果有了node.js之后，后端前端都可以使用javascript来编写代码，于是nodejs慢慢渗透到前端领域，Node.js 是 React/Vuejs 这样的前端框架的开发环境运行的基础。

npm

npm是一个软件包管理器，负责对各个软件包进行管理，由Node.js官方提供；npm也有npm官网的意思，任何人都可以申请将自己的包上传到网站上，所有通过的包会存储在注册表（register）里面；由于npm是Node.js下的一个工具，所以当我们下载好Node.js后，就已经安装好了npm，安装默认已经配置好了path，我们可以通过 node - v和npm -v来查看下载安装好的node.js和npm版本；

如何在项目中使用npm包管理工具

首先我们cd到准备开始项目的目录，在终端命令行执行npm init 或者npm init -y前者会一项一项询问你配置的信息，后者则使用默认配置，这里的配置是在执行完上面指令后在目录下生成的packet.json文件内的配置，为什么会有这个文件呢，可以想象一下npm是一个包管理工具，如何管理各种各样的包是按照用户的想法去管理的，而用户的想法就存在这个.json文件内，npm也是按照这个文件的要求去管理包的。至此，我们就在项目中使用了npm包管理工具了；

关于paket.json配置

略···

npx

npx是npm v5.2.0引入的一条命令，它也是一个工具，但是不是包管理，而是包执行；npm 本身不能够执行任何包，对于本地项目的包，如果想要执行，则需要写入到 package.json 里面，然后通过 npm 来解析 package.json 文件，解析到包的 bin 文件路径，在 bash 中执行。我们要执行一个非本地的包，先要下载安装这个包到本地，执行上述步骤；但是有了npx之后，我们可以跳过npm install直接使用npx，主要特点是
1、临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
2、可以执行依赖包中的命令，安装完成自动运行。
3、自动加载node_modules中依赖包，不用指定$PATH。
4、可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。
比如npx create-react-app,执行这个命令的时候，npx将create-react-app下载到一个临时目录，使用以后再删除。每次运行这个命令，都会重新下载依赖包，运行后删除。它的原理是在运行它时，执行下列流程：

• 去node_modules/.bin路径检查npx后的命令是否存在，找到之后执行；
• 找不到，就去环境变量$PATH里面，检查npx后的命令是否存在，找到之后执行;
• 还是找不到，自动下载一个临时的依赖包最新版本在一个临时目录，然后再运行命令，运行完之后删除，不污染全局环境。

webpack

webpack是一个打包和资源加载工具，什么是打包呢先插入一个背景：传统前端开发模式中，项目越来越大时，不断需要用script引入自有业务文件或者三方文件，而且无法灵活地管理依赖以及依赖的加载顺序。HTML 代码中引用顺序决定了依赖的加载顺序，这在某些场景下是不灵活的。在不使用模块系统的情况下，项目会变得难以维护。而npm就是在这种场景下诞生的，可以在模块化开发下对各个模块引入的包进行依赖和版本的控制，但是也还存在一个问题，模块化开发中，我们会编写大量模块，如果不打包就上线，那么页面加载或交互时，将会发起大量请求。为了性能优化，需要使用webpack这样的打包器对模块进行打包整合，以减少请求数。就像简单的vue项目，所有组件最终都将被打包到一个app.js中。webpack的核心优势在于它从入口文件出发，递归构建了依赖关系图并且这些依赖关系只在一个文件内，大大减轻了模块化带来的依赖关系复杂的负担；什么是资源加载打包所有的资源以及不同类型的文件让浏览器能够识别

如何运行webpack

在初始化npm之后，执行npm install webpack webpack-cli --save-dev就可以本地安装webpack了，不建议全局安装，全局安装可能会带来不同项目的webpack版本的不一致的问题，npm install -g webpack webpack-cli ；链接: 安装好之后如何使用webpack打包