Rollup打包入门到实践，你学会几分？

rollup在业务中基本很少会有接触到，通常在我们的业务中大部分接触的脚手架，或者自己搭建项目中，我们都是用webpack，无论是vue-cli，还是react-create-app他们都是基于webpack二次封装的脚手架，所以我们对rollup更陌生一点，本文是一篇关于rollup的学习笔记，希望看完在项目中有所思考和帮助。,在开始本文前，主要会从以下几点去认识了解rollup。,1、基础了解rollup打包不同模式，以及如何打包成不同模式的js。,2、以一个实际的例子，将工具库用rollup与gulp实现任务流打包，验证打包后的js是否ok，加深对rollup的使用。,npm 初始化一个基础的package.json。,局部安装rollup。,然后在当前目录下创建一个index.js。,在index.js中写入一点测试代码。,当你在当前项目安装rollup后，就可以用命令行npx执行rollup打包输出对应模式的bundle.js,es打包后的代码是这样的,不过此时es6还未为编译成es5。,打包前的代码。,命令行可以输出对应文件，我们也可以用配置文件方式，因此你可以像webpack一样新建一个rollup.config.js这样的配置，内容也非常简单。,当我们指定配置文件时,package.json的 type要指定成module,当node版本大于13时，默认是以ES Module方式，所以要给了提示，要么在package.json文件中加入type: module，要么把配置文件的后缀名改成rollup.config.mjs。,在上面的例子中我们代码里有使用es6,但是打包后仍未转译，es6转es5主要依赖以下几个关键插件rollup-plugin-babel,@babel/preset-env,@babel/core插件。,在根目录下新建一个.babelrc.json，并依次安装npm i rollup-plugin-babel @babel/preset-env @babel/core --save-dev。,在rollup.config.js中。,这样配置后，es6就可以成功编译成es5了。,我们发现还有@rollup/plugin-commonjs插件，这个插件主要是编译cjs。,如果你的代码使用的是cjs，未编译前。,编译打包后;,rollup默认就是esModule方式，所以你会看到你配置的输出文件都是export default方式输出的。,当我们简单的了解一些rollup的知识后，我们尝试打包一个我们自己写的工具库试一试。,在很早之前写过一篇关于webpack打包工具库，可以参考这篇文章webpack5构建一个通用的组件库,今天用rollup实现一个webpack5打包一样的功能,对应文章源码参考nice_utils。,首先我们把nice_utils[1]仓库下拷贝出src目录。,目录大概就是下面这样。,,因为项目是支持ts的所以也需要安装typescript。,执行以下命令，然后初始化tsconfig.json。,npx tsc --init主要是默认生成ts配置文件。,这里注意一点lib配置需要加上dom.iterable，不加这个会打包编译报错，因为我们的工具函数里有用到entries迭代器，所以lib上需要加上这个，默认生成的配置会比较多，关键的几个，特别注意lib,target,jsx即可。,在根目录下新建rollup.config.js。,以上一段代码看似好长，但实际上输出的就是一个数组配置，本质上就是输出。,我们注意到resolve这个方法有些特殊，主要是获取路径，我们以前可能不会这么做，我们会path.resove(__dirname, p),因为此时rollup是默认ESModule所以，__dirname就会报错,__dirname只有在cjs中才可以正确使用，所以这里只是换了一种方式，但实际上的作用并没有发生变化。,最后我们在package.json中配置打包命令。,顺带我们看下，我们使用到的一些插件，注意@types/node必须要安装，不安装就会提示需要安装此插件。,,并且我们看到了es6转es5所需要的@babel/core,@babel/preset-env以及rollup-plugin-babel，还有@rollup/plugin-commonjs,这个插件会将内部模块中如果有用到cjs会给我们转译成es6，因为在浏览器是不识别require这样的关键字的。,当我们运行npm run build时。,,我们新建了一个example文件，在该目录下新建一个index.html。,我们需要借助一个类似webpack-dev-server的第三方插件才行，这里我们结合gulp与browser-sync两个插件。,我们新建一个gulpfile.js文件。,我们所用到的就是gulp,并结合rollup打包我们的仓库代码。,在引入的config.js主要是把之前的相关配置提了出去。,最后我们在package.json添加运行命令。,注意我们server实际上有两个任务，所以必须要依次执行两个任务才行。,当我们运行npm run server时，就会打包，并同时打开浏览器。,,OK了，证明我们打包后的js就生效了。,了解rollup[2]的基础使用，对于工具库来说，rollup打包比起webpack配置要简单得多，但是远远没有webpack的生态强大,两者比较使用起来rollup比webpack要简单得多,我们也可以参考学习vue2[3]源码，vue2源码是如何通过rollup打包的。,以一个简单的例子结合gulp配和rollup打包对应不同模式的js，从而加深对rollup的理解。,本文示例code example[4]。,[1]nice_utils： https://github.com/maicFir/nice_utils,[2]rollup： https://rollupjs.org/guide/en/,[3]vue2： https://github.com/vuejs/vue,[4]code example： https://github.com/maicFir/lessonNote/tree/master/rollup/02