npm包的介绍、前端实现自己的包并上传到npm仓库的方法

一、包介绍

• 什么是包？（半成品）

包可以看作是模块、 和 其它资源组合而成的一个更大的模块（第三方模块（包））
包可以实现更加复杂、完善的功能模块，方便代码的复用，提高开发效率。

• 如何复用一个包？
• 如何创建一个包?

二、npm

2.1 npm介绍

npm: npm是一个网站，用于托管所有的包，方便大家发布包和搜索获取包

npm: 包管理工具的名字叫做Node.js Package Manager（简称 npm 包管理工具）,这个包管理工具随着Node.js 的安装包一起被安装到了用户的电脑上。可以使用npm工具提供的命令管理包：包的下载安装、更新、卸载，发布…

大家可以在终端中执行npm -v 命令，来查看自己电脑上所安装的npm 包管理工具的版本号：

• npm是一个网站，也是一个管理所有的包的工具

  • 下载包的地址 https://registry.npmjs.org/

  • 搜索包的地址 https://www.npmjs.com/

三、包管理配置文件

3.1 包管理配置文件介绍

npm 规定，在项目的根目录下，必须有一个包管理配置文件，名字叫做 package.json，用来记录项目中安装了哪些包。
注意：运行 npm install 命令安装包的时候，npm 包管理工具会自动把包的名称和版本号，记录到 package.json 中。

• 执行如下命令可以快速生成package.json配置文件

npm init -y

• 如果项目代码有依赖，但是没有node_modules目录是无法运行，需要先安装依赖，再运行
  • 一次性安装所有的包

# 安装所有的依赖包
npm install
# 或者
npm i

3.2 包管理配置文件常用属性

• name 包的名称，全平台唯一

• version 包的版本号

• description 包的功能描述

• main 属性作用：包默认执行的js文件（包的入口）

• keywords 包被检索的关键字

• author 包的作者

• license 包遵循的开源协议

• dependencies （生产依赖）

  • 如果某些包在开发和项目上线之后都需要用到，则建议把这些包记录到 dependencies 节点中。

• devDependencies （开发依赖）

  • 如果某些包只在项目开发阶段会用到，在项目上线之后不会用到，则建议把这些包记录到devDependencies 节点中。(开发依赖 development)

npm i 包名 -D
# 或者
npm install 包名 --save-dev

• 如何仅仅安装生产依赖
  • 默认npm install 会安装所有依赖（开发和生产依赖都安装）
  • 通过–production 选项可以仅仅安装生产依赖

npm install --production

• scripts 属性的作用：定义一些脚本命令，可以起一个别名，方便运行
  • 如果脚本的名称是start，那么运行时，可以简化为 npm start

"scripts": {
  "dev": "node 06-module-test-1.js"
},

npm run dev

• package-lock.json文件的作用
  • 记录包的依赖关系（记录所有的依赖顺序和版本等信息），防止版本更新导致的API变化的问题。

3.3 包的安装方式

• 本地安装：把包安装到当前项目的node_modules目录中，这种包主要用于提供开发相关API。
• 全局安装：把包安装到Node.js的安装目录中，这种包主要的作用是作为命令行的指令来用。
  • 全局安装方式就是在安装时添加 -g 即可
  • 卸载全局包时，也需要添加 -g

# 全局安装
npm install vue-cli -g

四、开发自己的包

4.1 步骤及内容

• 创建项目目录
• 创建相关文件
  • js模块 包的功能实现
  • readme.md 包的使用说明
  • package.json 在包的跟目录需要有这个文件，作用是描述包
• 进入目录执行如下命令，生成一个package.json文件

npm init -y

• 自定义方式实现包的基本功能

/*
  实现一个函数，功能是格式化日期
  参数是日期对象，返回值是：yyyy-MM-dd hh:mm:ss
*/
function formatDate (date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
}

module.exports = {
  formatDate: formatDate
}

• 基于第三方包moment实现功能

/*
  实现一个函数，功能是格式化日期
  参数是日期对象，返回值是：yyyy-MM-dd hh:mm:ss
*/
var moment = require('moment')
function formatDate (date, format) {
  return moment(date).format(format)
}

module.exports = {
  formatDate: formatDate
}

4.2 规范的包结构

• 一个规范的包结构，需要符合以下3 点要求：

  • 包必须以单独的目录而存在
  • 包的顶级目录下要必须包含package.json 这个包管理配置文件（npm init -y）
  • package.json 中必须包含 name，version，main这三个属性，分别代表包的名字、版本号、包的入口。

• 注意：以上 3 点要求是一个规范的包结构必须遵守的格式，关于更多的约束，可以参考如下网址：

  • https://yarnpkg.com/zh-Hans/docs/package-json

4.3 发布自己的包

• 注册 npm 账号

1. 访问 https://www.npmjs.com/网站，点击 sign up 按钮，进入注册用户界面
2. 填写账号相关的信息
3. 点击 Create an Account 按钮，注册账号（邮箱会收到一封验证邮件，需要点击收到的链接，进行身份验证）

• 登录 npm 账号 （必须先切换到npm镜像）

  • npm 账号注册完成后，可以在终端中执行npm login 命令，依次输入用户名、密码、邮箱后，即可登录成功。

• 把包发布到 npm 上

  • 将终端切换到包的根目录之后，运行npm publish 命令，即可将包发布到 npm 上（注意：包名不能雷同）。

• 删除已发布的包

  • 运行 npm unpublish 包名 --force 命令，即可从 npm 删除已发布的包。

发布包注意事项

① npm unpublish 命令只能删除 72 小时以内发布的包

② npm unpublish 删除的包，在 24 小时内不允许重复发布

③ 发布包的时候要慎重，尽量不要往npm 上发布没有意义的包！