如何去自定义一个模块和npm包管理工具的使用

Joker_Z
1,414 阅读5分钟

模块化

定义：一个js文件可以引入其他的js文件，能够使用引入的js文件里面的变量和数据
优势：解决变量名和函数名的冲突问题

模块化的发展

  • 以前：ES5不支持模块化，前端开发比较困难，为了实现模块化，一般会借用第三方的库来实现
  • 现在：ES6的原生语法支持模块化了，Nodejs也支持模块化了

常用的模块化

  1. CommonJS 规范(nodejs 默认支持的)
  2. ES6 模块化规范
  3. CMD 和 AMD 模块化规范（不再推荐使用）

自定义的模块

理解：我们程序员自己写的模块，一般是为了实现某个功能，把写好的代码进行封装成一个模块，然后再其他文件中导入使用

应用场景：

  • 代码需要在项目中使用
  • 代码需要给别人使用
  • 封装成一个模块，有利于优化代码的结构，方便后期的维护和发展
    步骤：
  1. 定义模块，写一个js文件，对外进行导出
  2. 使用模块，在我们需要用的时候导入这个文件

Node.js中的CommanJS规范

  • 导入其他模块的时候，统一使用require()函数进行导入
  • 每一个.js文件都是一个独立的模块，模块内的成员都是私有的
  • 在每个JS模块中，使用module.exports向外进行导出

image.png

image.png
注意：

  1. module.exports 是固定写法，一般放在文件的最末尾，也只用一次
  2. 它可以导出对象，数组，函数等等类型。为了方便组织代码，导出对象的情况比较多
  3. 当我们写好一个自定义的模块后，要记得在文件的最后导出，在使用的时候记得导入

导出模块的两种方式

  1. exports
  2. module.exports
    注意：
  3. exports和module.exports 指向的是同一块内存区域，内容都是一个空对象
  4. 一般情况下，我们使用module.exports比较多

npm

  • 出现的原因：为了解决 Node 中第三方包共享的问题
  • 安装：不需要单独安装，在安装Node的时候，会自动帮我们进行安装
  • 检查：在命令行输入 npm -v，出现版本号显示安装成功

image.png

  • npm网站：这是一个第三方模块的"不花钱的模块超市"，我们可以自由地下载，上传模块， 这里是网址：https://www/npmjs.com/
  • nodejs中一个模块就是一个单独的js文件
  • Node.js 中的第三方模块，又叫做包、第三方包、依赖包
  • 包是多个模块的集合。一个模块的功能比较单一，所以一个包一般会包含多个模块。
  • npm 管理的单位是包。类似于网站和网页的区别：一个网站一般会包含多个网页。

npm下载使用包的步骤

  • 初始化项目，输入命令nmp init
  • 安装包，nmp install 要下载的包名
  • 引入包，使用

初始化项目

先创建一个空的文件夹，打开命令窗口，输入npm init --yes，会生成一个package.json的文件

安装包

在命令窗口输入npm install 包的名字，install可以简写成i

使用包

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

了解一下package.json文件

它是由npm init 命令创建出来的，整体内容是一个JSON内容的字符串，用来对当前项目进行描述，我们可以看一下里面的内容：

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

node_modules文件夹

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

image.png

全局安装nodemon包

  • 背景：我们每次修改了代码，想要代码生效，都需要重新运行命令，这就比较麻烦
  • 作用：nodemon会自动检测到我们的修改并自动重新运行我们的代码
  • 安装：在命令窗口里面，输入npm install -g nodemon回车，如果没有报错，就显示安装成功了
  • 好处：在于会自动监听server.js这个文件的变化，如果变化了，就会重新自动再去运行

npm包从创建到发布的流程

  1. 首先创建一个空的项目，取一个名称，可以先去npm官网看一下，名称有没有被占用，如果被占用，是无法进行上传的
    检查的方式 ： 在命令窗口输入npm view 你取的包名，如果返回404，说明没有，可以使用

  2. 初始化项目，在命令窗口输入：npm init --yes

  3. 写一个完成某个功能的代码，进行封装，在文件的最末尾记得导出

  4. 切换当前npm源到官网
    注意：由于我们需要把包上传到npm上，所以要先确保当前的npm源是npmjs.org。与之相关的命令有如下两条。

npm config get registry 
# 查看当前的npm的registry配置，确保是https://registry.npmjs.org

# 如果不是，可以通过如下命令来设置
npm config set registry https://registry.npmjs.org 
# 手动设置registry
  1. 连接npm
    npm adduser
    这个命令需要输入四个信息以供连接上npmjs：
  • 用户名
  • 密码
  • 邮箱（是你在npmjs官网上注册时使用的信息）
  • 校验密码。它会向你的邮箱发邮件
  1. 检查自己是否连接成功 npm who am i
  2. 最后一步，也是最重要的一步，输入命令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

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

avatar
文章
阅读
粉丝