模块化-理解模块化
根目录 ├── index.html # 主页的页面 ├── index.js # 主页需要使用js代码 │ └── getData() # 是index.js定义函数 └── tool.js # 为整个项目提供公共方法 └── doSomething(){ } # 是tool.js定义函数
如何让上述代码结构?index.js中的getData去使用tool.js中的doSomething()函数?
- 以上代码写作方法有什么问题?
- 为什么不能直接让?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中的Math对象)
nodejs模块的分类
- 核心模块
-
- 就是nodejs自带的模块,在安装完nodejs之后可以随意使用。相当于学习js时使用的Array对象。
- 例:fs, http, querystring, path
- 所有模块的源代码 node/lib at master · nodejs/node · GitHub
- 自定义模块
-
- 程序员自己写的模块。相当于我们在学习js自定义函数。
- 第三方模块
-
- 其他程序员编写的模块。nodejs生态提供了一种特殊的工具npm我们稍后将讨论第三方模块的管理。
- 相当于别人写的函数或库。例如,我们以前学到的JQuery库,arttemplate等。
自定义模块-基本介绍
目标
掌握自定义模块的使用背景和步骤
背景
我们用模块包装代码(一个独立的.js文件
)为单位做的。一般做法是在实现某个功能后,将其包装成模块,然后在其他文件中使用。
类比于js自定义函数,自定义模块的使用场景如下:
- 代码需要在项目中重用
- 代码需要提供给他人
- 虽然代码不需要重用,但包装成模块有利于优化代码结构,便于后期维护和扩展
步骤
共有两步:
- 创建定义模块。js文件, 对外我们希望导出内容。
- 使用模块。去需要使用的地方模块文件。
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() + 1 m = m < 10 ? '0' + m : m let d = date.getDate() d = d < 10 ? ('0' + d) : d return [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() + 1 m = m < 10 ? '0' + m : m let d = date.getDate() d = d < 10 ? ('0' + d) : d return [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
// 定义方法,常量 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 // 输出是 true
所以下面两种写法的效果是一样的:
// 写法1 mymodule.js exports.f = function(){ } exports.pi = 3.1415926
// 写法2 mymodule.js module.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网站上的。先来了解下包和模块的关系。
- nodejs中一个模块就是一个单独的js文件
- Node.js 中的第三方模块,又叫做包、第三方包、依赖包
- 包是多个模块的集合。一个模块的功能比较单一,所以一个包一般会包含多个模块。
- npm 管理的单位是包。类似于网站和网页的区别:一个网站一般会包含多个网页。
找自己需要的包
npm 公司提供了一个非常著名的搜包网站:https://www/npmjs.com/。它是全球最大的第三方包共享平台。
小结
- npm中的第三方模块是以______的格式放在的npm网站上的,供程序员______下载
- 一个包内部可能会有______个模块
npm下载使用包
目标
掌握下载包的使用方式,了解dayjs的基本使用
步骤
分成三步:
- 初始化项目。 如果之前已经初始化,则可以省略。
- 安装包。 包名。[注意:保持联网的状态哈]
- 引入包,使用
第一步:初始化项目
这里提到的项目并不是某个具体的功能,只是要创建一个空文件夹即可(注意,不要起中文名字哈)。
到项目所在的下,(建议:按下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
它会启动一个交互式的程序,让你填入一些关于本项目的信息,最后生成一个。
如果你希望直接采用默认信息,可以使用:
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包是存在的,也没有出现任何的网络错误):
- 如果有package.json (1) 修改package.json文件。根据开发依赖和生产依赖的不同,决定把这句记录在加在devDependencies或者是dependencies列表中。 (2) 修改node_modules文件夹
-
- 如果有node_modules文件夹,则直接在下面新建名为XXX的文件夹,并从npm中下来这个包。如果这个包还有其它的依赖,则也会下载下来。
- 如果没有node_modules,则先创建这个文件夹,再去下载相应的包
- 如果没有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等。
- 本地安装的包是与具体的项目有关的, 我们需要在开发过程中使用这些具体的功能。
一个经验法则:
- 要用到该包的的就需要
- 要通过引入使用的就需要本地安装
一个判断标准:看这个包的说明文档
小结
- 在下包的时候,______ 参数的作用是:把包安装到全局的用户目录之下。
- 要用到该包的的就需要
- 要通过引入使用的就需要 _____ 安装
全局安装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还是可以用的。
可能会出现的错误及解决方案
- 如果报错如下
- 解决办法是:
-
- 用
管理员
方式,打开命令行(powershell)窗口 - 执行
set-ExecutionPolicy RemoteSigned;
- 在出现的选项中,输入
A
,回车。 - 重新打开 小黑窗
- 用
2.如果报错如下
- 解决办法是:添加电脑的环境变量
全局安装serve包
它用来快速生成静态网页服务器
安装
npm i -g serve
使用
开发依赖和生产依赖(了解)
在本地安装包时,表示我们这个项目要用到这个包,换句话说,我们这个项目要想成功运行,要依赖于这些个包。
但在,具体在项目进行的哪一阶段依赖于这些包呢?也有具体的差异。
本地开发 ----> 上线运行
理解
举个生活中建房子的场景:
在建房子时,我们依赖:
- 辅助工具:尺子,水平仪,脚手架
- 原材料:钢筋,水泥
在住房子时,我们依赖:
- 原材料:钢筋,水泥
在房子进入到了使用阶段时,我们就不再需要尺子,水平仪,脚手架等这些个辅助工具了。我们买一所房子时,也不应该支付巨型脚手架的费用。
在开发前端项目的过程中也存在类似的问题:我们的开发过程和使用过程是分开的,开发项目时需要用到的包可能在使用项目时就不需要用到了。
假设有这么两个包:
- gulp-htmlmin。这个工具是用来把html代码进行压缩的(去掉空格,换行等),我们需要在开发时使用它,而项目一旦上线,我们就不再需要它了。,因此将它归类为""。
- axios。在开发时参与源码编写,在发布上线的生产环境中也是需要它的。不仅在开发环境编写代码时要依赖它、线上环境也要依赖它,因此将它归类为""。
操作
这两种依赖关系,在具体操作的过程中,有如下区别
- 保存到开发依赖(devDependencies)
npm install 包名 --save-dev // 或者 npm install 包名 -D
通过这种方式安装的包出会现在package.json文件中的devDependencies
字段中。
- 保存到生产依赖(dependencies):
npm install 包名 // 或者 npm install 包名 -S // 或者 npm install 包名 --save
通过这种方式安装的包出会现在package.json文件中的dependencies
字段中。
技巧
- 加了-D : 开发依赖,这就表示这个工具包只在开发项目时候要用,项目开发完成就不需要
- 不加-D: 生产依赖,这就表示这个工具包在项目做完了之后也要用。
什么包加上-D,什么包不要加?------- 看文档
小结
- 在下包的时候,-S 参数的作用是:把包记录到 ______ 文件的 ______ 节点之下,参数的完整写法是 ______, 它是 ________ 依赖
- 在下包的时候,-D 参数的作用是:把包记录到 ______ 文件的 ______ 节点之下,参数的完整写法是 ______, 它是 _________ 依赖
npm包从创建到发布
背景
在工作中我们积累了一些自己的功能代码。这些功能代码可以在其它项目中重复使用,此时我们就可以选择把代码打包放在[npm]上,在需要要使用的项目中,通过npm install去下载下来。
准备工作:
- 在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() + 1 m = m < 10 ? '0' + m : m var d = date.getDate() d = d < 10 ? ('0' + d) : d return 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 //强制删除
如果你的包没有什么用处,建议删除掉,以节约公共资源。
更新包
- 修改代码,保存。
- 。可直接在package.json中修改:只能改大,不能改小。
- 重新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
上传出错的可能性有?
- 你的帐号还没有通过验证 (在你登记的邮箱里,会收到一封邮件,要去点击确认)。 qq邮箱好像不支持在手机中操作, 建议在pc中浏览器里进行操作。
- 没有登陆, 没有做npm adduser
- 网不好!
如何对包进行版本更新?
- 更新代码,准备重新发布
- 升级版本号(只能改大,不能改小)。 在 package.json中去修改version值
- npm publish
如何去下载包
命令:npm i 包名
- 在另一个项目中去下载包
- 为了提升下载速度,我们会切换镜像到taobao。
虽然我们上传是传到npm官网,但是,它会自动同步(例如:每隔15分钟就会通过其它镜像最新的包的信息)给其它的镜像 --- taobao, cnpm.....
require的加载机制
在我们使用一个模块时,我们会使用require命令来加载这个模块。以加载一个自定义模块为例,require(文件名)的效果是:
- 执行这个文件中的代码
- 把这个文件中的对象中的内容返回出来。
以如下代码为例:
// 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