rollup 是啥，咋不过多介绍，这里记录一下自己在看rollup文档和相关资料，然后手动来敲一些代码，并且以博客的形式输入，加深自己的理解
本次的目标
熟悉一些基本的配置，相比webpack来说，配置项还是少了许多的，虽然webpack既有 plugin, 也有loader。 但是 rollup 貌似是只有plugin的。
既然是打包工具，那么肯定先打个包在说。多个文件相互引入，然后输出打包结果。
目录
my-rollup //我的项目名称 ├─ build // 配置的打包目录 │ └─ rollup.config.js // 结果配置文件 ├─ dist // 存放打包输出目录 │ └─ index.js // 打包结果的源文件 ├─ package-lock.json // npm 锁定包版本的文件 ├─ package.json // npm 入口文件 └─ src // 源代码 ├─ add.js // 对外导出一个add方法 ├─ index.js // 主入口 └─ reduce.js // 对外导出一个reduce方法
代码编写
由于我们使用 rollup, 所以就先安装 rollup的包, npm install rollup -D或者npm install --save-dev rollup 都行，然后为了检验代码的结果， 我们在安装一个 将 es6 转成 es5的库——@rollup/plugin-buble.
package.json 文件最终如下
{ "name": "my-rollup", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "rollup -c ./build/rollup.config.js" # 执行的命令， }, "author": "", "license": "ISC", "devDependencies": { "@rollup/plugin-buble": "^0.21.3", "rollup": "^2.53.1" } }
配置 rollup.config.js 文件
rollup.config.js里面的环境是node环境，所以目前需要使用commonJS的语法。rollup 使用插件也是一个配置选项， 直接在对外导出的对象中 包含 plugins这个熟悉就行,详情如下：
// 引入路径 const path = require('path'); // 引入代码转换库 const buble = require('@rollup/plugin-buble'); // 生成一个绝对路径，node环境查找文件使用绝对路径进行查找 const resolve = function(filePath) { return path.join(__dirname, '..', filePath) } // 这里是node环境，所以需要使用commonsjs的语法 module.exports = { input: resolve('src/index.js'), output: { file: resolve('dist/index.js'), format: 'iife' // 打包成 iife 立即执行函数的模式，方便测试运行 }, plugins: [ buble() ] }
书写主要程序的代码
src/index.js
import { add } from "./add"; import { reduce } from "./reduce"; const arr1 = ['a', 'b','c']; const arr2 = [4,5,6]; const result = [...arr1, ...arr2]; console.log(result); const a = 1, b = 2; const res = add(a, b); const d = reduce(a, b); // 注意我的这个 d 是没有使用的哦！ console.log(res,);
add.js 和 reducer.js
打包
代码写好了，直接在终端 使用 npm run build
分析打包姐
打包的结果如下：
这里我们就可以简单的得出结论， rollup的 treeshaking 是基于 esm 语法来的。 如果导入了方法没有使用的话，是不会被加入打包结果的。 但是怎么做到的咋们后面来聊
代码执行结果
这个代码的执行结果，大家一眼就看的出来，我还是放出来吧。
