01-nodejs模块化规范

01-模块化规范介绍

• 1.什么叫模块化？（模块 == js文件）
  • 一个js文件可以引入另一个js文件中的数据, 这种开发方式就叫做模块化开发
• 2.模块化开发好处？
  • （1）将功能分离出来
    • 一个js文件只负责处理一个功能，这样做的好处是业务逻辑清晰，便于维护
  • （2）按需导入
    • 用到哪一个功能，就导入哪一个js文件。模块化开发是渐进式框架的共同特征。
  • （3）避免变量污染
    • 一个js文件(模块),都是一个独立的作用域。 互不干扰，不用考虑变量名冲突问题。

​ 了解一下前端模块化开发的历程

ES6之前： js语言本身不支持模块化开发，一般需要通过第三方工具来实现模块化开发。

例如：sea.js. https://www.zhangxinxu.com/sp/seajs/ require.js. https://requirejs.org/

ES6 ： ES6新增了模块化开发语法（今天第四个部分语法，vue框架必须要使用的语法）

Nodejs : Nodejs本身也支持模块化开发，但是和前端的ES6有一些细微的区别。（本小节主要学习nodejs自带的模块化语法，对于后期学习不是特别重要。 但是要想今后自己写一些npm框架，就必须要掌握nodejs模块化语法）

1.2-模块化语法规范介绍

• 任何一个语法，都需要遵循一定的规范。不同的平台需要遵循的规范不同。一般情况下，模块化语法规范主要有三种。
  • CommonJS 规范：nodejs 默认支持的
    • 文档：http://javascript.ruanyifeng.com/nodejs/module.html#toc1
  • ES6规范：前端的ES6语法支持的规范
    • 文档：https://es6.ruanyifeng.com/#docs/module
  • CMD 和 AMD 模块化规范 ： ES6语法之前的模块化语法规范，现在已经几乎不用了

1.3-CommonJS规范实现模块化语法

• CommonJS规范只有两句话

  • 1.模块必须要使用 require() 导入
  • 2.模块必须要使用 module.exports 导出
    • 这两个语法都是nodejs环境自带的全局语法

• exports与module.exports区别

  • (1)如果分不清两者区别,就使用 module.exports

  • (2)exports不能去修改堆地址，只能往堆地址里面加数据

    • 错误写法： exports = { name:‘张三’ }

      • 这样写是修改堆地址

    • 正确写法: exports.name = ‘张三’

      • 这样写没有修改堆地址，而是往堆地址中加数据

• 1.导出模块语法一般放在js文件最底部，且只需要执行一次即可

• 2.开发中,并不需要把模块化中所有的变量全部都导出，只需要暴露别人需要用的变量即可

1.4-模块缓存机制

• 1.当一个模块第一次会加载时，nodejs会执行里面的js代码，并且导出模块
• 2.nodejs会将导出的模块放入缓存中
• 3.当重复导入一个模块的时候，nodejs会先从缓存中读取模块。 如果缓存中有，就从缓存读取。缓存没有重复步骤1

1.5-nodejs三种模块及require()加载原理

• 1.nodejs有三种模块

  • 第一种： 核心模块、内置模块
    • nodejs作者写的，这些模块js文件会随着安装nodejs的时候一起安装。因此我们可以直接使用，而无需下载。
      • 例如： fs 、path、http都是核心模块
  • 第二种：第三方模块
    • npm官网上面的模块，这些都是大佬写的模块。需要下载后使用
      • 例如： express、cors、bod-parser
  • 第三种：自定义模块
    • 我们自己写的js文件

• 2.require(‘文件路径’)加载原理

  • (1)自定义模块：必须要写文件路径， require()会得到这个模块里面的 module.exports 对象
  • (2)第三方模块 ：写模块名。 nodejs会自动从你的node_module文件夹里面去找这个模块的名字，然后执行模块里面的index.js代码，得到里面的module.exports
    • 如果当前目录没有module.exports就会从上级目录找，以此类推。一直找到你的磁盘根目录。 还找不到就会报错提示 模块不存在（有点类似于变量作用域就近原则）
  • (3)核心模块：写模块名。 nodejs会自动从你的node安装包路径里面去找。

02-npm包管理工具

npm命令大全	简写	描述
npm init –yes	npm init -y	初始化包,生成package文件
npm install 包名	npm i 包名	下载包到node_module目录(默认下载最新版本)
npm install 包名 -g	npm i 包名 -g	安装全局包
npm install 包名@版本号	npm i 包名@版本号	下载指定版本的包到node_module目录
npm uninstall 包名		删除本地包
npm uninstall 包名 -g		删除全局包
npm install 包名 –save-dev	npm i 包名 –save-d	安装开发依赖包(默认安装都是生产依赖)
npm config set registry https://registry.npm.taobao.org/		切换镜像源
npm config list		查询镜像源
npm -v		查看npm版本
where node		查看node安装目录
where node		查看npm安装目录
npm root -g		查看npm区全局包安装目录
npm list -g –deptch		查看电脑装了哪些全局包
npm install npm -g		更新你电脑的npm版本

1.1-npm介绍

​ npm有两种含义 :

​ 第一种: 包管理工具node package manager

​ 第二种：npm网站代码托管平台

• 1.npm
  • 全称node package manager
  • 官方推出的包管理工具
  • 不需要额外安装，安装node之后自带
  • 因为服务器不在国内，所以有时候安装特别慢，甚至无法成功
• 2.https://www.npmjs.com/
  • 类似于gitthub,是一个全球免费的代码托管平台
  • 与github不同点
    • github : 支持任何编程语言，任何平台
    • npmjs : 只为nodejs服务

1.2-npm使用流程

​ 初始化、安装、导入使用

• 1.初始化：在当前nodejs项目中执行终端命名: npm init -y
  • 作用：生成一个pachage.json文件，帮你记录当前项目安装了哪些第三方模块及对应的版本号
• 2.安装：在当前nodejs项目中执行终端命名: npm install 模块名
  • 安装之后，你的项目目录会新增两个文件node_modules与package-lock.json
    • node_modules:npm会自动将所有的第三方模块放入这个文件夹中。类似于前端的lib文件夹
    • package-lock.json：npm会自动记录第三方模块的下载地址，下一次安装或更新的时候直接从这个地址下载，速度更快(只是影响以后更新速度，不影响开发)
    • package.json:帮你记录当前项目安装了哪些第三方模块及对应的版本号
• 3.注意点：
  • (1)使用npm文件夹路径不能有中文
  • (2) 如果网速很慢导致无法安装第三方模块，建议 更改npm镜像源为淘宝服务器
    • npm config set registry https://registry.npm.taobao.org/
    • 查看当前npm得镜像源：npm config list

1.2.1- npm init -y原理

• 1.作用： 快速初始化包,创建package.json文件
• 2.package.json文件 : 项目中用到了哪些依赖包，以及包名、版本号
  • 只要你下载了包,这个文件就会记录你下载哪些包，和下载的版本

1.2.2-npm i 包名 原理

• 1.访问npm服务器
• 2.从npm服务器搜索包
• 3.搜索到之后,找包的仓库地址
• 4.下载包到你目录的node_module文件
• 5.会把包地址放入package.lock.json文件，用于更新提高速度

​ 默认情况下，所有包都会自动下载最新版本.如果想下载指定版本，就可以使用命令

npm i 包名@版本号

1.2.3-npm包三个组成部分详解

• 1.package.json : 记录项目所有下载过的依赖包及对应的版本号
  • 相当于下载记录
• 2.node_module : 存放包源文件的目录
  • 相当于下载文件夹
• 3.package.lock.json : 记录所有的依赖包的下载地址和版本
  • 相当于网页收藏夹
  • 作用： 提高更新包的效率（第一次下载包之后，npm会把每一个包的下载地址存在package.lock.json文件中。 下一次下载的时候，无需从npm搜索，而是直接从上一次地址去下载）

1.3-全局包与本地包

• 1.本地包: npm i 包名
  • 在哪里执行命令，就在哪个文件夹安装
  • 只对这个文件夹生效
• 2.全局包: npm i 包名 -g
  • 无论在哪里执行命令，都会装到你的C盘根目录
  • 对整个操作系统生效，任何时候都能使用
    • 例如: npm i nodemon -g
• 3.小经验
  • 本地包一般是用于做项目开发的，主要是导入写代码的
  • 全局包一般是工具类（像vscode插件一样），主要是为你开发提供工具遍历的
    • nodejs里面的nodemon
    • vue里面的vue/cli

1.4-开发依赖与生产依赖

• 1.下载包的时候，有两种选择： 开发依赖 与 生产依赖

  • 默认情况下，我们所有的包都会选择生产依赖

• 2.什么是开发依赖，什么是生产依赖

  • 开发依赖： 只在开发的时候会用到，到了生产（上线）环境用不上
  • 生产依赖：上线之后也需要使用
  • 举个例子： 比如房子装修
    • 开发依赖： 装修的时候需要用到工具。 铲子、尺子、水泥、木材
    • 生产依赖：装修完了需要用到：水泥、木材
      • 其中铲子、尺子只会在开发的时候用到，生产的时候用不上。 就可以放入开发依赖

• 3.如何选择生产依赖还是开发依赖

  • 不纠结，一般包的官网会有命令。 你按它的CV就可以了
    • gulp-htmlmin。这个工具是用来把html代码进行压缩的（去掉空格，换行等），我们需要在开发时使用它，而项目一旦上线，我们就不再需要它了。，因此将它归类为”开发依赖“。
    • axios。在开发时参与源码编写，在发布上线的生产环境中也是需要它的。不仅在开发环境编写代码时要依赖它、线上环境也要依赖它，因此将它归类为”生产依赖“。

03-npm发布自己的包完整流程(拓展了解)

​ 准备工作

1.为什么要在npm发布自己的写的第三方包

优秀的代码应该分享给更多的人，让别人知道你的优秀

提升职场竞争力，别人没做的事情，你做了

提升自己的内力，发布包的时候你会更多的考虑到代码的复用。对自己的技术提升非常的有帮助。

2.优秀的代码是如何诞生的？

你的同事写的

你的同行写的

你写的

如果个个都想白嫖，个个都想CV。 那谁来做那个被CV的人呢？

2.npm上的包是全球用户都能下载的，所以我们自己的包一定不能跟别人包重名。

npm view 包名 ： 检查npm服务器有没有这个包,如果有你的包名就不能叫这个

• 示例：假设我现在要封装一个数组拓展插件HMArray

1.初始化npm : npm init -y

2.新建一个index.js，封装你的代码

• 写完最好自己测试一下，别把崩溃的代码发布到npm,这样就闹眼子了

3.连接npm: npm adduser

• 这个命令会让你输入四个东西（只有第一次上传包才需要，以后更新的话就不需要了）
  • 用户名
  • 密码
  • 邮箱（是你在npmjs官网上注册时使用的信息）
  • 校验密码。它会向你的邮箱发邮件

​ 发布包的话，是直接把你的包上传到npm网站服务器。因此需要把你的镜像源切回到npm镜像源

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

这个命令可以检查你是否连接npm成功： npm who am i

4.上传包到你的npm服务器: npm publish

• 接下来别人就可以在npm搜索到你的包了
• 然后别人用的时候，先 npm i hm-array
  • 然后导包、用包即可

5.发布新版本

• 删除你的包: npm unpublish --force
  • 如果没啥用了，就删除。没必要浪费公共资源

04-ES6官方模块化规范(vue需要使用)

vue将每一个组件看作是一个独立的模块（类似于nodejs中的）模块化，而组件导入import和导出exports其实使用的是ES6新增的模块化语法.

es6官网模块化语法：https://es6.ruanyifeng.com/#docs/module

• 谷歌浏览器测试ES6的模块化语法
  • 浏览器输入：chrome://flags/
  • 打开开关
  • 必须要使用live-server插件运行index才可以

1.1-默认导入导出

1.2-按需导入导出

知识点验收

1. export default可以写多次吗?

   1. 不可以，只能写一次

2. export default 和export可以写在同一个文件中吗?

   1. 可以，但是要分开导入。实际开发中不建议同时使用

   2. export let name = '张三'
      export let age = 18
      export let sayHi = function(){
          console.log(666);
      } 
      
      let sex = '男'
      export default sex;
      

   3. import {name as a,age as b,sayHi as c} from "./goods.js"
      import sex from "./goods.js"
      

3. 导入通过export导出的模块,名字有要求吗?

   1. 有要求，如果是export导出，默认导入变量名要与导出的一致
   2. 如果是export default，则变量名可以随便写

4. 如果要给export导出的模块起别名,使用哪个关键字?

   1. as