一篇文章搞定什么是nodeJs它和NPM关系与项目应用

kenx
• 阅读 379

现在前端的入门门槛越来越高了,不再是单纯 html+css+js,各种前端框架 层出不穷,各种ui组件库层出不穷。

模块化,打包化,各种工具库层出不穷,前端变成大前端 ,甚至前端可以搞定整个项目,通过node作为服务端api,

这里我们主角就是nodeJs

什么是nodejs

一篇文章搞定什么是nodeJs它和NPM关系与项目应用

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成为软件架构师的首选的重要特征:

  1. 异步和事件驱动的Node.js库- 所有API都是异步非阻塞的,这意味着Node.js服务器不必等待API返回数据。它可以立即移动到下一个API调用,利用Node.js事件通知机制来获取从API调用获得的响应。这种异步的事件驱动机制,使得服务器可以高效地响应并快速处理大量请求。

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

  3. 单线程但高度可扩展的Node.js - Node.js使用事件循环单线程模型,事件机制有助于服务器以非阻塞的方式响应请求,这使得服务器具备高度可扩展性。相比传统服务器使用创建线程等方式来处理请求,Node.js使用单线程和单一程序处理方式,能够更好地处理大量请求,并具备更高的可扩展性。例如,Node.js可以比传统的Apache HTTP服务器处理更多请求。

  4. 无缓冲的Node.js应用 - Node.js应用程序从来不需要缓冲任何数据。这些应用程序只需输出块中的数据,不需要在内存中缓冲大量数据。

总之,以上特点都让Node.js成为软件架构师的首选,因为它可以高效地响应请求并处理大量请求,从而提高系统的性能和可扩展性。

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

自从Netscape浏览器问世以来,JavaScript就一直在探索本地编程的路。 不幸的是,当时服务端JavaScript的发展基本上是借鉴其他服务器端语言的实现,因此缺乏特色和实用价值。 随着JavaScript在前端应用的广泛应用以及服务端JavaScript的推进,JavaScript现有的规范变得非常弱,难以满足JavaScript在大规模应用方面的需求。在以JavaScript为宿主语言的环境中,只有基本的原生对象和类型,其他对象和API取决于宿主的提供,因此,JavaScript缺乏以下功能:

  1. 模块系统:没有原生支持的闭包作用域或依赖管理。
  2. 标准库:除了一些核心库外,没有文件系统API和IO流API等。
  3. 标准接口:缺乏像Web服务器或数据库这样的统一接口。
  4. 包管理系统:不能自动加载和安装依赖。

因此,CommonJS(http://www.commonjs.org)规范应运而生,目的是为了构建JavaScript在包括Web服务器、桌面、命令行工具以及浏览器中的生态系统。

CommonJS试图定义一套可供普通应用程序使用的API,以填补JavaScript标准库过于简单的不足。 其终极目标是制定类似于C ++标准库的规范,使基于CommonJS API的应用程序可以在不同的环境下运行,就像使用C ++编写的应用程序可以使用不同的编译器和运行时函数库一样。例如:模块、包、系统、二进制、控制台、编码、文件系统、套接字、单元测试等等。

Node.js是CommonJS规范最流行的实现之一。Node.js实现了require方法作为其模块引入的方法,同时,NPM则基于CommonJS规范定义的模块规范,实现了依赖管理、模块自动安装等功能。

常用框架

  1. express:完善、出现早、文档全、社区大
  2. koa:超前,完善中
  3. hapi:复杂,适合大型项目

NodeJS下载安装

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

一篇文章搞定什么是nodeJs它和NPM关系与项目应用

管理Nodejs版本

n

n是一位鼎鼎大名的TJ Holowaychuk所写的Node.js模块,(鼎鼎大名的Express框架作者)旨在提供一个简单、直观的方式来管理Node.js版本。正如其名字所示,它追求的理念就是简洁——无需使用子Shell、配置文件或臃肿的API,仅提供简单易用的功能。

n模块的主要功能是让用户可以轻松地安装、使用和管理不同版本的Node.js。如果您想要安装n模块,可以按照以下步骤进行操作:

npm install n -g

安装完成之后,直接输入n后输出当前已经安装的node版本以及正在使用的版本(前面有一个o),你可以通过移动上下方向键来选择要使用的版本,最后按回车生效。

一篇文章搞定什么是nodeJs它和NPM关系与项目应用

安装最新的版本

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

一篇文章搞定什么是nodeJs它和NPM关系与项目应用

nvm是一款流行的Node.js版本管理工具,可以通过命令行界面实现快速、简便的Node.js版本安装、切换和管理。使用nvm,您可以轻松地安装和切换不同版本的Node.js,以适应不同的开发需求和应用场景。同时,nvm还具备方便的命令行接口和完善的文档支持,让用户能够快速上手并进行高效的开发工作。

nvm 只适用于 macOS 和 Linux 用户的项目,如果是 Windows 用户,可以使用 nvm-windowsnodistnvs 替换。

# 方式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

一篇文章搞定什么是nodeJs它和NPM关系与项目应用

fnm

一篇文章搞定什么是nodeJs它和NPM关系与项目应用 fnm 是一款快速简单 🚀 的 Node.js 版本管理器,使用 Rust 构建。

主要特点包括:

  1. 🌎 跨平台支持,包括:macOS、Windows、Linux;
  2. ✨ 单一文件,轻松安装,即时启动 ;
  3. 🚀 以速度为设计理念;
  4. 📂 适用于 .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方法接受以下几种参数的传递:

  1. http、fs、path等,原生模块。
  2. ./mod或../mod,相对路径的文件模块。
  3. /pathtomodule/mod,绝对路径的文件模块。
  4. 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方法极其简单,但是内部的加载却是十分复杂的,其加载优先级也各自不同。如下图所 一篇文章搞定什么是nodeJs它和NPM关系与项目应用

模块路径解析规则

  1. 内置模块 如果传递给require函数的是NodeJS内置模块名称,不做路径解析,直接返回内部模块的导出对象,例如require('fs')。

  2. 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 开发人员:

一篇文章搞定什么是nodeJs它和NPM关系与项目应用

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

一篇文章搞定什么是nodeJs它和NPM关系与项目应用

NPM使用

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

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

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

  3. 允许用户将自己编写的包或命令行程序上传到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

点赞
收藏
评论区
推荐文章
Tommy744 Tommy744
3年前
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些Javascriptweb前端框架,库以及它们的适用场景。  新的Javascript库层出不穷,从而Web社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的Javascript框架和库近乎
Easter79 Easter79
3年前
springboot+vue 登录页面(一)
首先了解的技术点是:后台:springboot,mybatis,mybatis逆向工程,mysql,日志前端:nodejs,npm,cnpm,vue,vuecli,webpack,elementui,router,axios开发工具:idea,webstorm该项目前端使用的是vue,目的是实现前后端分离后台:1.选择spr
Stella981 Stella981
3年前
React Router 4.x 开发,这些雷区我们都帮你踩过了
前言在前端框架层出不穷的今天,React以其虚拟DOM、组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的Javascript库。作为React体系中的重要组成部分:ReactRouter也成为开发者首选的路由库,其主要功能是通过管理url实现组件的切换和状态的变化。正文在ReactRouter
Stella981 Stella981
3年前
NodeJs学习一NodeJs初识
一、前言按照惯例,先扯淡,就因为这货,现在才有了各大公司招聘的全栈工程师,正是因为它,让以前只会写前端的人也能写起后端服务器代码来了。所以呢,你招一个会NodeJs的前端,它都能把后端干了,一个人干了两个人的事,你说哪个公司不想要。但是我还是要同情一下前端的兄弟们,真是苦了你们了,以前你们只是写页面就完了,现在还得写后台,再加上各种前端框架,什么
Wesley13 Wesley13
3年前
0基础前端开发需要学什么?
  0基础前端开发需要学什么?零基础学员入门前端需要了解前端行业的发展趋势、学习前端的方法、前端学习路线详解以及前端案例展示等内容;有老师指导的情况下,可以结合学员自身情况制定前端学习路线,明确学习前端的路径、未来发展趋势。提前为学员打好基础,避免小白学员走弯路。  小白学员面临的前端如何入门、如何开始学习前端、前端能够做什么等问题。因此入门前要明确学习
liam liam
1年前
使用 Axios 请求库:简单易学的基础指南
Axios是一个流行的基于Promise的HTTP请求库,用于在浏览器和Node.js中进行HTTP请求。它提供了简单易用的API,可以发送各种类型的请求(如GET、POST、PUT、DELETE等),并处理响应数据,Axios在前端工程化项目中有99%的
爱学it学无止境 爱学it学无止境
3个月前
高级前端进阶必修:自主打造高扩展的业务组件库无密分享
组件库:前端开发的基石与未来趋势在前端开发的广阔领域中,组件库作为一组预先设计好的、可重用的UI组件集合,已成为提升开发效率、保证项目一致性和可维护性的重要工具。本文将从组件库的定义、构建原则、应用场景及未来发展趋势等方面进行深入探讨,以期为前端开发者提供