模块化与包管理工具（npm）

模块化与包管理工具（npm）

理解模块化

什么是模块化？

模块化：就是一个js文件可以引用其他的js文件，我们可以引用js文件里面的变量，数据…

模块化的现状

在以前ES5不支持模块化开发，但是为了实现模块化开发，一般都引用第三方的库来实现。

ES5引用的第三方库如：

• sea.js https://www.zhangxinxu.com/sp/seajs/
• require.js https://requirejs.org/

那么现在我们的ES6语法也支持模块化的。

node.js内部也支持模块化。

node.js模块分类

• 核心模块
• 自定义模块
• 第三方模块

自定义模块

理解（包管理工具）npm

什么是npm?

npm官网地址：https://www.npmjs.com/

npm的一个全称：Node Package Manager（包管理器）

为什么存在npm：为了解决node中第三方包共享的问题

怎么安装npm?

下载网址（node.js下载）：https://nodejs.org/en/download/

在安装Node的时候，会连带一起安装npm。

npm -v检查安装的情况。

下载npm使用包

步骤：

• 初始化项目。命令：npm init
• 安装包。命令：npm install 包名
• 引入模块

npm init

在某个目录下开启小黑窗，输入如下命令：（都表示初始化项目）

这个命令需要自己手动设置（设置完成之后后项目文件夹中创建一个package.json的文件）

npm init 

效果示例：

这个命令不需要手动设置（推荐使用）

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

效果示例：

注意：

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

package.json文件

这个package.json文件是有由npm init -yes 这个命令创建的，整体的内容是一个json字符串，用 来对当前项目进行整体描述。

• name： 表示这个项目的名字。如是它是一个第三方包的话，它就决定了我们在require()时应该要写什么内容。

• version：版本号

• keywords：关键字

• author: 作者

• descrption: 描述

node_modules文件夹

作用

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

全局安装包和本地安装包

我们通过npm install 命令来安装包，简单说就是把包从npm的官网（或者是指定的镜像源）下载到我们自己的电脑中。

• 全局安装: 包被安装到了系统目录（一般在系统盘的node_modules中）。

  • 命令：npm install -g 包名 或者 npm install 包名 -g

  • 辅助提示：

  • npm root -g // 查看全局包的安装目录
    npm list -g --depth 0 //查看全局安装过的包
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E2q0Du29-1616643112346)(C:\Users\Administrator\Pictures\npm\安装目录.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WAMZ8Cs3-1616643112346)(C:\Users\Administrator\Pictures\npm\Snipaste_2021-03-25_03-09-47.png)]

• 局部安装（或者叫本地安装)，包安装在当前项目的根目录下（与package.json同级）的node_modules中。
  • 命令：npm install 包名

全局包与本地包的区别

• 全局安装的包一般可提供直接执行的命令。我们通过对一些工具类的包采用这种方式安装，如：

  ​ gulp, nodemon, live-server,nrm等。

• 本地安装的包是与具体的项目有关的， 我们需要在开发过程中使用这些具体的功能。

装的包一般可提供直接执行的命令。我们通过对一些工具类的包采用这种方式安装，如：

​ gulp, nodemon, live-server,nrm等。

• 本地安装的包是与具体的项目有关的， 我们需要在开发过程中使用这些具体的功能。