公共组件库开发之调试发布npm包

公共组件库的开发主要是将工作中常用的一些组件封装好后，发布为npm包，然后在项目中通过引入这个npm包，对该公共组件进行使用。那么开发公共组件库的重点在于如何发布npm包，以及如何在本地调试npm包。

一、如何发布npm包？

1. 注册一个npm账号

前往npm官网注册账号

2. 创建一个简单的包

在本地创建一个项目文件夹sweet_heart (名字自己取，不要和NPM上已有的包名重复冲突就好)

然后通过终端进入文件夹,在该文件夹下通过命令创建一个包信息管理文件package.json

npm init -y

package.json内容大概如下

{
  "name": "sweet_heart",
  "version": "1.0.0",
  "description": "A demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "sweet",
    "heart"
  ],
  "author": {
    "name": "Yolanda",
    "email": "yolanda.yu@tuya.com"
  },
  "license": "MIT"
}

接着在sweet_heart文件夹里创建一个index.js文件，然后简单敲几行代码

;(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
      global.moduleName = factory()
}(this, (function () {
  var test = {
    sayHi: function () {
      console.log('Hi,my sweetheart!');
    }
  };

  return test
})))

到这里一个简单的包就创建好了。

如果想再完善一下的话，还可以在包根目录下创建README.md文件，里面可以写一些关于包的介绍信息，最后发布后会展示在NPM官网上。

3.开始发布创建好的包

如果是第一次发布包，在终端执行以下命令，然后输入前面注册好的NPM账号，密码和邮箱，将提示创建成功

npm adduser

如果不是第一次发布包，执行以下命令进行登录，同样输入NPM账号，密码和邮箱

npm login

注意：npm adduser成功的时候默认你已经登陆了，所以不需要再进行npm login了

接着先进入项目文件夹下，然后输入以下命令进行发布

npm publish

当终端显示如下面的信息时，就代表版本号为1.0.0的包发布成功，前往NPM官网就可以查到你的包了

sweet_heart git:(master) ✗ npm publish    
+ sweet_heart@1.0.0

4.更新已经发布的包

更新包的操作和发布包的操作其实是一样的

npm publish

二、如何本地调试npm包(yalc + nodemon方案）

1.全局安装 yalc ，执行：npm i yalc -g；

2.进入到 sweet_heart 目录下，执行 yalc push（模拟本地包的发布）；

3.在使用包的项目目录下，执行 yalc add sweet_heart

执行完该命令，可以发现项目根目录中自动生成了yalc.lock文件， package.json对应的包名的引用地址为file:.yalc/xxx, 且本地生成了一个.yalc文件目录，这也就是你的yalc引用的包文件了

yalc 相关指令

 yalc update 包名           // 更新包
 yalc remove 包名           // 删除包
 yalc remove --all          // 移除所有依赖并还原
 yalc installations show    // 查看本地仓库里存在的包
 yalc installations clean   // 清理不需要的包
 yalc publish --no-scripts  // 发布包完全禁用脚本执行

4.注意：测试完项目需要执行删除yalc包的操作，才能恢复正常使用发布到线上的包

nodemon 文件监控开源库

1.全局安装 nodemon，执行： npm i -g nodemon；

nodemon相关参数

    --ignore xx/       // 忽略目录xx/
    --watch xx/        // 观察目录xx/
    -C                 // 只在变更后执行，首次启动不执行命令
    -e vue,scss        // 监控指定后缀名的文件
    --debug            // 调试
    -x  命令（ 例子：npm run build && yalc push） // 自定义执行命令

2.配置包项目的package.json

以本例sweet_heart包为例，添加script下的节点如下：

 "watch": "nodemon --watch index.js -C -e js --debug -x 'yalc push'"

这样运行npm run watch ,那么index.js包内容文件的变动后，会自动执行yalc push,同时在使用包的项目中，包的表现也是最新的。