NPM 包使用及发包过程

nrm 包源管理工具

npm nrm -g 全局安装nrm工具

nrm ls 查看可以用的包服务

nrm use 切换对应服务

npm 切换

npm持久使用淘宝镜像安装依赖包

npm config get registry  //查看当前的下包镜像源

npm config set registry=https://registry.npm.taobao.org/   切换成淘宝镜像

使用淘宝镜像

安装cnpm

npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm config ls  //查看配置

注意：

建议npm 跟 cnpm 分开一起 有些包上npm 上有 cnpm 上没有就不好了

npm 发包过程

1、 初始化包的基本结构

• 建立一个包文件夹

  • 在文件夹中建立三个文件
  • package.json （包管理配置文件）
  • index.js (包的入口文件)
  • README.md （包的说明文档）

  {
    "name":"hwc-tools",
    "version":"1.0.0",
    "main":"index.js",
    "description":"提供了格式化时间，HTMLEscape的功能",
    "keywords":["HWC","tools"],
    "license":"ISC"
  }
  

2、配置index.js 时间格式化方法

function dataFormate(time){
  const dt = new Date(time)

  const y = dt.getFullYear()
  const m = dt.getMonth() + 1
  const d = padZero(dt.getDate())

  const hh = padZero(dt.getHours())
  const mm = padZero(dt.getMinutes())
  const ss = padZero(dt.getSeconds())

  return `${y}-${m}-${d} ${hh}-${mm}-${ss}`
}
// 补零函数
function  padZero(str){
  return str > 9 ? str : '0' + str
}

module.exports = {
  dataFormate
}
// 使用方法
const abc = require('./tools')
// 自动去文件夹下的pakage.json 下找main入口文件
const data  = new Date()
const time = abc.dataFormate(data)
console.log(time);

3、 配置 转义 HTML 方法

// 定义转  HTML 字符的函数
function htmlEscape(htmlStr){
  return htmlStr.replace(/<|>|"|&/g,match=>{
    switch(match){
      case "<":
        return '&lt;'
      case ">":
        return '&gt;'
      case '"':
        return '&quot;'
      case '&':
        return '&amp;'
    }
  })
}
module.exports = {
  dataFormate,
  htmlEscape
}

4、 定义还原HTML 方法

function unEscapeHtml(htmlStr){
  return htmlStr.replace(/<|>|"|&/g,match=>{
    switch(match){
      case "<":
        return '<'
      case "&gt;":
        return '>'
      case '&quot;':
        return '"'
      case '&amp;':
        return '&'
    }
  })
}
module.exports = {
  dataFormate,
  htmlEscape,
  unEscapeHtml
}

5、使用方法

const abc = require('./tools')
// 自动去文件夹下的pakage.json 下找main入口文件
// 时间格式化
const data  = new Date()
const time = abc.dataFormate(data)
console.log(time);

// 格式化html
const htmlStr = '<h1 title="abc">我是你爹</h1>'
// 转义为字符编码
let str = abc.htmlEscape(htmlStr)
// 转义回html
str = abc.unEscapeHtml(str)
console.log(str);

6、 模块化拆分

将对应功能的函数，放到src目录下的 js 文件中，最后再引入到index.js文件

// 引入对应src
const data = require('./src/dataFormat')
const escape = require('./src/htmlEscape')


module.exports = {
  // 使用对象解构赋值将里面的方法暴露出去
  ...data,
  ...escape
}

7、 README。md 说明文档

安装

npm i HWC-tools

导入

const tools = require('HWC-tools')

格式化时间

const time = abc.dataFormate(new Date())
console.log(time);

转义HTML 特殊字符

const htmlStr = '<h1 title="abc">我是你爹</h1>'
// 转义为字符编码
let str = abc.htmlEscape(htmlStr)
// &lt;h1 title=&quot;abc&quot;&gt;我是你爹&lt;/h1&gt;

转回 HTML 格式

const htmlStr = '<h1 title="abc">我是你爹</h1>'
// 转义为字符编码
let str = abc.htmlEscape(htmlStr)
// &lt;h1 title=&quot;abc&quot;&gt;我是你爹&lt;/h1&gt;
// 转义回html
 str = abc.unEscapeHtml(str)
 //<h1 title="abc">我是你爹</h1> 

开源协议

ISC

---

8、 发布包

注意发包时要使用 npm 的服务不能使用淘宝的

可以运行 nrm use npm 切换成npm的服务

1、 登录 npm

• 不是在官网登录，而是要在终端里输入 npm login

  npm login
  // 随后输入用户名 ， 密码，及邮箱
  username : xxx
  登录成功后看看返回了Logged in as winches on https://registry.npmjs.org/.
  即代表在正确的服务上
  

2、 发布

切换到包的当前文件夹 运行 npm publish即可

当看到+ 对应包名@1.0.0 时代表发布成功

name:
	name命名规则-不能包含大写字母，空格及下滑线
	
	由于npm是靠包名（name字段）来确定唯一性的，
	好比android/ios APP在同一个应用市场不能存在相同包名的应用一样，
	所以在填写name时，最好先到npm查一下是否包名已被占用，以避免发布时包名冲突
	冲突了需要修改包名，会在后边问题解决记录方法
	
main：
	配置入口js文件

如何忽略不想上传的部分文件：

写入.gitignore 或.npmignore中，上传时就会被自动忽略掉

更新 npm 包版本

如果对npm包的内容进行了更新，需要升级npm包版本

复制代码

npm 社区版本号规则采用 semver（语义化版本）

格式：主版本号.次版本号.修订号
版本号递增规则：	主版本号：当你做了不兼容的 API 修改	次版本号：当你做了向下兼容的功能性新增	修订号：当你做了向下兼容的问题修正	先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸

复制代码

查看当前包版本号-npm version：

BravedeMacBook-Pro:npmModuleDemo brave$ npm version{ 'demo-publish-npm-module': '1.0.0',  npm: '6.4.1',  ares: '1.10.1-DEV',  cldr: '32.0',  http_parser: '2.8.0',  icu: '60.1',  modules: '57',  napi: '3',  nghttp2: '1.32.0',  node: '8.12.0',  openssl: '1.0.2p',  tz: '2017c',  unicode: '10.0',  uv: '1.19.2',  v8: '6.2.414.66',  zlib: '1.2.11' }

复制代码

更新版本号并发布：

1）直接更新版本号 ： npm version 新版本号

BravedeMacBook-Pro:npmModuleDemo brave$ npm version 1.0.1v1.0.1
执行后，package.json中version字段被更新 : "version": "1.0.1",

复制代码

2）可通过 npm version <update_type>自动改变版本

update_type取值,意义及演示：
// 1）patch：补丁     v1.0.1->v1.0.2BravedeMacBook-Pro:npmModuleDemo brave$ npm version patchv1.0.2// 2）minor：小改     v1.0.2->v1.1.0BravedeMacBook-Pro:npmModuleDemo brave$ npm version minorv1.1.0// 3）major：大改     v1.1.0->v2.0.0BravedeMacBook-Pro:npmModuleDemo brave$ npm version majorv2.0.0

复制代码

---

撤销已发布的 npm 包

撤销命令: npm unpublish 包名

只能删除 72 小时

删除后 24 小时内不能重写发布

不要在上面发布太多没有意义的包

BravedeMacBook-Pro:npmModuleDemo brave$ 	npm unpublish demo-publish-npm-module	npm ERR! Refusing to delete entire project.npm ERR! Run with --force to do this.npm ERR! npm unpublish [<@scope>/]<pkg>[@<version>]

复制代码

强制撤销：–force

如上报错，可加--force强制撤销
BravedeMacBook-Pro:npmModuleDemo brave$ 	npm unpublish demo-publish-npm-module --force	npm WARN using --force I sure hope you know what you are doing.- demo-publish-npm-module

复制代码

撤销成功！

---

常见问题及解决方法

npm 镜像源问题：

报错信息：

no_perms Private mode enable, only admin can publish this module: npmmoduledemo

复制代码

解决方法：

切换至npm官方地址：	npm config set registry https://registry.npmjs.org/