模块化-理解模块化

根目录
├── index.html            # 主页的页面
├── index.js              # 主页需要用到的js代码
│   └── getData()         # 是index.js中定义的函数
└── tool.js               # 为整个项目提供公共方法└── doSomething(){ }  # 是tool.js中定义的函数

对于如上的代码结构,如何让index.js中的getData去使用tool.js中的doSomething()函数?

  1. 上面的代码写法,会有什么问题?
  2. 为什么不能直接让index.js来直接使用tool.js的函数,而要通过index.html来统一管理一下呢?

原因很简单:es5中不支持模块化(不能直接在一个js文件中去引用另一个js文件的方法,必须要通过第三个文件.html来引入)

啥是模块化?

一个js文件可以引入其他的js文件,能使用引入的js文件的中的变量、数据,这种特性就称为模块化。

使用模块化开发可以很好的解决变量、函数名冲突问题,也能灵活的解决文件依赖问题。

模块化的发展

  • 以前
    es5不支持模块化,让前端人员很为难。为了让支持模块化,我们一般会借用第三方库来实现:

    • sea.js. SeaJS - A Module Loader for the Web
    • require.js. RequireJS
  • 现在

    • es6原生语法也支持模块化(并不表示浏览器也直接支持模块化 --- 需要单独设置一下)
    • Nodejs内部也支持模块化(与es6的模块化有些不同之处),具体的语法在后面来介绍。

常见的模块化规范有

  • CommonJS 规范(nodejs 默认支持的)
  • ES6 模块化规范
  • CMD 和 AMD 模块化规范(不再推荐使用)

模块化-体验模块化

演示性的学习,让大家了解几种模块化的写法

  • nodejs的模块化
  • es6的模块化
  • sea.js
  • require.js

参考:LABjs、RequireJS、SeaJS 哪个最好用?为什么? - 知乎

nodejs中的模块分类

每个模块都是一个独立的js文件。每个模块都可以完成特定的功能,我们需要时就去引入它们,并调用。不需要时也不需要管它。(理解于浏览器的js中的Math对象)

nodejs模块的分类

  • 核心模块
    • 就是nodejs自带的模块,在安装完nodejs之后,就可以随意使用啦。相当于学习js时使用的Array对象。
    • 例:fs, http, querystring, path
    • 全部模块的源代码 node/lib at master · nodejs/node · GitHub
  • 自定义模块
    • 程序员自己写的模块。就相当于我们在学习js时的自定义函数。
  • 第三方模块
    • 其他程序员写好的模块。nodejs生态提供了一个专门的工具npm来管理第三方模块,后面我们会专门讲到。
    • 相当于别人写好的函数或者库。例如我们前面学习的JQuery库,arttemplate等。

自定义模块-基本介绍

目标

掌握自定义模块的使用背景和步骤

背景

我们对代码的封装是以模块(一个独立的.js文件)为单位进行的。一般的做法是实现好某一个功能之后,封装成一个模块,然后在其它文件中使用这个模块。

类比于js自定义函数,自定义模块的使用场景是:

  • 代码需要在项目重用
  • 代码需要提供给他人使用
  • 代码虽然不需要重用,但封装成模块有利于优化代码结构,方便后期维护与扩展

步骤

一共有两步:

  1. 定义模块。就是创建一个js文件, 对外导出我们希望导出的内容。
  2. 使用模块。在需要使用的地方去导入模块文件。

Node.js 中的 CommonJS 的模块化规范

CommonJS 规范

CommonJS 规范中主要规定了以下 3 项内容:

  • 导入其它模块时,统一使用 require() 函数。
  • 每个 .js 文件,都是一个独立的模块,模块内的成员都是私有的。
  • 在每个 JS 模块中,使用 module.exports 向外共享成员。

图示

根目录
├── user.js  # 定义模块
└── test.js  # 引入user.js模块

注意

  • module.exports 是固定写法,一般放在文件的最末尾,也只用一次。
  • module.exports表示当前模块要暴露给其它模块的功能。
    • 它可以导出对象,数组,函数等等类型。为了方便组织代码,导出对象的情况比较多。
    • 不必要导出所有函数,对象,数组等。那些没有导出的部分就相当于这个模块的内部变量了。在下图中变量1,函数1,数组就是模块内部的数据,在外部无法别访问到。

小结

所谓定义模块,就是新建一个js文件。文件取名时,要注意一下:

  • 一般会用模块名给它命名。类比于核心模块,例如,你的模块叫myModule,则这个js文件最好叫myModule.js
  • 不要与核心模块的名字重复了。就像我们定义变量不要与核心关键字重名,你自己定义的模块也不要叫fs.js,因为nodejs有一个核心模块就叫fs.js。
  • 要记得导出模块

自定义模块-实操

假设在工作中我们自己定义了一些工具方法, 而这些工具方法是可以在其他项目中使用的。此时我们就可以采用自定义模块的方式来处理。

素材

以下是一个对时间进行格式化的函数

const formatDate = (dateTime) => {const date = new Date(dateTime) // 转换成Data();const y = date.getFullYear()let m = date.getMonth() + 1m = m < 10 ? '0' + m : mlet d = date.getDate()d = d < 10 ? ('0' + d) : dreturn [y,m,d].join('-')
}

这个函数如何才能被复用呢?

我们以此为基础,开始做自定义模块的动作

思路

根目录
├── tool.js # 把我们要用到的公共方法 封装在这个文件中
└── test.js # 测试tool.js中封装的方法

操作

定义模块

// 方法定义在这里
const formatDate = (dateTime) => {const date = new Date(dateTime) // 转换成Data();const y = date.getFullYear()let m = date.getMonth() + 1m = m < 10 ? '0' + m : mlet d = date.getDate()d = d < 10 ? ('0' + d) : dreturn [y,m,d].join('-')
}// 通过module.exports来导出模块
module.exports = {formatDate
};

记得要导出模块: 在文件尾部,使用module.exports来导出模块。

导入模块

完成了模块定义之后,我们就可以在另一个文件中使用这个模块了。

基本步骤是:

1. 导入模块;格式:const 模块名 = require('./模块路径')

2. 先打出来看看;

当一个模块被成功引入之后,就可以类比使用核心模块的过程一样去使用它们了。

下面是示例代码:

// test.js
// 1. 导入模块
// 注意这里使用的是相对路径。可省略.js.
const tool = require('./tool.js');// 在使用之前请先打印出来看看
console.log(tool);// 2. 使用模块中的方法
console.log(tool.formatDate(Date.now()))

注意:

  • 使用require语句引入你定义好的模块
  • 这里必须使用相对路径的格式去引入自定义模块。"./" 也不能省略。

练习

将如下的方法补充到上面封装的tool.js中,并导出使用

//tools.js
const relativeTime = (oldTime) => {const t = new Date(oldTime)// Date.now():现在的时间戳(毫秒)// t.getTime():旧时间的时间戳(毫秒)const diff = Date.now() - t.getTime() // 相隔多少毫秒// Math.floor 向下取整: 1.7年 ---> 1年前const year = Math.floor(diff / (1000 * 3600 * 24 * 365))if (year) {return `${year}年前`}const month = Math.floor(diff / (1000 * 3600 * 24 * 30))if (month) {return `${month}月前`}const day = Math.floor(diff / (1000 * 3600 * 24))if (day) {return `${day}天前`}const hour = Math.floor(diff / (1000 * 3600))if (hour) {return `${hour}小时前`}const minute = Math.floor(diff / (1000 * 60))if (minute) {return `${minute}分钟前`} else {return '刚刚'}
}

导出模块的两种方式

目标

了解两种导出的方式(难点)

导出模块有两种方式

参考

  • exports
  • module.exports
// 定义方法,常量
const myPI = 3.14
const add = (a,b) => a + b;// 导出,两种方法任意都可以
// 方法一:
exports.myPI = myPI
exports.add = add// 方法二:
module.exports.myPI = myPI
module.exports.add = add// 方法二(变形)
module.exports  = {myPI,add
}

在阅读其它人的代码时,可能会遇到这两种不同的写法。所以我们还是有必要了解一下的。

cookie模块,body-parser模块,arry-flatten模块中的导出均采用不同的方式。

两个对象的关系

  • 初始exports和module.exports是指向同一块内存区域,其内容都是一个空对象。(exports是module.exports的别名)即:
exports === module.exports // 输出是 true

所以下面两种写法的效果是一样的:

 // 写法1 mymodule.jsexports.f = function(){ }exports.pi = 3.1415926
 // 写法2 mymodule.jsmodule.exports.f = function(){ }module.exports.pi = 3.1415926
  • 在定义模块时:
    如果直接给exports对象赋值(例如:exports={a:1,b:2}),此时,exports就不会再指向module.exports,而转而指向这个新对象,此时,exports与module.exports不是同一个对象。

在引入某模块时:以该模块代码中module.exports指向的内容为准。

图示

结论

在导出模块过程中,建议只用一种方式(建议直接使用module.exports)

了解npm和包

npm

  • npm 全称 Node Package Manager(node 包管理器),它的诞生是为了解决 Node 中第三方包共享的问题。
  • npm 不需要单独安装。在安装Node的时候,会连带自动安装npm
  • npm -v检查安装的情况。
  • 官网

当我们谈到npm时,我们在说两个东西:

  • 命令行工具。这个工具在安装node时,已经自动安装过了,不需要额外安装。
  • npm网站。这是一个第三方模块的"不花钱的模块超市",我们可以自由地下载,上传模块。

不花钱的模块超市

npm网站收集了前端的各种工具. 之前学习过:

jQuery, bootStrap, flexible.js, arttemplate.js, layui.js, echarts.js........

你是如何下载的?官网下载?


有没有一个想法:在一个地方下载所有的库(模块.....)

包(package)与模块关系

npm网站上去下载我们的需要的代码时,它们是以""这种结构放在npm网站上的。先来了解下包和模块的关系。

  • nodejs中一个模块就是一个单独的js文件
  • Node.js 中的第三方模块,又叫做包、第三方包、依赖包
  • 包是多个模块的集合。一个模块的功能比较单一,所以一个包一般会包含多个模块。
  • npm 管理的单位是包。类似于网站和网页的区别:一个网站一般会包含多个网页。

找自己需要的包

npm 公司提供了一个非常著名的搜包网站:https://www/npmjs.com/。它是全球最大的第三方包共享平台。

小结

  1. npm中的第三方模块是以______的格式放在的npm网站上的,供程序员______下载
  1. 一个包内部可能会有______个模块

npm下载使用包

目标

掌握下载包的使用方式,了解dayjs的基本使用

步骤

分成三步:

  • 初始化项目。npm init 如果之前已经初始化,则可以省略。
  • 安装包。 npm install 包名。[注意:保持联网的状态哈]
  • 引入包,使用

第一步:初始化项目

这里提到的项目并不是某个具体的功能,只是要创建一个空文件夹即可(注意,不要起中文名字哈)。

进入到项目所在的根目录下,启动小黑窗(建议:按下shift键,点击右键,在弹出的菜单中选择 “在此处打开命令行”)

输入如下命令:

npm init --yes
// --与yes之间没有空格, -- 与init之间有空格
// 或者是 npm init -y

init命令用来在根目录下生成一个package.json文件,这个文件中记录了我们当前项目的基本信息,它是一切工作的开始。

第二步:安装包

npm 这个超市中有现成的写好的代码,我们想下载来用,这个过程就是安装包,或者叫下包、装包

安装命令: npm i 包名

根据我们遇到的实际问题,我们来引入相应的包来解决它们。例如,我们在开发一个项目,其中涉及一些对日期时间的处理可以安装dayjs包。

安装day.js包

day.js是一个专门用来处理日期时间的一个包

主页地址:Day.js中文网

安装命令:npm install dayjs

第三步:使用包

当我们已经下载好一个包之后,就可以像使用核心模块一样去使用它。

格式是:const 常量名 = require('包名') 这个格式与引入核心模块的格式是一样的。

// 从npm下载 别人写的好代码,在本地引入,并使用
const dayjs = require('dayjs')console.log( dayjs()
.startOf('month')
.add(1, 'day')
.set('year', 2018)
.format('YYYY-MM-DD HH:mm:ss') );console.log(dayjs);

以上代码的整体目录结构

project01
├── node_modules        #  统一放置下载的包
│   └── dayjs                #  某个包
├── xx.js                        #  业务代码, 引入dayjs来使用
├── package.json           #  记录本项目的信息
└── package-lock.json   #  下载包的详细信息

小结

下载使用包的步骤有三步,分别是:________ (只需要做一次), ________, _______

下载使用包的细节1-package.json

npm init 命令

在某个目录下开启小黑窗,输入如下命令:npm init

它会启动一个交互式的程序,让你填入一些关于本项目的信息,最后生成一个package.json文件

如果你希望直接采用默认信息,可以使用:

npm init --yes
// 或者是 npm init -y

说明:

  • 这个命令只需要运行一次,它的目的仅仅是生成一个package.json文件。
  • 如果项目根目录下已经有了package.json文件,就不需要再去运行这个命令了。
  • 这个package.json文件后期是可以手动修改的。

package.json文件

它一般是由npm init命令创建出来的(也可以正常被CV),它的整体内容是一个json字符串,用来对当前项目进行整体描述

其中最外层可以看作是一个js的对象(每一个属性名都加了"",这就是一个典型的json标记)。

这个文件中有非常多的内容,我们目前学习如下几个:

  • name: 表示这个项目的名字。如是它是一个第三方包的话,它就决定了我们在require()时应该要写什么内容。
  • version:版本号
  • keywords:关键字
  • author: 作者
  • descrption: 描述

其它可参考

1.package.json文件 -- JavaScript 标准参考教程(alpha)

2.package.json | npm 安装文档

下载使用包的细节2-node_modules文件夹

作用

这个文件夹中保存着我们从npm中下载来的第三方包。在使用npm install 命令时,会从npm网站下载对应的包到这个文件夹中。

下载包的逻辑

npm install 包时,它会先把包对应的资料下载下来,如果包还有其他的依赖项,也会下载下来;如果依赖项还有依赖项,会继续下载。

下载使用包整体回顾

执行逻辑

当键入npm install XXX之后(这里假设这个XXX包是存在的,也没有出现任何的网络错误):

  1. 如果有package.json
    (1) 修改package.json文件。根据开发依赖和生产依赖的不同,决定把这句记录在加在devDependencies或者是dependencies列表中。
    (2) 修改node_modules文件夹
    1. 如果有node_modules文件夹,则直接在下面新建名为XXX的文件夹,并从npm中下来这个包。如果这个包还有其它的依赖,则也会下载下来。
    2. 如果没有node_modules,则先创建这个文件夹,再去下载相应的包
  1. 如果没有package.json。会给一个警告信息。

小结

  • 建议先用init命令创建package.json之后,再去install
  • 在分享代码时,我们一般不需要把node_modules也给别人(就像你不需要把day.js给别人,因为他们可以自己去下载)。对方拿到我们的代码之后,先运行npm install(后面不接任何的包名),自己去安装这些个依赖包。

下载包-修改镜像源

下包速度慢的原因:默认情况下,npm 从一个名为 https://registry.npmjs.org/ 的服务器上下包。这个服务器在国外,因此下包速度会非常慢。

解决方案:把 npm的下包地址,从国外的服务器切换为国内的服务器。

检查当前的下包地址:

npm config get registry

把下包的地址切换为国内的淘宝服务器

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

全局安装包和本地安装包

我们通过npm install 命令来安装包,简单说就是把包从npm的官网(或者是指定的镜像源)下载到我们自己的电脑中。那具体这个包下载到哪里了,还是有一点讲究的。

分成两类:

  • 全局安装: 包被安装到了系统目录(一般在系统盘的node_modules中)。
    • 命令:npm install -g 包名 或者  npm install 包名 -g
    • 辅助提示:
npm root -g // 查看全局包的安装目录
npm list -g --depth 0 //查看全局安装过的包
  • 局部安装(或者叫本地安装),包安装在当前项目的根目录下(与package.json同级)的node_modules中。
    • 命令:npm install 包名

全局包与本地包的区别

  • 全局安装的包一般可提供直接执行的命令。我们通过对一些工具类的包采用这种方式安装,如:
    gulp, nodemon, live-server,nrm等。
  • 本地安装的包是与具体的项目有关的, 我们需要在开发过程中使用这些具体的功能。

一个经验法则:

  • 要用到该包的命令执行任务的就需要全局安装
  • 要通过require引入使用的就需要本地安装

一个判断标准:看这个包的说明文档

小结

  1. 在下包的时候,______ 参数的作用是:把包安装到全局的用户目录之下。
  2. 要用到该包的命令执行任务的就需要______安装
  3. 要通过require引入使用的就需要 _____ 安装

全局安装nrm包

目标

掌握 nrm 的安装和使用,能用它快速切换npm镜像源

nrm的作用

nrm 这个工具是帮助我们切换安装包的来源的。因为下载包时,默认是从npm官网(国外的网站)下载,速度可能会比较慢,我们可以手动去切换安装来源

不应该只限于某个具体的项目,所以我们采用全局安装的方式来安装它。

nrm包的地址:nrm - npm

nrm的使用方法

下载使用的操作步骤

共三步

  • 第一步: 全局安装 npm install nrm -g
  • 第二步:列出所有的源信息(*)标注的就是当前使用的源 nrm ls
  • 第三步:根据需要切换源。例如:指定使用taobao源。nrm use taotao

接下来,正常安装你需要的包

如果nrm ls不能用,请看这里:

安装npm后,nrm ls 报错internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)_LQCV587的博客-CSDN博客

const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

全局安装nodemon包

背景

我们每次修改了代码,要想代码生效都需要重新运行命令:

这有点麻烦哈。

有没有一个工具会自动检测到我们的修改并自动重新运行我们的代码呢?有,它叫nodemon。地址

作用

它能帮我们自动检测到我们的代码的修改,并自动重新运行我们的代码

安装 nodemon

通过npm包管理工具来进行安装。

步骤:

在任意位置 打开一个小黑窗,输入如下命令:

npm install -g nodemon 回车。

此操作需要联网,根据网络速度所耗时间不同。如果这个命令执行完成并没有报错,就是说明安装成功了。

使用nodemon

等待安装成功之后,使用方法也非常简单:在命令中,使用nodemon来代替node

例如:

// 原来是:
node server.js// 现在是
// 改成 nodemon server.js
nodemon server.js

它的好处在于会自动监听server.js这个文件的变化,如果变化了,就会重新自动再去运行。相当于是如下伪代码:

while(server.js 变化了){node server.js
}

说明:

  • 它是一个第三方的包(其它程序员写的工具)
  • 之前的node server.js还是可以用的。

可能会出现的错误及解决方案

  1. 如果报错如下

  • 解决办法是:
    • 管理员 方式,打开命令行(powershell)窗口
    • 执行 set-ExecutionPolicy RemoteSigned;
    • 在出现的选项中,输入 A,回车。
    • 重新打开 小黑窗

2.如果报错如下

  • 解决办法是:添加电脑的环境变量

全局安装serve包

它用来快速生成静态网页服务器

安装

npm i -g serve

使用

开发依赖和生产依赖(了解)

在本地安装包时,表示我们这个项目要用到这个包,换句话说,我们这个项目要想成功运行,要依赖于这些个包。

但在,具体在项目进行的哪一阶段依赖于这些包呢?也有具体的差异。

本地开发 ----> 上线运行

理解

举个生活中建房子的场景:

在建房子时,我们依赖:

  • 辅助工具:尺子,水平仪,脚手架
  • 原材料:钢筋,水泥

在住房子时,我们依赖:

  • 原材料:钢筋,水泥

在房子进入到了使用阶段时,我们就不再需要尺子,水平仪,脚手架等这些个辅助工具了。我们买一所房子时,也不应该支付巨型脚手架的费用。

在开发前端项目的过程中也存在类似的问题:我们的开发过程和使用过程是分开的,开发项目时需要用到的包可能在使用项目时就不需要用到了。

假设有这么两个包:

  • gulp-htmlmin。这个工具是用来把html代码进行压缩的(去掉空格,换行等),我们需要在开发时使用它,而项目一旦上线,我们就不再需要它了。,因此将它归类为"开发依赖"。
  • axios。在开发时参与源码编写,在发布上线的生产环境中也是需要它的。不仅在开发环境编写代码时要依赖它、线上环境也要依赖它,因此将它归类为"生产依赖"。

操作

这两种依赖关系,在具体操作的过程中,有如下区别

  1. 保存到开发依赖(devDependencies)
npm install 包名 --save-dev
// 或者 npm install 包名 -D

通过这种方式安装的包出会现在package.json文件中的devDependencies字段中。

  1. 保存到生产依赖(dependencies):
npm install 包名
// 或者 npm install 包名 -S
// 或者 npm install 包名 --save

通过这种方式安装的包出会现在package.json文件中的dependencies字段中。

技巧

  • 加了-D :  开发依赖,这就表示这个工具包只在开发项目时候要用,项目开发完成就不需要
  • 不加-D: 生产依赖,这就表示这个工具包在项目做完了之后也要用。

什么包加上-D,什么包不要加?------- 看文档

小结

  1. 在下包的时候,-S 参数的作用是:把包记录到 ______ 文件的 ______ 节点之下,参数的完整写法是 ______, 它是 ________ 依赖
  1. 在下包的时候,-D 参数的作用是:把包记录到 ______ 文件的 ______ 节点之下,参数的完整写法是 ______, 它是 _________ 依赖

npm包从创建到发布

背景

在工作中我们积累了一些自己的功能代码。这些功能代码可以在其它项目中重复使用,此时我们就可以选择把代码打包放在[npm]上,在需要要使用的项目中,通过npm install去下载下来。

准备工作:

  1. 在npm上注册账号

npm项目初始化

在本地磁盘上创建一个空项目,取文件夹名为myNpm(根据自己的实际情况去名字)。注意请先去npm网官去确定一下,这个项目名是否已经被占用了。(如果这个名字已经被占用了,则你是无法向npm上上传的)。

检查方式

npm view 包名
# 这个命令用来查看 某个包的信息
# 如果返回404,说明这个项目名在npm官网上找不到,此时你就可以使用。
# 否则,说明不可用。

很确定地告诉你,myNpm这个包已经被别人占用了,你需要去自己用另一个名字哈。

npm init --yes

命令来创建一个package.json文件,对你项目myNpm信息进行设置。

完成功能开发

正常开发,完成你的代码。在默认情况下,index.js是这个项目的入口文件。

下面是一个最简单的示例:

//tools.js
const relativeTime = (oldTime) => {const t = new Date(oldTime)// Date.now():现在的时间戳(毫秒)// t.getTime():旧时间的时间戳(毫秒)const diff = Date.now() - t.getTime() // 相隔多少毫秒// Math.floor 向下取整: 1.7年 ---> 1年前const year = Math.floor(diff / (1000 * 3600 * 24 * 365))if (year) {return `${year}年前`}const month = Math.floor(diff / (1000 * 3600 * 24 * 30))if (month) {return `${month}月前`}const day = Math.floor(diff / (1000 * 3600 * 24))if (day) {return `${day}天前`}const hour = Math.floor(diff / (1000 * 3600))if (hour) {return `${hour}小时前`}const minute = Math.floor(diff / (1000 * 60))if (minute) {return `${minute}分钟前`} else {return '刚刚'}
}const formatDate = (dateTime) => {// console.log(date)// date = new Date();const date = new Date(dateTime) // 转换成Data();console.log(date)var y = date.getFullYear()console.log(y)var m = date.getMonth() + 1m = m < 10 ? '0' + m : mvar d = date.getDate()d = d < 10 ? ('0' + d) : dreturn y + '-' + m + '-' + d
}// 通过module.exports来导出模块
module.exports = {formatDate,relativeTime
};

切换当前npm源到官网

由于我们需要把包上传到npm上,所以要先确保当前的npm源是npmjs.org。与之相关的命令有如下两条。

(1)查看当前的npm的registry配置.

npm config get registry
# 查看当前的npm的registry配置,确保是https://registry.npmjs.org# 如果不是,可以通过如下命令来设置
# 手动设置registry
npm config set registry https://registry.npmjs.org 

(2)或者使用nrm工具来设置:

连接npm

npm adduser

这个命令需要输入四个信息以供连接上npmjs:

  • 用户名
  • 密码
  • 邮箱(是你在npmjs官网上注册时使用的信息)
  • 校验密码。它会向你的邮箱发邮件

如果你已经不是第一次连接了,这一步是可以省略的。

你也可以通过如下命令检查自己是否连接成功了。

> npm who am i

如果成功了,则可以进行最后一步了:publish

如果想退出:

npm logout

把包上传到npm

命令: npm publish

如果成功:

-----------------------------------
npm notice
npm notice package: tool61@1.0.0
npm notice === Tarball Contents ===
npm notice 1.3kB index.js
npm notice 220B  package.json
npm notice === Tarball Details ===
npm notice name:          tool61
npm notice version:       1.0.0
npm notice package size:  855 B
npm notice unpacked size: 1.5 kB
npm notice shasum:        3bfba7bc92e242810a850ac39ded7ebe992a6d9c
npm notice integrity:     sha512-VoRuxxbcGzXen[...]v3tKWYUT1B1AQ==
npm notice total files:   2
npm notice
+ tool61@1.0.0

出错的可能是:

  • 这个包名被别人先用了。
  • 包的版本号不对:每次publish时,包的版本号都应该要大于之前的版本号。
  • 文件过大。你可能需要创建.npmignore文件来设置在打包时要忽略哪些文件。如下是一个demo.
# .npmignore
/node_modules
npm-debug.log
/src
/examples
/build

如果没有报错,则表示一切ok,你可以用你的帐号密码登陆npm,去查看你名下的package是否有了myNpm

下载使用

通过npm install 包名即可来安装包。 然后,告诉你的小伙伴们去下载使用吧。

删除包

npm unpublish --force //强制删除

如果你的包没有什么用处,建议删除掉,以节约公共资源。

更新包

  1. 修改代码,保存。
  2. 更新版本号。可直接在package.json中修改:只能改大,不能改小。
  3. 重新publish

拓展:npm包的问题的问答

为什么要把自己的代码上传到npm上?

  • 优秀的代码供所有人复用
  • 提升职场竞争力 ----- 在团队其它同事没有做,你做了!
  • 有了这个目标,我们写项目(写代码)时,就会更加考虑代码的通用性。

优秀的代码从哪里来?

  • 自己写的,同事写的,总结别人....

把代码上传到npm上去,有格式要求吗?

有,必须要是的格式

包是什么格式?

格式:

  • 一定要有   package.json这个文件。 它就是用来对包进行整体说明。(name,  version, description, author, dependencies, ......). npm init --yes
  • 有自己的代码文件。这个代码文件要在package.json中的main中声明。

在上传到npm之前,我们需要切换镜像吗?

需要,我们必须要把代码上传到npm的官网。

通过 nrm use npm 来切换

在上传时,需要登陆吗?

需要,在命令行中登陆。 npm adduser  这一个操作只需要做一次

在上传时,对包名有约定吗?

有。 1. 不能与现有包重名;2. 包名只能是小写字母+数字+中划线

上传的命令是什么?

npm publish

上传出错的可能性有?

  1. 你的帐号还没有通过验证 (在你登记的邮箱里,会收到一封邮件,要去点击确认)。 qq邮箱好像不支持在手机中操作, 建议在pc中浏览器里进行操作。
  2. 没有登陆, 没有做npm adduser
  3. 网不好!

如何对包进行版本更新?

  1. 更新代码,准备重新发布
  2. 升级版本号(只能改大,不能改小)。 在 package.json中去修改version值
  3. npm publish

如何去下载包

命令:npm i 包名

  1. 在另一个项目中去下载包
  2. 为了提升下载速度,我们会切换镜像到taobao。

虽然我们上传是传到npm官网,但是,它会自动同步(例如:每隔15分钟就会通过其它镜像最新的包的信息)给其它的镜像 --- taobao, cnpm.....

require的加载机制

在我们使用一个模块时,我们会使用require命令来加载这个模块。以加载一个自定义模块为例,require(文件名)的效果是:

  1. 执行这个文件中的代码
  2. 把这个文件中的module.exports对象中的内容返回出来。

以如下代码为例:

// moudule1.js
var a = 1;
var b = 2;
console.log(a+b);
var c = a+b;
module.exports = {data: c
}

在index.js中使用模块

// index.js
const obj = require('./moudule1.js');
console.log(obj);//这里的obj对象就是moudule1.js中的module.exports对象

require加载规则:

  • require 优先加载缓存中的模块。同一个模块第一次require之后,就会缓存一份,下一次require时就直接从缓存中去取。
  • 如果是加载核心模块,直接从内存中加载,并缓存
    • 加载核心模块的格式是 const xxx = require("模块名") 。不能写相对路径!
  • 如果是相对路径,则根据路径加载自定义模块,并缓存
    • require('./main')为例( 省略扩展名的情况)
    • 先加载 main.js,如果没有再加载 main.json,如果没有再加载 main.node(c/c++编写的模块),找不到就报错。
  • 如果不是自定义模块,也不是核心模块,则加载第三方模块
    require('XXX')为例:
    • node 会去本级 node_modules 目录下的xxx文件夹中找xxx.js ----> xxx.json ----> xxx.node(找到一个即返回),找到并缓存。
    • 如果找不到,node 则取上一级目录中的node_modules下找 , node_modules/xxx 目录,规则同上
    • 如果一直找到代码文件的文件系统的根目录还找不到,则报错:模块没有找到。

在module.paths命令中可以看到搜索路径中包含node_modules这个文件夹

附:npm 常用命令

  • 查看
npm -v                 // 查看npm 版本
where node              // 查看node的安装目录
where npm               // 查看npm的安装目录
npm root -g             // 查看全局包的安装目录
npm list -g --depth 0   // 查看全局安装过的包
  • 升级 npm
npm install npm --global  // 简写成 -g
npm install npm -g
  • 初始化 package.json
npm init -y // 或者是npm init --yes
  • 安装第三方包
// 安装当前目录下package.json中列出的所有的包
// 如果之前安装了包,又在package.json中手动删除依赖
// 它相当是删除包
npm install// 全局安装
npm install 包名 -g  // npm install -g 包名 // 本地安装,没有指定版本,默认安装最新的版本
npm install 包名// 一次安装多个包,空格隔开
npm install 包名1 包名2 包名3// 安装指定版本的包
npm install 包名@版本号// 简写。把install简写成 i
npm i 包名
  • 删除已安装的包
npm uninstall 本地安装的包名
npm uninstall 全局安装的包名 -g
  • 设置npm的register
    如果你不想用 nrm ,下面这个原生的命令也可以切换镜像源(从哪里下载包)。
npm config set registry https://registry.npm.taobao.org## 所有npm i 包 都会从taobao的镜像去下载。
## 配置后可通过下面方式来验证是否成功
npm config get registry

参考

最后练习

nodejs-day02

了解node.js模块化和npm包相关推荐

  1. Node.js 模块以及npm包的管理和使用

    Node.js模块系统 Node.js的模块系统是将可重用代码封装在各种模块中,减少了应用程序的代码量,模块系统提高了开发效率和代码的可读性,并且模块打包代码的方式不会改变全局作用域,开发人员可以在被 ...

  2. [Node.js] mySQL数据库 -- NPM包

    CommonJS 1.导入模块用require 类比于script src= 2.暴露出去(导出) exports (function(window){ let jQuery-{}; window. ...

  3. 模块加载及第三方包:Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session

    1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发 一个功能就是一个模块,多个模块可以组成 ...

  4. Node.js模块化开发(非常详细,满满的干货)

    下面是对Node.js模块化开发的整理,西洼港可以帮助到有需要的小伙伴~ 文章目录 Node.js模块化开发 JavaScript开发弊端 Node.js模块化开发 模块成员导出的export方法 模 ...

  5. Node.js 模块化的操作,简单明了的代码帮助你明白后端的实现和前端之前的交互,及解决跨域等问题

      Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...

  6. Node.js模块化开发

    Node.js模块化开发 一.Node.js模块化开发 二.系统模块 1.什么是系统模块 2.系统模块fs文件操作 3.系统模块path路径操作 三.第三方模块 1.什么是第三方模块 2.获取第三方模 ...

  7. [Node.js] 模块化 -- path路径模块

    路径问题 nodejs中相对路径,相对的是运行这个node文件的小黑框的路径而言的. 相关变量 __dirname 获取的是当前这个文件所在的这个文件夹的绝对路径 __filename 拿到的是当前这 ...

  8. 【微信小程序】小程序开发—node.js下载,npm配置以及组件使用

    目录 一.下载Node.js 二.微信开发者工具中安装Node.js 三.用Node.js中的npm安装vant组件 一.下载Node.js 1.官方下载地址:node.js官方下载地址 直接下载第一 ...

  9. Node.js中的npm与包

    npm与包 一.包 1.包是什么? 2.包是干啥的? 3.包的下载 二.npm初体验 1.在项目中安装包的命令 2.eg:对时间格式化 3.安装指定版本的包 三.包管理配置文件 1.如何记录项目中安装 ...

最新文章

  1. 华为推CPU Turbo,荣耀Note10突破3000档
  2. 2020人工神经网络第一次作业-参考答案第十部分
  3. 使用原型相对于直接在构造函数中定义方法的优势? [重复]
  4. SQLite中使用全文搜索FTS
  5. mysql构建镜像时写入密码_用Dockerfile手动创建mysql5.7主从镜像
  6. Django之模型层和ORM
  7. c语言循环8,C语言8 循环语句 | CN-SEC 中文网
  8. 11倍增长!支付宝自研数据库OceanBase再次刷新世界纪录
  9. 实验4-2-2 求e的近似值 (15 分)
  10. 服务器虚拟化相关技术介绍,虚拟化技术介绍
  11. 黑苹果声卡、电池驱动
  12. nginx防盗链配置
  13. arm开发板无法使用dns解析问题
  14. 《富爸爸穷爸爸》读书笔记 -- 第一章
  15. 看不到工作组的其他计算机_就这一次,从现实世界的角度去理解计算机领域的知识(给新手)...
  16. Arduino RGB颜色渐变代码(附上C语言版本)
  17. 如何使用MacBook更省电,Macbook电池应注意事项
  18. Vdbench存储测试教程
  19. matlab算sma,[转载]通达信公式SMA函数计算方式的问题
  20. jQuery是什么?和它的优缺点

热门文章

  1. AI人才创新发展联盟(AIHIA)执行委员会一届一次会议胜利闭幕
  2. SPSS分析技术:时间序列分析的ARIMA模型;考虑各种促销因素的服装销售额预测
  3. 代理服务器介绍及种类划分
  4. 从重大漏洞应急看云原生架构下的安全建设与安全运营(下)
  5. 植物大战僵尸超全资源合集
  6. VmatrixOJ--IP and QQ
  7. AIX存储LV PV VG
  8. 2022年P气瓶充装考试试题及答案
  9. 短视频美食系列都有哪些变现方式?丨国仁网络资讯
  10. Echarts实现自定义图标——风向图