现在前端的入门门槛越来越高了
    
    
    
，不再是单纯 html+css+js     


     


     


  ，各种前端框架 层出不穷 




 




 




 
，各种ui组件库层出不穷
    
    
    
。

模块化

   

   

   

，打包化     

     

     

 ，各种工具库层出不穷  




  




  




  ，前端变成大前端 


  


  


  


，甚至前端可以搞定整个项目     
     
     
，通过node作为服务端api   




   




   




   ，

这里我们主角就是nodeJs

什么是nodejs

javaScript是一门脚本语言



 



 



 


，通常被用来编写
    
    
    
、执行本地源代码     


     


     


  。脚本语言需要一个解析器才能运行               ，HTML文件中的JavaScript代码由浏览器解析执行 




 




 




 
。而自行执行JavaScript代码则需要Node.js解析器才能运行

   

   

   

。

每个解析器都是一个运行环境    




    




    




   ，允许JavaScript定义各种数据结构和执行各种计算

















，同时也允许JavaScript调用运行环境提供的内置对象和方法     

     

     

 。浏览器环境下               ，JavaScript常被用来操作DOM等功能     



     



     



   ，因此浏览器提供了document等内置对象；在Node.js环境下
















，JavaScript通常用来处理磁盘文件和搭建HTTP服务器
    
    
    
，因此Node.js提供了fs     


     


     


  、http等内置对象  




  




  




  。

Node.js是一个基于V8引擎的JavaScript运行环境


  


  


  


。V8引擎具有快速执行JavaScript代码的能力     


     


     


  ，并且性能非常优秀     
     
     
。Node.js专注于优化一些特殊用例 




 




 




 
，并提供了替代的API

   

   

   

，在非浏览器环境下更好地运行V8引擎   




   




   




   。

作为一种服务器端JavaScript平台     

     

     

 ，Node.js能够快速创建网络应用程序



 



 



 


。同时  




  




  




  ，它也支持前后端JavaScript编程


  


  


  


，为开发者提供了更高效的系统设计和一致性               。

NodeJS特性

以下是一些使得Node.js成为软件架构师的首选的重要特征：

异步和事件驱动的Node.js库- 所有API都是异步非阻塞的     
     
     
，这意味着Node.js服务器不必等待API返回数据    




    




    




   。它可以立即移动到下一个API调用   




   




   




   ，利用Node.js事件通知机制来获取从API调用获得的响应

















。这种异步的事件驱动机制



 



 



 


，使得服务器可以高效地响应并快速处理大量请求               。

非常快的Node.js代码执行- Node.js代码在谷歌Chrome的V8 JavaScript引擎上运行               ，速度非常快     



     



     



   。

单线程但高度可扩展的Node.js - Node.js使用事件循环单线程模型    




    




    




   ，事件机制有助于服务器以非阻塞的方式响应请求

















，这使得服务器具备高度可扩展性
















。相比传统服务器使用创建线程等方式来处理请求               ，Node.js使用单线程和单一程序处理方式     



     



     



   ，能够更好地处理大量请求
















，并具备更高的可扩展性
    
    
    
。例如
    
    
    
，Node.js可以比传统的Apache HTTP服务器处理更多请求     


     


     


  。

无缓冲的Node.js应用 - Node.js应用程序从来不需要缓冲任何数据 




 




 




 
。这些应用程序只需输出块中的数据     


     


     


  ，不需要在内存中缓冲大量数据

   

   

   

。

总之 




 




 




 
，以上特点都让Node.js成为软件架构师的首选

   

   

   

，因为它可以高效地响应请求并处理大量请求     

     

     

 ，从而提高系统的性能和可扩展性     

     

     

 。

统一在Javascript浏览器之外的实现  




  




  




  ， CommonJS

自从Netscape浏览器问世以来


  


  


  


，JavaScript就一直在探索本地编程的路  




  




  




  。 不幸的是     
     
     
，当时服务端JavaScript的发展基本上是借鉴其他服务器端语言的实现   




   




   




   ，因此缺乏特色和实用价值


  


  


  


。 随着JavaScript在前端应用的广泛应用以及服务端JavaScript的推进



 



 



 


，JavaScript现有的规范变得非常弱               ，难以满足JavaScript在大规模应用方面的需求     
     
     
。在以JavaScript为宿主语言的环境中    




    




    




   ，只有基本的原生对象和类型

















，其他对象和API取决于宿主的提供               ，因此     



     



     



   ，JavaScript缺乏以下功能：

模块系统：没有原生支持的闭包作用域或依赖管理   




   




   




   。 标准库：除了一些核心库外
















，没有文件系统API和IO流API等



 



 



 


。 标准接口：缺乏像Web服务器或数据库这样的统一接口               。 包管理系统：不能自动加载和安装依赖    




    




    




   。

因此
    
    
    
，CommonJS（http://www.commonjs.org）规范应运而生     


     


     


  ，目的是为了构建JavaScript在包括Web服务器 




 




 




 
、桌面

   

   

   

、命令行工具以及浏览器中的生态系统

















。

CommonJS试图定义一套可供普通应用程序使用的API 




 




 




 
，以填补JavaScript标准库过于简单的不足               。 其终极目标是制定类似于C ++标准库的规范

   

   

   

，使基于CommonJS API的应用程序可以在不同的环境下运行     

     

     

 ，就像使用C ++编写的应用程序可以使用不同的编译器和运行时函数库一样     



     



     



   。例如：模块     

     

     

 、包  




  




  




  、系统


  


  


  


、二进制     
     
     
、控制台   




   




   




   、编码



 



 



 


、文件系统               、套接字    




    




    




   、单元测试等等
















。

Node.js是CommonJS规范最流行的实现之一
    
    
    
。Node.js实现了require方法作为其模块引入的方法  




  




  




  ，同时


  


  


  


，NPM则基于CommonJS规范定义的模块规范     
     
     
，实现了依赖管理

















、模块自动安装等功能     


     


     


  。

常用框架

express:完善               、出现早     



     



     



   、文档全
















、社区大 koa:超前   




   




   




   ，完善中 hapi：复杂



 



 



 


，适合大型项目

NodeJS下载安装

NodeJS提供了一些安装程序可以从nodejs.org下载安装 




 




 




 
。

管理Nodejs版本

n

n是一位鼎鼎大名的TJ Holowaychuk所写的Node.js模块               ，（鼎鼎大名的Express框架作者）旨在提供一个简单
    
    
    
、直观的方式来管理Node.js版本

   

   

   

。正如其名字所示    




    




    




   ，它追求的理念就是简洁——无需使用子Shell     


     


     


  、配置文件或臃肿的API

















，仅提供简单易用的功能     

     

     

 。

n模块的主要功能是让用户可以轻松地安装 




 




 




 
、使用和管理不同版本的Node.js  




  




  




  。如果您想要安装n模块               ，可以按照以下步骤进行操作：

npm install n -g

安装完成之后     



     



     



   ，直接输入n后输出当前已经安装的node版本以及正在使用的版本（前面有一个o）
















，你可以通过移动上下方向键来选择要使用的版本
    
    
    
，最后按回车生效


  


  


  


。

安装最新的版本

n latest

安装稳定版本

n stable

n后面也可以跟随版本号比如：

n v0.10.26 n 0.10.26

删除某个版本

$ n rm 0.10.1

以指定的版本来执行脚本

$ n use 0.10.21 some.js

常用命令

n # 显示所有已下载版本 n 10.16.0 # 下载指定版本 n lts # 查看远程所有 LTS Node.js 版本 n run 10.16.0 # 运行指定的 Node.js 版本 n Display downloaded Node.js versions and install selection n latest Install the latest Node.js release (downloading if necessary) n lts Install the latest LTS Node.js release (downloading if necessary) n <version> Install Node.js <version> (downloading if necessary) n install <version> Install Node.js <version> (downloading if necessary) n run <version> [args ...] Execute downloaded Node.js <version> with [args ...] n which <version> Output path for downloaded node <version> n exec <vers> <cmd> [args...] Execute command with modified PATH, so downloaded node <version> and npm first n rm <version ...> Remove the given downloaded version(s) n prune Remove all downloaded versions except the installed version n --latest Output the latest Node.js version available n --lts Output the latest LTS Node.js version available n ls Output downloaded versions n ls-remote [version] Output matching versions available for download n uninstall Remove the installed Node.js

n 只适用于 macOS 和 Linux      


     


     


  ，不适用于 Windows     
     
     
。

nvm

nvm是一款流行的Node.js版本管理工具 




 




 




 
，可以通过命令行界面实现快速

   

   

   

、简便的Node.js版本安装     

     

     

 、切换和管理   




   




   




   。使用nvm

   

   

   

，您可以轻松地安装和切换不同版本的Node.js     

     

     

 ，以适应不同的开发需求和应用场景



 



 



 


。同时  




  




  




  ，nvm还具备方便的命令行接口和完善的文档支持


  


  


  


，让用户能够快速上手并进行高效的开发工作               。

nvm 只适用于 macOS 和 Linux 用户的项目     
     
     
，如果是 Windows 用户   




   




   




   ，可以使用 nvm-windows   




  




  




  、nodist 或 nvs 替换    




    




    




   。

# 方式1 浏览器打开下面链接下载 https://github.com/nvm-sh/nvm/blob/v0.39.1/install.sh # 下载完成后



 



 



 


，通过命令安装 sh install.sh # 方式2 推荐 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash # 方式3 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装过程中如果遇到一些奇怪的问题               ，可以查看下 nvm 补充说明

















。

常用命令

nvm ls # 查看版本安装所有版本 nvm ls-remote # 查看远程所有的 Node.js 版本 nvm install 17.0.0 # 安装指定的 Node.js 版本 nvm use 17.0.0 # 使用指定的 Node.js 版本 nvm alias default 17.0.0 # 设置默认 Node.js 版本 nvm alias dev 17.0.0 # 设置指定版本的别名    




    




    




   ，如将 17.0.0 版本别名设置为 dev

fnm

fnm 是一款快速简单 🚀 的 Node.js 版本管理器

















，使用 Rust 构建               。

主要特点包括：

🌎 跨平台支持               ，包括：macOS


  


  


  


、Windows     
     
     
、Linux； ✨ 单一文件     



     



     



   ，轻松安装
















，即时启动 ； 🚀 以速度为设计理念； 📂 适用于 .node-version 和 .nvmrc 文件；

macOS / Linux 环境：

# bash, zsh and fish shells curl -fsSL https://fnm.vercel.app/install | bash

Windows 环境：

# 管理员模式打开终端
    
    
    
，安装后只能使用管理员模式打开使用 choco install fnm # 安装完成还需要手动设置环境变量

Linux/macOS/Windows 环境也可以直接下载二进制文件安装     


     


     


  ，下载地址：https://github.com/Schniz/fnm/releases

常用命令

fnm -h # 查看帮助 fnm install 17.0.0 # 安装指定 Node.js 版本 fnm use 17.0.0 # 使用指定 Node.js 版本 fnm default 17.0.0 # 设置默认 Node.js 版本

Node.js模块系统

为了让Node.js的文件可以相互调用 




 




 




 
，Node.js提供了一个简单的模块系统     



     



     



   。

模块是Node.js 应用程序的基本组成部分

   

   

   

，文件和模块是一一对应的
















。换言之     

     

     

 ，一个 Node.js 文件就是一个模块  




  




  




  ，这个文件可能是JavaScript 代码   




   




   




   、JSON 或者编译过的C/C++ 扩展
    
    
    
。

模块化编程

随着网页应用程序的不断发展


  


  


  


，网页的功能越来越类似于桌面程序     
     
     
，需要许多不同的人协同工作并进行进度管理



 



 



 


、单元测试等等     


     


     


  。因此   




   




   




   ，软件工程的方法逐渐成为网页开发者必不可少的技能 




 




 




 
。在此情境下



 



 



 


，Javascript模块化编程成为一项迫切的需求

   

   

   

。通过模块化编程               ，开发者只需要专注于实现核心业务逻辑    




    




    




   ，而其他的任务则可以由其他开发者编写的模块来实现     

     

     

 。

模块化编程的优势在于可以避免常见的问题

















，比如命名冲突和文件依赖  




  




  




  。

通过模块化编程               ，我们可以避免在代码中出现重复的变量名或函数名     



     



     



   ，从而确保代码的正确性和可维护性


  


  


  


。

另外
















，使用模块化编程还可以解决文件依赖问题
    
    
    
，开发者可以轻松地管理代码中的各个模块之间的依赖关系     


     


     


  ，并确保它们能够正确地加载和运行     
     
     
。这些优势使得模块化编程成为现代网页开发中不可或缺的一部分   




   




   




   。

Node中模块分类

NodeJS中模块分为2类：原生模块和文件模块



 



 



 


。

原生模块即Node.jsAPI提供的原声模块 




 




 




 
，原生模块在启动时已经被加载               。(如：os模块               、http模块    




    




    




   、fs模块

















、buffer模块               、path模块等)

//调用原生模块不需要指定路径 var http = require(http);

文件模块为动态加载模块

   

   

   

，加载文件模块的主要由原生模块module来实现和完成    




    




    




   。原生模块在启动时已经被加载     

     

     

 ，而文件模块则需要通过调用Node.js的require方法来实现加载

















。

//调用文件模块必须指定路径  




  




  




  ，否则会报错 var sum = require(./sum.js);

模块操作

在编写每个模块时


  


  


  


，都有require     



     



     



   、exports
















、module三个预先定义好的变量可供使用               。

require 加载模块

require方法接受以下几种参数的传递：

http
    
    
    
、fs     


     


     


  、path等     
     
     
，原生模块     



     



     



   。 ./mod或../mod   




   




   




   ，相对路径的文件模块
















。 /pathtomodule/mod



 



 



 


，绝对路径的文件模块
    
    
    
。 mod               ，非原生模块的文件模块     


     


     


  。

require函数在当前模块中被使用以加载其他模块 




 




 




 
。传入模块名后    




    




    




   ，将返回一个包含导出对象的模块

   

   

   

。模块名可以是相对路径（以./开头）或绝对路径（以/或C:这样的盘符开头）     

     

     

 。此外

















，模块名中的.js扩展名可以省略  




  




  




  。以下是一个示例：

var foo1 = require(./foo); var foo2 = require(./foo.js); var foo3 = require(/home/user/foo); var foo4 = require(/home/user/foo.js); //foo1 ~ foo4 中保存的是同一个模块的导出对象


  


  


  


。 //加载node 核心模块 var fs = require(fs); var http = require(http); var os = require(os); var path = require(path);

加载和使用json文件

var data = require(./data.json); exports 创建模块

exports对象是当前模块的导出对象               ，用于导出模块公有方法和属性     
     
     
。别的模块通过require函数使用当前模块时得到的就是当前模块的exports对象   




   




   




   。以下例子中导出了一个公有方法



 



 



 


。

//sum.js exports.sum = function(a,b){ return a+b; } //main.js var m = require("./sum"); var num = m.sum(10,20); console.log(num); module

通过module对象可以访问到当前模块的一些相关信息     



     



     



   ，但最多的用途是替换当前模块导出对象               。例如模块默认导出对象默认是一个普通对象
















，如果想改为一个函数可以通过如下方式： 导出一个普通函数：

//sum.js function sum(a,b){ return a+b; } module.exports= sum; //main.js var sum = require(./sum); sum(10,20);// 30

导出一个构造函数：

//hello.js function hello(){ this.name ="你的名字"; this.setName = function(name){ this.name = name; } this.sayName = function(){ alert(this.name); } } module.exports= hello; //main.js var hello = require(./hello.js); var o = new hello(); o.setName(张三); o.sayName(); // 张三 模块初始化

一个模块中的JS代码仅在模块第一次被使用时执行一次
    
    
    
，并在执行过程中初始化模块的导出对象    




    




    




   。之后     


     


     


  ，缓存起来的导出对象被重复利用

















。

模块加载优先级

模块加载优先级：已经缓存模块 > 原生模块 > 文件模块 > 从文件加载

Node.js 的 require方法中的文件查找策略如下： 由于Node.js中存在4类模块（原生模块和3种文件模块） 




 




 




 
，尽管require方法极其简单

   

   

   

，但是内部的加载却是十分复杂的     

     

     

 ，其加载优先级也各自不同               。如下图所

模块路径解析规则

内置模块

如果传递给require函数的是NodeJS内置模块名称  




  




  




  ，不做路径解析


  


  


  


，直接返回内部模块的导出对象     
     
     
，例如require(fs)     



     



     



   。

node_modules目录

NodeJS定义了一个特殊的node_modules目录用于存放模块
















。例如某个模块的绝对路径是/home/user/hello.js   




   




   




   ，在该模块中使用require(foo/bar)方式加载模块时



 



 



 


，则NodeJS依次尝试使用以下路径
    
    
    
。 /home/user/node_modules/foo/bar /home/node_modules/foo/bar /node_modules/foo/bar 主模块

通过命令行参数传递给NodeJS以启动程序的模块被称为主模块     


     


     


  。主模块负责调度组成整个程序的其它模块完成工作 




 




 




 
。例如通过以下命令启动程序时               ，main.js就是主模块

   

   

   

。

NPM应用

什么是NPM

Node 成功的主要因素之一是它广受欢迎的软件包管理器——npm    




    




    




   ，因为 npm 使 JavaScript 开发人员可以快速方便地共享软件包

npm（“Node 包管理器
    
    
    
”）是 JavaScript 运行时 Node.js 的默认程序包管理器     

     

     

 。

Node Packaged Modules 简称

Node本身提供了一些基本API模块

















，但是这些基本模块难以满足开发者需求  




  




  




  。Node需要通过使用NPM来管理开发者自我研发的一些模块               ，并使其能够共用与其他开发者

npm 由两个主要部分组成:

. 用于发布和下载程序包的 CLI（命令行界面）工具

. 托管 JavaScript 程序包的 在线存储库

为了更直观地解释     



     



     



   ，我们可以将存储库 npmjs.com 视为一个物流集散中心
















，该中心从卖方（npm 包裹的作者）那里接收货物的包裹
    
    
    
，并将这些货物分发给买方（npm 包裹的用户）


  


  


  


。

为了促进此过程     


     


     


  ，npmjs.com 物流集散中心雇用了一群勤劳的袋熊（npm CLI） 




 




 




 
，他们将被分配给每个 npmjs.com 用户作为私人助理     
     
     
。 因此

   

   

   

，dependencies（依赖项）会如下传递给 JavaScript 开发人员：

发布 JS 软件包的过程如下：

NPM使用

NPM是随同NodeJS一起安装的包管理工具     

     

     

 ，能解决NodeJS代码部署上的很多问题  




  




  




  ，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用   




   




   




   。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用



 



 



 


。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用               。

由于新版的nodejs已经集成了npm


  


  


  


，所以之前npm也一并安装好了    




    




    




   。同样可以通过输入

npm -v

来测试是否成功安装

















。命令如下     
     
     
，出现版本提示表示安装成功:

$ npm -version 9.5.1

升级更新NPM

$ sudo npm install npm -g

使用NPM安装模块

有一个简单安装任何Node.js模块   




   




   




   ，语法如下：

$ npm install <Module Name>

例如



 



 



 


，下面是安装一个著名的Node.jsweb框架模块的命令叫 express:

$ npm install express

现在               ，你可以在js文件中使用此模块如下：

var express = require(express);

全局安装VS本地安装

本地安装 默认情况下    




    




    




   ，NPM安装指定包默认会安装到本地               。本地安装指的是包安装在当前目录中node_modules文件夹中     



     



     



   。本地安装的包都可以通过require()方法进行访问
















。例如我们安装Express模块:

$ npm install express

列出所有本地安装的模块

$ npm ls

全局安装 全局安装包都存储在系统目录中
    
    
    
。我们可以在nodejs的CLI(命令行界面)使用

















，但是不能直接使用require()方法进行访问     


     


     


  。例如安装http-server包：

//全局安装 -g $ npm install -g http-server //使用node CLI $ http-server

卸载模块

使用下面的命令卸载Node.js模块

npm uninstall express

更新模块

npm update express

搜索模块

搜索使用NPM包名

npm search express

下载三方包

NPM建立了一个NodeJS生态圈               ，NodeJS开发者和用户可以在里边互通有无 




 




 




 
。

当你需要下载第三方包时,首先要知道有哪些包可用

   

   

   

。npmjs.com提供了可以根据包名来搜索的平台     



     



     



   ，但是如果不知道包名可以百度一下     

     

     

 。知道了包名后
















，就可以使用命令去安装了
    
    
    
，例如：Express

npm install express

下载完成之后     


     


     


  ，express包就放在了工程目录下的node_modules目录中 




 




 




 
，在代码中只需要通过reuqire(express)的方式去引用

   

   

   

，无需指定包路径  




  




  




  。

以上命令默认下载最新版本第三方包     

     

     

 ，如果要下载指定版本  




  




  




  ，可以在包名后面追加@,例如通过如下命令可以下载0.0.1版本的express


  


  


  


。 npm install express@0.0.1

如果使用到的第三方包比较多


  


  


  


，在终端下一个包一条命令的安装非常不方便     
     
     
，因此NPM对package.json的字段做了扩展   




   




   




   ，允许在其中添加三方包依赖     
     
     
。

{ "name":"test", "main":"./lib/main.js", "dependencies":{ "http-server":"3.2.1" } }

这样处理后



 



 



 


，在工程目录下就可以使用npm install命令批量安装三包了   




   




   




   。最重要的是               ，当以后吧test项目上传到了NPM服务器    




    




    




   ，别人下载这个包时

















，NPM会根据包中声明的三方依赖包进行自动下载依赖



 



 



 


。这样用户只需要关心要使用的包               ，不用管其依赖的三方包               。

给NPM服务器发布自己的包

第一次使用NPM发布自己的包需要在npmjs.com注册一个账号

npm的常用命令

npm -v #显示版本     



     



     



   ，检查npm 是否正确安装    




    




    




   。 npm install express #安装express模块 npm install -g express #全局安装express模块 npm list #列出已安装模块 npm show express #显示模块详情 npm update #升级当前目录下的项目的所有模块 npm update express #升级当前目录下的项目的指定模块 npm update -g express #升级全局安装的express模块 npm uninstall express #删除指定的模块

NPM项目中运用

package.json

每个 JavaScript 项目（无论是 Node.js 还是浏览器应用程序）都可以被当作 npm 软件包
















，并且通过 package.json 来描述项目和软件包信息

















。

我们可以将 package.json 视为快递盒子上的运输信息               。

当运行 npm init 初始化 JavaScript/Node.js 项目时
    
    
    
，将生成 package.json 文件     


     


     


  ，文件内的内容(基本元数据)由开发人员提供：

. name：JavaScript 项目或库的名称     



     



     



   。

. version：项目的版本
















。通常 




 




 




 
，在应用程序开发中

   

   

   

，由于没有必要对开源库进行版本控制     

     

     

 ，因此经常忽略这一块
    
    
    
。但是  




  




  




  ，仍可以用它来定义版本     


     


     


  。

. description：项目的描述 




 




 




 
。

. license：项目的许可证

   

   

   

。

npm scripts

package.json 还支持一个 scripts 属性


  


  


  


，可以把它当作在项目本地运行的命令行工具     

     

     

 。例如     
     
     
，一个 npm 项目的 scripts部分可能看起来像这样：

{ "scripts": { "build": "tsc", "format": "prettier --write **/*.ts", "format-check": "prettier --check **/*.ts", "lint": "eslint src/**/*.ts", "pack": "ncc build", "test": "jest", "all": "npm run build && npm run format && npm run lint && npm run pack && npm test" } }

eslint   




   




   




   ，prettier



 



 



 


，ncc               ，jest 不是安装为全局可执行文件    




    




    




   ，而是安装在项目本地的 node_modules/.bin/ 中  




  




  




  。

最新引入的 npx 使我们可以像在全局安装程序一样运行这些 node_modules 项目作用域命令

















，方法是在其前面加上 npx ...（即npx prettier --write ** / *


  


  


  


。ts）     
     
     
。

dependencies vs devDependencies

这两个以键值对象的形式出现               ，其中 npm 库的名称为键     



     



     



   ，其语义格式版本为值   




   




   




   。 大家可以看看 Github 的 TypeScript 操作模板中的示例：

{ "dependencies": { "@actions/core": "^1.2.3", "@actions/github": "^2.1.1" }, "devDependencies": { "@types/jest": "^25.1.4", "@types/node": "^13.9.0", "@typescript-eslint/parser": "^2.22.0", "@zeit/ncc": "^0.21.1", "eslint": "^6.8.0", "eslint-plugin-github": "^3.4.1", "eslint-plugin-jest": "^23.8.2", "jest": "^25.1.0", "jest-circus": "^25.1.0", "js-yaml": "^3.13.1", "prettier": "^1.19.1", "ts-jest": "^25.2.1", "typescript": "^3.8.3" } }

这些依赖通过带有 --save 或 --save-dev 标志的 npm install 命令安装



 



 



 


。 它们分别用于生产和开发/测试环境

. ^：表示最新的次版本
















，例如
    
    
    
， ^1.0.4 可能会安装主版本系列 1 的最新次版本 1.3.0               。

. 〜：表示最新的补丁程序版本     


     


     


  ，与 ^ 类似 




 




 




 
， 〜1.0.4 可能会安装次版本系列 1.0 的最新次版本1.0.7    




    




    




   。

所有这些确切的软件包版本都将记录在 package-lock.json 文件中

















。

package-lock.json

该文件描述了 npm JavaScript 项目中使用的依赖项的确切版本               。如果 package.json 是通用的描述性标签

   

   

   

，则 package-lock.json 是成分表     



     



     



   。

就像我们通常不会读取食品包装袋上的成分表（除非你太无聊或需要知道）一样     

     

     

 ，package-lock.json 并不会被开发人员一行一行进行读取
















。

package-lock.json 通常是由 npm install 命令生成的  




  




  




  ，也可以由我们的 NPM CLI 工具读取


  


  


  


，以确保使用 npm ci 复制项目的构建环境
    
    
    
。

各种前端项目构建build工具

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch…… 前端目前有很多很多名词     
     
     
，看着这些感觉永远也学不完     


     


     


  。 不要被这些名词吓唬住   




   




   




   ，这些工具出现的目的是让我们的工作更加简单 




 




 




 
。

快速掌握build工具秘诀

快速掌握这些工具



 



 



 


，抓住几个核心概念：

1.帮助你安装

2.帮助你做事

当你接触到一个新的开发工具的时候               ，你首先需要搞清楚一个东西：“这个工具的目的是帮我安装东西    




    




    




   ，还是帮我做事？     


     


     


  ”

安装类的工具

npm 




 




 




 
、Bower和Yeoman几乎什么东西都能装

















，它们可以用来安装前端库               ，例如Angular.js或是React.js

   

   

   

。它们还可以为你的开发环境安装服务器     

     

     

 。它们可以安装测试库  




  




  




  。它们甚至可以帮你安装其他的前端开发工具


  


  


  


。

做事类的工具

Grunt

   

   

   

、Webpack     

     

     

 、Require.js  




  




  




  、Brunchu和Gulp则更加复杂一点     
     
     
。这类工具的目标     



     



     



   ，是在web开发中帮你完成自动化   




   




   




   。有的时候
















，这类工具所做的事情
    
    
    
，被称为“任务（task） 




 




 




 
”

为了完成这些任务     


     


     


  ，这类工具经常需要自己的包和插件生态



 



 



 


。每一个工具都会使用不同的方式来完成任务               。这些工具所做的事情也不尽相同    




    




    




   。一些工具 




 




 




 
，擅长处理那些你所指定的任务

   

   

   

，例如Grunt和Gulp等工具

















。还有一些工具     

     

     

 ，只只专注于一件事情  




  




  




  ，例如处理JavaScript的依赖


  


  


  


，例如Browserify和Require.js等工具               。

build工具的“祖宗

   

   

   

”是Node和npm

Node和npm负责安装和运行所有这些工具     
     
     
，因此你的所有项目中都会有它们的身影     



     



     



   。由于这个原因   




   




   




   ，很多开发者在安装新的工具之前



 



 



 


，都会尽可能的尝试使用这两个工具解决问题
















。

它们两个一个负责安装               ，一个负责帮你做事情
    
    
    
。

. Node是做事工具

. npm则是安装工具

npm可以安装Angular.js和React.js等库     


     


     


  。它还可以安装服务器    




    




    




   ，让你的应用在开发阶段可以在本地运行 




 




 




 
。它还可以安装很多其他工具

















，帮你完成很多事情               ，例如简化代码

   

   

   

。

而Node     



     



     



   ，则是帮你完成事情的
















，例如运行JavaScript文件
    
    
    
，以及服务器等     

     

     

 。

如果你刚刚开始学习     


     


     


  ，那么Node和npm都是必学的东西  




  




  




  。随着你的项目不断丰富 




 




 




 
，你将会逐渐知道这两个工具的极限能力


  


  


  


。当它们无法满足你的需要的时候

   

   

   

，就是你需要开始安装其他工具的时候了     
     
     
。

build其实就是production-ready版本的应用

开发者经常会把JavaScript和CSS拆分成独立的文件   




   




   




   。

独立文件的好处     

     

     

 ，是让你可以专注于编写针对性较强的代码  




  




  




  ，让每一部分代码只针对一个问题


  


  


  


，以免日后代码多到让你自己都难以管理



 



 



 


。但是当你的应用准备好被推向市场的时候     
     
     
，项目内存在多个JavaScript或是CSS文件并不是一个好主意               。当用户访问你的网站的时候   




   




   




   ，每一个文件都需要独立的HTTP请求



 



 



 


，这会让站点加载速度下降    




    




    




   。

解决方法就是               ，给项目创建“build     

     

     

 ”    




    




    




   ，它要将所有CSS文件合并成一个文件

















，然后再合并JavaScript文件

















。这样一来               ，你就可以将文件完成最小化               。要想创建这个build     



     



     



   ，你需要使用build工具     



     



     



   。

最正确工具组合  




  




  




  ”这么个东西不存在

使用哪些工具
















，完全是你自己说了算的事情
















。

你也可以选择什么工具都不用
    
    
    
。但是要记住
    
    
    
，随着项目的发展     


     


     


  ，复制


  


  


  


、黏贴     
     
     
、整合   




   




   




   、开启服务器等事情会让你慢慢手忙脚乱起来     


     


     


  。

你也可以只使用Node和npm 




 




 




 
，其他工具一概不用 




 




 




 
。对于新手来说

   

   

   

，这种方式很好     

     

     

 ，但是和上一条一样  




  




  




  ，慢慢你会开始感到力不从心

   

   

   

。

或者


  


  


  


，除了Node和npm之外     
     
     
，你也可以使用少数几个其他工具     

     

     

 。那么   




   




   




   ，你的开发过程将会以Node和npm为核心



 



 



 


，然后搭配Grunt和Bower               ，或是Webpack或是Gulp和Bower  




  




  




  。

使用正确的工具    




    




    




   ，能够帮你将很多繁琐的事情实现自动化


  


  


  


。但是使用工具的代价

















，就是你需要付出学习成本     
     
     
。

build工具学习成本较高               ，因此你只需要学习你用的上的工具

项目开发本身就已经很复杂了     



     



     



   ，你可能要使用新的语言或是框架   




   




   




   。你可能需要应付复杂的业务逻辑



 



 



 


。而引入新的工具
















，只会让你的学习成本变得更高               。

对此
    
    
    
，我的建议是     


     


     


  ，只学习那些你用的上的工具 




 




 




 
，其他的就先缓一缓吧    




    




    




   。

学习任何一种新东西

   

   

   

，最好的方式就是进行实践

















。例如     

     

     

 ，不要为了学习Grunt而去学习  




  




  




  ，你可以在你的项目中去尝试运用               。

如果你觉得对您有帮助关注公众号


  


  


  


，程序员三时 我会给大家不定期分享热门技术     
     
     
，做开源项目   




   




   




   ，技术交流



 



 



 


，面试               ，学习    




    




    




   ，分享自己入行多年一些感受和经验

参考

什么是 npm