实战 rollup 第一节，入门

Posted 2021-08-13 twinkle||cll

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实战 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,);