从写库到发布npm看这一篇就够了

背景

    我们在日常的开发工作中，经常会有一些封装的比较好用的库或者自定义组件，用的顺手又封装的比较完善，但是呢，公司又没有搭建私有npm仓库，这时候我们就可以将封装好的库发布至公有云npm上，以后就可以直接安装使用，提升开发效率。同时开放给大家使用，也会严格要求自己的代码质量不断维护优化，提升自己的技术水平。>         接下来按照下面的流程看完，基本上能够让你具备发布一个简单库的技能，也可以在开发vue项目的同时，将封装好的vue自定义组件同步发布供大家一起使用。

打包工具选择

不同的需要使用不同的打包工具，比如我们在发布js库的时候，优先选择使用Rollup进行打包，它要比webpack更加简单并且打包体积要更小一些，只是将我们的js库代码转换为目标js，并且如果有需要可以生成支持umd、commonjs、es的js代码，早期在看vue2+源码的时候就是使用Rollup进行打包的。

那我们在项目中使用的自定义组件用什么进行打包封装呢？ 这取决于我们在项目中使用到了什么工具，vue2.0一般都是内置了webpack进行打包，我们可以使用vue-cli-service build --target lib打包命令进行打包（详情可以网上查询），下面的案例中我是在vue3.0项目中进行打包封装，使用的是vite打包工具。

图片懒加载库从编写到打包发布（rollup.js）

准备rollup打包配置

初始化package.json

npm init 

安装rollup

npm install rollup --save-dev 

创建rollup.config.js文件，配置基础打包配置

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
const pkg = require('./package.json')

export default {input:'./src/index.js',// 打包入口文件// 输出文件配置output:[{file: pkg.main,// 打包完成后文件位置format:'umd', // 输出格式 amd es6 iife umd cjs均可配置sourcemap: true, // 输出.map文件，方便调试name:'simLazy'// 如果iife,umd需要指定一个全局变量，window.simLazy},{file: pkg.module,format: 'es',sourcemap: true},],plugins:[commonjs(), resolve()]
} 

由于我编写的库比较简单，配置文件中都是最基本的打包一个库的配置，你也可以根据你的需要配置一些其他插件类似解析ts或者增加sourceMap等功能，这些rollup都是支持的。

resolve ：插件是在我们库中使用依赖插件代码合并打包在一起。

commonjs ：在rollup中默认只支持es6+的import/export方式，但是在我们在库中使用commonjs的库就会无法正常导入使用，该插件帮我们将commonjs模块转换为es6。

还有很多插件可自行上官网查询…

配置文件配置完成，我们在package.json中增加script，方便我们进行打包：

"scripts": { "build": "rollup --config" 
} 

IntersectionObserver实现图片懒加载

该插件是应用于vue3框架下，主要基于