模块化
简单来说就是一个js文件可以引入另一个js文件的方法
使用模块化开发可以很好的解决变量、函数名冲突问题,也能灵活的解决文件依赖问题。
模块化的发展
-
以前
es5不支持模块化,让前端人员很为难。为了支持模块化,我们一般会借用第三方库来实现:- sea.js. https://www.zhangxinxu.com/sp/seajs/
- require.js. https://requirejs.org/
-
现在
- es6原生语法也支持模块化(并不表示浏览器也直接支持模块化 --- 需要单独设置一下)
- Nodejs内部也支持模块化(与es6的模块化有些不同之处)
自定义模块
自定义模块就类似于自定义函数
使用场景:
- 代码需要在项目重用
- 代码需要提供给他人使用
- 有利于优化代码结构,方便后期维护与扩展
有两个步骤:
1.定义模块。就是创建一个js文件,有导出
2.使用模块。在需要使用的地方去导入模块文件。
定义模块
所谓定义模块,就是新建一个js文件。文件取名时,要注意一下:
- 不能与核心模块的名字相同
- 要记得导出模块
- 一般模块会与js文件同名
// 一个模块就是一个.js文件
// 我们会在这里定义功能,并导出
function add(x, y) {
return x + y
}
// 导出模块 module.exports = 要导出的内容(一般会是一个对象)
module.exports = {
add //"add": add
}
使用模块
// 导入 const 模块名 = require(相对路径)
let myModule = require('./myModule-定义模块');
console.log(myModule); //使用前要console.log一下,看一下内容
console.log(myModule.add(1, 2));
导出模块有两种方式
- module.exports = 要导出的内容
- exports.xxx = xxxx
exports.yyy = yyyy
建议使用:module.exports
npm基本介绍
npm全称 Node Package Manager(node 包管理器),它的诞生是为了解决 Node 中第三方包共享的问题
`npm`不需要单独安装。在安装Node的时候,会连带一起安装`npm`
`npm` -v检查安装的情况
它指两个内容:
-
命令行工具
npm init --yes //采用默认信息初始化 npm init //填入关于项目的信息 初始化项目 npm install 包名 //安装第三方包 默认下载最新版 npm install 包名@版本号 //安装指定版本的包 npm install //下载package.json中全部的包 因收到没有node_modules文件夹 则会按照依赖下载包
-
npm网站
其中存放着第三方包(第三方模块,其它的程序员写的代码) 所有的前端的库,框架.....都已经在npm这个网站有现在的, 可以直接下载的,有最新版(还可以下载指定版本号),不要钱的..... 所有要上传或者是下载的内容,都必须要以包的格式进行组织
如何用npm去下载并使用包
1.初始化项目
-
创建空文件夹(不能使用中文名字)
-
在文件根目录下启动小黑窗 输入
npm init --yes
生成package.json文件后
2.下载包
npm install 包名
3.使用包
//使用,在自己的代码中,const 包名 = require('包名') 来使用
const dayjs = require('dayjs') // 以dayjs为例
ps:我们如何知道自己需要下载哪个包?
- 观察
- 学习,积累
node_modules文件夹
1.有何作用?
在使用npm install 命令时,保存从npm上下载的第三方包.
2.此文件夹如何产生的?
第一次去下载包的时,它会自动创建
3.注意事项
它的名字是固定
随着你的项目中包用的越来越多,它会变的越来越大
分享你的项目时,可不用分享这个文件夹,其他人可以通过npm install 自动下载依赖包
全局安装和本地安装
全局安装的格式
npm install xxxx -g
npm install -g xxxx
本地安装
不加-g
全局安装nodemon&nrm
nrm
作用:更换下载包的地址(镜像)
安装:
npm install -g nrm
使用:
nrm ls //罗列所有可以下载包的地址,当前的地址前面会有一个*号
nrm use XXX //更换下载包的地址
nodemon
作用:监听代码变化,并自动重新运行
安装:
npm install -g nodemon
使用:
nodemon xxxxx.js //用nodemon代替前边使用的node
网友评论