都2022年了，还不会使用rollup打包js库？

前言

最近项目中遇到了如果多个项目中都使用了utils这个文件下的工具方法，在新项目开始的时候又要把共用的utils文件给拷贝到新项目中，经过上网找资料，看官网文档，终于能实现自己基于rollup打包的工具包。

在刚开始选择打包工具库之前，在网上看到一些文章说rollup打包工具库是比较轻便的，而webpack更适用于打包一些应用。对比打包后的大小，果断选择了rollup.js。rollup即可以打包组件库、也可以打包工具库等等。

初始化你的项目

执行npm init -y，修改package.json文件如下

新建一个packages，放置需要打包的js文件

新建一个src，放置需要导出的js文件

安装所需要的包

yarn add rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-livereload rollup-plugin-node-resolve rollup-plugin-replace rollup-plugin-serve rollup-plugin-terser @babel/preset-env @babel/core -D

• rollup：rollup构建工具的包
• rollup-plugin-babel：es6/es7语法转换
• rollup-plugin-commonjs：用于将CommonJS模块转换为ES6,
• rollup-plugin-node-resolve：在打包第三方模块的过程中，用于直接解析npm模块
• rollup-plugin-livereload rollup-plugin-serve：启动一个服务器，用于本地调试
• @babel/preset-env：能讓你用最新的 JavaScript 語法
• @babel/core：babel-core 的作用是把js解析成ast
• rollup-plugin-terser：压缩你的代码，打包出来的文件体积更小

新建一个rollup.config.dev.js文件，在本地调试时使用

配置如下 修改package.json文件

• 配置如下 在根目录新建一个.babelrc
• 配置如下 在根目录新建一个index.html
• 引入dist下的bundle.umd.js文件
• 在rollup.config.dev.js可以看到，bundle.umd.js是供浏览器使用的包
• 看rollup.config.dev.js下有个name名为rollup-demo的名称，可自行修改。
• 然后在npm run dev启动项目
• 打开浏览器,输入localhost:3003，这个也可以在rollup.config.dev.js中查阅，也可自行修改
• 接着输入window['roolup-demo'].hellowrold()执行函数，这样就打印完成了
• 大家可能比较疑惑rollup-demo是哪里来的，这是在rollup.config.dev.js中打包umd格式的js文件配置的名称，挂载到了全局对象。

再新建一个rollup.config.build.js文件，打包时使用

• 其实这里的配置就是把rollup-plugin-livereload rollup-plugin-serve这两个包引用去掉，换成rollup-plugin-terser，毕竟这个是在生产中使用的，不需要调试 再修改一下package.json中的配置项

最后