公共组件库的开发主要是将工作中常用的一些组件封装好后，发布为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": "[email protected]"
},
"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,同时在使用包的项目中，包的表现也是最新的。