IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> nodejs的模块系统和npm和包()的用法 -> 正文阅读

[JavaScript知识库]nodejs的模块系统和npm和包()的用法

目录

一、模块系统

1.1 模块化介绍

1.1.1 传统开发的问题

1.1.1 概述

1.1.2 nodejs的模块化分类

1.2. Commonjs简述

1.2.1 组成

1.2.2 定义规范的好处

1.3 模块的种类

1.4 nodejs自定义模块

1.4.1 介绍

ndoejs自定义模块的语法(commonjs):【重点】

?自定义模块js

1.4.2 定义、使用自定义模块文件的步骤

1.4.3 module.exports与exports的区别

1.4.4练习(去除空格)

1.5 内置(核心)模块

1.5.1 url

1.5.2 querystring

1.5.3 path

1.6 第三方模块(包)

二、npm与包

2.1 包的概念:

2.1.1 包来源

2.1.2 包的特点

2.2 常用npm命令【重点】

2.2.1 npm install 包名

2.2.2 npm install

2.2.3 npm uninstall 包名

2.2.4 npm init [-y]

为什么要创建项目自己的package.json文件?【重点】

2.2.5 npm -v

2.2.6 npm config

2.3 包管理工具 npm

2.3.1 介绍

2.3.2 版本号的介绍

2.3.3 第一次 安装包的说明

2.4 npm社区说明(看手册)

2.5 npm 淘宝镜像

?1)配置npm命令的源:(掌握)

2.6 package.json

2.6.1 简介

2.6.2 开发的问题

2.6.3 package.json使用步骤

2.6.5 使用命令创建package.json文件

2.7 包的分类

2.7.1 项目包

2.7.2 全局包

2.8 包加载机制【重点】

2.8.1 内置模块的加载机制

2.8.2 自定义模块加载机制

2.8.3 第三方模块加载机制

2.8.4 package.json中的main属性


一、模块系统

1.1 模块化介绍

1.1.1 传统开发的问题

随着项目的扩大,然后代码就越来越庞大 ,如果没有很好的规划,后期维护非常复杂(甚至就维护不了)。

比如:前端html中有很多特效会依赖js文件,前端有a.js文件、b.js文件,而a.js文件中的内容为:var usr="李四"; function demo(){};var email="lisi@qq.com"; b.js文件中的内容为:var email="zhangsan@qq.com"; function demo(){}; 当我们在c.html文件中同时引入了a.js和b.js文件后会报错,解决这些错误可以使用闭包、面向对象编程来解决,这些可以解决问题但没有一个统一的标准。

1.1.1 概述

nodejs的模块化概念

? ? ?JavaScript 是一个强大面向对象语言,它有很多快速高效的解释器。然而, JavaScript
标准定义的 API 是为了构建基于浏览器的应用程序。并没有制定一个用于更广泛的应用程序
的标准库。CommonJS 规范的提出,主要是为了弥补当前 JavaScript 没有标准的缺陷。它的终
极目标就是:提供一个类似 Python,Ruby 和 Java 语言的标准库.

? ? ?CommonJS ?就是模块化的标准,nodejs 就是 CommonJS( ( 模块化 ) 的实现。

? ? ?CommonJS模块化会应用于nodejs、vue、react等等框架语言。

1.1.2 nodejs的模块化分类

? ? ? 在node中,模块可以分为两类

? ? ? 一类是 Node 提供的模块,称为 核心 模块;

? ? ? ?另一类是用户编写的模块,称为 文件模块。


? ? ? ? 核心模块部分在 Node 源代码的编译过程中,编译进了二进制执行文件。在 Node 进
程启动时,部分核心模块就被直接加载进内存中,所以这部分核心模块引入时,文件定位和
编译执行这两个步骤可以省略掉,并且在路径分析中优先判断,所以它的加载速度是最快的。
: 如:HTTP ?模块 ?、URL ?模块、Fs ?模块都是 nodejs ?内置的核心模块。 ,可以直接引入使用。
? ? ? ? 文件模块则是在运行时动态加载,需要完整的路径分析、文件定位、编译执行过程、
速度相比核心模块稍微慢一些,但是用的非常多。 这些模块需要我们自己定义。 接下来我
下 们看一下 nodejs ?中的自定义模块。

? ? ? ? CommonJS (Nodejs ) 中 自定义 模块的规定:

? ? ? ? 1.我们可以把公共的功能 抽离成为一个单独的 js ?文件 作为一个模块,默认情况下面这
个模块里面的方法或者属性,外面是没法访问的。如果要让外部可以访问模块里面的方法或
者属性,就必须在模块里面通过 exports 或者 module.exports 暴露属性或者方法。
? ? ? ? 2. 在需要使用这些模块的文件中,通过 require 的方式引入这个模块。这个时候就可以
使用模块里面暴露的属性和方法。

1.2. Commonjs简述

? ? ?CommonJS ?就是模块化的标准,nodejs 就是 CommonJS( ( 模块化 ) 的实现。

? ? ?CommonJS模块化会应用于nodejs、vue、react等等框架语言。

1.2.1 组成

(1)如何定义数据和功能函数(如何定义公共代码)

(2)外部如何使用定义的数据和功能函数

1.2.2 定义规范的好处

既然是规范,那么就应该是大家默认都应该遵守的,这样就降低了沟通的成本,极大方便了各个模块之间的相互调用,利于团队协作开发。

1.3 模块的种类

  • 自定义模块:(开发者自己定义的模块,每一个js文件都可以称为一个模块)开发者,可以使用commonjs规范自己写的js文件,都称为自定义模块

  • 内置模块:(由Node.js官方提供,如:fs、path、querystring等)

  • 第三方模块:(由第三方开源出来的模块,使用前需要npm工具从npm社区下载)

1.4 nodejs自定义模块

1.4.1 介绍

在nodejs中每个.js文件都是一个封闭的空间,因为当前.js文件中的代码被一个匿名函数所包裹着,代码如下

function (exports, require, module, __filename, __dirname) {
let usr = '李四';
var hostname = 'www.jd.com';

//计算器
function jsq() {
    console.log('jsq()计算器方法');
}

console.log(arguments.callee.toString());
}

ndoejs自定义模块的语法(commonjs):【重点】

单个暴露:

exports.属性名=值

exports.方法名=function(){}

module.exports.属性名=值

module.exports.方法名=function(){}

// let usr = '李四';
// var hostname = 'www.jd.com';

// //计算器
// function jsq() {
//     console.log('jsq()计算器方法');
// }

// //arguments.callee:查看当前代码放在哪个函数中执行
// console.log(arguments.callee.toString());

//单个暴露:
exports.usr = '李四';
exports.hostname = 'www.jd.com';
module.exports.port = 80;

exports.jsq = function() {
    console.log('jsq()计算器方法');
}

module.exports.fn = function() {
    console.log('fn()方法在m1.js文件中');
}

?

批量暴露:

module.exports = { 属性名,方法名}

//批量暴露:
let hostname = 'www.qq.com';
var port = 8080;

function fn() {
    console.log('fn()方法在m2文件中');
}

module.exports = { hostname, port, fn, "usr": "张三", "x": "测试下", mydemo() { console.log('mydemo()方法在m2文件中'); } };

?自定义模块js

//引入自定义模块文件时要以./或../开头
let mm = require('./4-m1.js');
let mm2 = require('./5-m2.js');
let obj = require('./7-jsq.js');
// let mm3 = require('./8-m3.js');
let mm3 = require('./8-m3');
console.log(mm3, 333333);

console.log(obj, obj.jsq(9, 17));
console.log(mm, mm.usr, mm2.usr);
console.log(mm2);
mm.fn();
mm2.fn();
// console.log(mm, mm.usr, mm.hostname, mm.port);
// mm.jsq();
// mm.fn();

注意:单个暴露与批量暴露不能一起使用,因为exports是module.exports的引用,而module.exports是真实存在的,最终返回的是module.exports,演示代码如下:【重点】

9

1.4.2 定义、使用自定义模块文件的步骤

第一步:先创建.js自定义模块文件,在当前自定义模块文件中使用nodejs自定义模块语法来定义要暴露的属性或方法,比如:创建jsq.js模块文件,代码如下:

//计算器功能:
function jsq(num1, num2, flag = '+') {
    let total = 0;
    switch (flag) {
        case '+':
            total = num1 + num2;
            break;
        case '-':
            total = num1 - num2;
            break;
        case '*':
            total = num1 * num2;
            break;
        case '/':
            total = num1 / num2;
            break;
    }

    return total;
}
//单个暴露

module.exports = { jsq };

第二步:在app.js文件中使用上面定义的jsq.js模块文件,app.js代码如下:

注意: 引入自定义模块文件时要以./或../开头,否则会报错:Error: Cannot find module 'XXXX'【重点】

//引入自定义模块文件时要以./或../开头
let obj = require('./jsq.js');
console.log(obj.jsq(9, 17));
console.log(obj.jsq(9, 23,'*'));

1.4.3 module.exports与exports的区别

exports是module.exports的引用,而module.exports是真实存在的,最终返回的是module.exports,演示代码如下:【重点】

let obj = {};
let obj2 = obj; //地址引用
obj2.t = 100;
console.log(obj, obj2);//{ t: 100 } { t: 100 }
obj2 = {};
console.log(obj, obj2);//{ t: 100 } {}

module = { exports: {} };
exports = module.exports;
exports.xxy = 99;
// console.log(exports, module.exports, 8888);//{ xxy: 99 } { xxy: 99 } 8888
module.exports = { "ttt": 7777 }; //重新分配内存空间
console.log(exports, module.exports, 999);//{} { ttt: 7777 } 999

1.4.4练习(去除空格)

uniqueSpace.js模块文件的代码如下:

module.exports.uniqSpace = function(str) {
    let reg = /^\s+|\s+$/g;
    return str.replace(reg, '');
}

1.5 内置(核心)模块

fs/url/querystring/path

1.5.1 url

URL(Uniform Resource Locator,统一资源定位器),它是WWW的统一资源定位标志,就是指网络地址。

完整的URL格式如下:

协议://主机名:端口号/路径/资源名称?参数名=值&参数名2=值2

let curUrl = 'https://search.jd.com:80/Search?keyword=帽子&enc=utf-8&pvid=397affb661e34752ba567c770deba950';

let obj = new URL(curUrl);
let obj2 = obj.searchParams; //为Map数据结构
console.log(obj, obj.port, obj2, obj2.get('keyword'));
/* URL {
    href: 'https://search.jd.com:80/Search?keyword=%E5%B8%BD%E5%AD%90&enc=utf-8&pvid=397affb661e34752ba567c770deba950',
    origin: 'https://search.jd.com:80',
    protocol: 'https:',
    username: '',
    password: '',
    host: 'search.jd.com:80',
    hostname: 'search.jd.com',
    port: '80',
    pathname: '/Search',
    search: '?keyword=%E5%B8%BD%E5%AD%90&enc=utf-8&pvid=397affb661e34752ba567c770deba950',
    searchParams: URLSearchParams {
      'keyword' => '帽子',
      'enc' => 'utf-8',
      'pvid' => '397affb661e34752ba567c770deba950' },
    hash: ''
  } 80 URLSearchParams {
    'keyword' => '帽子',
    'enc' => 'utf-8',
    'pvid' => '397affb661e34752ba567c770deba950' } 帽子 */

?

1.5.2 querystring

const qst = require('querystring');
let str = "keyword=帽子&enc=utf-8&pvid=397affb661e34752ba567c770deba950";
let obj = qst.parse(str); //将查询字符串解析成对象  ***注意***
console.log(obj, obj.keyword, obj.enc);
let str2 = qst.stringify({ "usr": "lisi", "age": 20, "email": "lisi@qq.com" }); //将对象解析查询字符串
console.log(str2);
/* [Object: null prototype] {
    keyword: '帽子',
    enc: 'utf-8',
    pvid: '397affb661e34752ba567c770deba950'
  } 帽子 utf-8
  usr=lisi&age=20&email=lisi%40qq.com */

1.5.3 path

basename

extname

parse

join

const path = require('path');
console.log(__dirname);
let str = path.dirname(__dirname); //获取当前路径的上一层路径
console.log(str);
str = path.dirname(path.dirname(__dirname));
console.log(str);

let str2 = `${__dirname}/123.456.txt`;
console.log(str2);
let ext = path.extname(str2); //获取文件的扩展名  ***注意***
console.log(ext);

let curPath1 = `${__dirname}/mytest/user.txt`;
console.log(curPath1, 1111);
curPath1 = `${__dirname}../mytest/user.txt`;
console.log(curPath1, 222);
let curPath = path.join(__dirname, './mytest', 'user.txt'); //将不同的路径片段拼接成一个完整的绝对路径   ****注意****
console.log(curPath, 777);

curPath = path.join(__dirname, '../mytest', 'user.txt');
console.log(curPath, 888);

/* f:\中公前端学习\three\day05\代码
f:\中公前端学习\three\day05
f:\中公前端学习\three
f:\中公前端学习\three\day05\代码/123.456.txt
.txt
f:\中公前端学习\three\day05\代码/mytest/user.txt 1111
f:\中公前端学习\three\day05\代码../mytest/user.txt 222
f:\中公前端学习\three\day05\代码\mytest\user.txt 777
f:\中公前端学习\three\day05\mytest\user.txt 888 */

1.6 第三方模块(包)

在项目根目录下安装trim包: npm i trim

代码示例:

/引入trim包
const trim = require('trim');
// console.log(trim);

let str = "    Hello web ";
console.log(str.length);
console.log(trim(str).length);
console.log(trim.left(str).length);

二、npm与包

2.1 包的概念:

Node.js中的第三方模块又叫做包。就像电脑和计算机指的是同一个事物,第三方模块和包指的是同一个概念,只不过叫法不同。

npm主要内容有(1)包管理工具(2)npm社区。

2.1.1 包来源

包是由第三方个人或团队开发出来的,免费供给所有开发者使用。npm社区npm

2.1.2 包的特点

  • 包是基于内置模块( commonjs规范 )封装出来的,提供了更高级、更方便的API,极大的提高了开发效率

  • 包和模块之间的关系,类似于Jquery和原生js之间的关系

2.2 常用npm命令【重点】

2.2.1 npm install 包名

安装某一个包: npm i/install 包名[@版本号] [-g]

-g:全局安装

注意:如果使用npm i/install命令安装某个包而没有带-g参数时,要在项目的根目录下安装这个包,这样才能在这个项目任意位置都可以使用这个第三方包。【重点】

2.2.2 npm install

安装项目所有依赖的包: npm i/install

2.2.3 npm uninstall 包名

卸载某个包: npm uninstall 包名

2.2.4 npm init [-y]

创建项目自己的package.json文件: npm init [-y]

为什么要创建项目自己的package.json文件?【重点】

package.json文件会记录我们当前项目的相关信息(比如:项目名、开发者、入口文件、描述信息等),同时还会记录当前项目依赖哪些第三包,当我们把项目发给别人之前或上传到服务器之前可以手动删除项目依赖的所有第三方包,这样的话传输速度会加快,当别人拿到我们的项目后或把项目上传到服务器之后再使用npm i 把项目依赖的所有第三方包再安装上。

?

2.2.5 npm -v

查看npm的版本: npm -v

2.2.6 npm config

切换npm服务器到国内淘宝镜像服务器:npm config set registry https://registry.npm.taobao.org

注意:同一台电脑只需要执行一次上面的命令即可把npm服务器到国内淘宝镜像服务器上了。

查看npm服务器的配置信息:npm config list

2.3 包管理工具 npm

2.3.1 介绍

包管理工具指的是安装node环境后,自动安装了npm工具。Node Package Manager,简称 npm 包管理工具。

查看安装的版本 npm -v

2.3.2 版本号的介绍

第1位数字:表示大版本号,一般当软件整体重写,或出现不向后兼容的改变时,增加此位,此位是0时表示软件还在开发阶段。

第2位数字:表示功能更新,出现新功能时增加此位

第3位数字:表示小修改,如修复bug,只要有修改就增加此位

2.3.3 第一次 安装包的说明

  • 初次装包完成后,在项目文件夹下多一个node_modules的文件夹和package-lock.json的配置文件

  • node_modules文件夹用来存放所有已安装到项目中的第三方包require()导入第三方包时,就是从这个目录中查找并加载

  • package-lock.json配置文件用来记录node_modules目录下的每一个包的下载信息,例如包的名字、版本号、下载地址等

  • 开发者不要手动修改node_modules或package-lock.json文件中的任何代码,npm包管理工具会自动维护它们

2.4 npm社区说明(看手册)

npmhttps://www.npmjs.com/

npm 中文文档 | npm 中文网npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。https://www.npmjs.cn/

2.5 npm 淘宝镜像

?1)配置npm命令的源:(掌握)

npm config set registry https://registry.npm.taobao.org 

2)全局安装cnpm工具( 我们npm工具如何使用的,cnpm一模一样 ) 了解即可

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.6 package.json

2.6.1 简介

package.json文件会记录我们当前项目的相关信息(比如:项目名、开发者、入口文件、描述信息等),同时还会记录当前项目依赖哪些第三包,当我们把项目发给别人之前或上传到服务器之前可以手动删除项目依赖的所有第三方包,这样的话传输速度会加快,当别人拿到我们的项目后或把项目上传到服务器之后再使用npm i 把项目依赖的所有第三方包再安装上。

2.6.2 开发的问题

?

?

2.6.3 package.json使用步骤

{
    "name": "web_beijing",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [
        "nodejs",
        "mysql"
    ],
    "author": "LiangJin",
    "license": "ISC",
    "dependencies": {
        "trim": "^1.0.1"
    }
}

必须包含 name,version,main 完整属性如下表:

属性名说明
name包(项目)的名称
version包(项目)的版本号
description包(项目)的描述
main包(项目)入口文件
scripts定义快捷脚本命令
keywords项目关键词
author作者
license协议
dependencies包(项目)依赖的模块
devDependencies包(项目)开发依赖的模块

2.6.5 使用命令创建package.json文件

在某个项目的根目录下执行命令: npm init [-y]

2.7 包的分类

2.7.1 项目包

被安装到项目的node_modules目录中的包,都是项目包。

项目包又分为两类:

1)开发依赖包:被记录到devDependencies节点中的包,只在开发期间会用到

2)核心依赖包:被记录到dependencies节点中的包,在开发期间和项目上线之后都会用到。

2.7.2 全局包

工具类的包称为全局包,使用的时候npm一样,在cmd命令行使用的,并不是在代码文件中引入的。

安装命令:npm i 包名 -g

使用特点:

1)并不是在代码文件中引入的,全局包像npm一样当作可执行程序进行使用

2)决定某个包是否需要全局安装,需要参考官方提供的使用说明书

3)全局包会被安装到C:\Users\用户目录\AppData\Roaming\npm\node_modules目录下。

2.8 包加载机制【重点】

2.8.1 内置模块的加载机制

内置模块的加载优先级最高。

2.8.2 自定义模块加载机制

1)使用require()加载自定义模块时,必须指定以./或../开头的路径标识符。

2)如果没有指定./或../这样的路径标识符,则Node.js会把它当作内置模块或第三方模块进行加载。

3)在使用require()导入自定义模块时,如果省略了文件的扩展名,则Node.js会按*.js、 *.json顺序分别尝试加载以下的文件:

(1)文件名.js扩展名进行加载

(2)文件名.json扩展名进行加载

(3)自定义模块不要放在node_modules中。

(4)加载失败,终端报错Error:Cannot find module 'xxx'

2.8.3 第三方模块加载机制

1)引入第三方模块时会在当前目录中查找这个包,如果在当前目录中找不到这个包会自动返回到上一级目录中去查找,一直到某个盘符下还是找不到这个包时则报错:Error:Cannot find module 'xxx'

2)如果没有找到对应的第三方模块,则移动到再上一层父目录中,进行加载,直到当前项目文件的盘符根目录。

2.8.4 package.json中的main属性

当我们使用require('../')而省略模块文件名这种方式引入模块时,则会把package.json文件中的main属性值当作模块文件名来查找这个模块文件,如果package.json文件中的main属性没有设置属性值,则使用index.js作为默认值来查找index.js模块文件,最终如果都没找到则报错:Error:Cannot find module 'xxx'

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-27 09:48:55  更:2021-11-27 09:50:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 22:23:06-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码