大家好，我是纸飞机，想必大家都在项目中经常会使用npm install、yarn add、cnpm install等安装包的命令吧。那么大家好奇过，这些包都是怎么来的吗？不用迷茫，本篇文章就为你揭秘他们到底怎么来的并且手把手教你做一个属于你自己的一个可以npm安装的组件库。
🔥无论是npm、yarn还是cnpm他们都有一个统一的名字：JavaScript包管理工具。顾名思义都是用来管理包的，用户将包发在线上随时可用。并且cnpm和npm本就是同宗同源，他们的命令都大致相同，只是cnpm对国内有好些。yarn虽然不同，但无非就是多了个缓存离线下载。下面放出三个大哥的官网，大家可以去了解，这次的主题是npm包的上传。
npm：npm
yarn：Yarn 中文文档
🔥一、创建包
1. git init my_npm_comp 2. cd my_npm_comp 3. npm init -y
创建出这么个玩意，操作中初始化了一个git仓库，一个npm仓库（建立package.json依赖包文件）。
🔥二、编写组件库
这里要注意了，我们是要做一个组件库，而不是一个组件，所以我们需要尽量模块化。
我们在package.json同级下建立一个components文件夹，然后里面建立的一个个文件的就是你的组件。例如我要来做个Alert组件和Toast组件。
首先components下建立Alert.js和Toast.js。
❤️1、Alert组件制作
这是个滥竽充数的组件，勿怪勿怪，为了凑个库，也好讲解。
components下的Alert.js：
let Alert = { show:function(){ alert('纸飞机666') } } export default Alert;
❤️2、Toast组件制作
components下的Toast.js：
let Toast = { // 隐藏的 setTimeOut 引用 hideTimeOut: null, /** * 初始化 */ init: function () { var toastNode = document.createElement("section"); toastNode.innerHTML = '<i class="iconfont icon-success"></i><i class="iconfont icon-error"></i><span class="text">111</span>'; toastNode.id = "toastWaka"; // 设置id，一个页面有且仅有一个Toast toastNode.setAttribute("class", "toast"); // 设置类名 toastNode.style.display = "none"; // 设置隐藏 document.body.appendChild(toastNode); }, /** * 显示Toast * @param text 文本内容 * @param type 类型 success error * @param duration 持续时间 */ show: function (text, type, duration) { // 确保上一次的 TimeOut 已被清空 if (this.hideTimeOut) { clearTimeout(this.hideTimeOut); this.hideTimeOut = null; // console.error('上一次的 TimeOut 还未走完!'); // return; } if (!text) { console.error("text 不能为空!"); return; } var domToastWaka = document.getElementById("toastWaka"); console.log("domToastWaka", domToastWaka); if (!domToastWaka) { console.error("toastWaka DOM 不存在!"); return; } var domIconSuccess = domToastWaka.querySelector(".icon-success"); // 成功图标 var domIconError = domToastWaka.querySelector(".icon-error"); // 错误图标 var domToastText = domToastWaka.querySelector(".text"); // 文字 domToastText.innerHTML = text || ""; switch (type) { case "success": domIconSuccess.style.display = "inline"; domIconError.style.display = "none"; break; case "error": domIconSuccess.style.display = "none"; domIconError.style.display = "inline"; break; default: domIconSuccess.style.display = "none"; domIconError.style.display = "none"; break; } domToastWaka.style.display = "block"; // 不传的话默认2s var that = this; this.hideTimeOut = setTimeout(function () { domToastWaka.style.display = "none"; that.hideTimeOut = null; // 置 TimeOut 引用为空 }, duration || 2000); }, /** * 隐藏 Toast */ hide: function () { // 如果 TimeOut 存在 if (this.hideTimeOut) { // 清空 TimeOut 引用 clearTimeout(this.hideTimeOut); this.hideTimeOut = null; } var domToastWaka = document.getElementById("toastWaka"); if (domToastWaka) { domToastWaka.style.display = "none"; } }, }; Toast.init(); export default Toast;
❤️3、css样式和库导出出口
my_npm_comp下建立style.css放css样式，index.js是整个组件库的出口，便于后面install后导入组件。
style.css
/*toast样式*/ #toastWaka { position: absolute; display: none; left: 50%; bottom: 50%; z-index: 99999; margin: 0 auto; -webkit-transform: translate(-50%); transform: translate(-50%); width: 120px; height:40px; line-height: 40px; border-radius: 5px; text-align: center; color: #fff; background-color: rgba(000,000,000,0.5); } #toastWaka .text{ color: #fff; display: inline-block; font-size: 14px; position: absolute; top:0; bottom:0; right:0; left:0; }
注意index.js非常重要，毕竟一定要有导出，你才能导入 。这里涉及到一些前端模块化的知识，后面会补充，有兴趣的小伙伴也可以自行去查看。
index.js
import Toast from './components/Toast' import Alert from './components/Alert' let myLibs = {} myLibs.Alert = Alert myLibs.Toast = Toast export default myLibs
