实战 rollup 第一节， 入门

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 语法来的。 如果导入了方法没有使用的话，是不会被加入打包结果的。 但是怎么做到的咋们后面来聊

代码执行结果

这个代码的执行结果，大家一眼就看的出来，我还是放出来吧。