1.1 快速配置文件

前言

本篇主要以最简单的配置文件，来编译ES6代码文件

实现例子

• 只编译ES6代码
• 编译成iife格式(立即执行的函数格式)

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-01-01/

npm i

npm run build

实现步骤

步骤1: 目录和准备

.
├── build # 编译脚本
│   └── rollup.config.js
├── dist # 编译结果
│   └── index.js
├── example # HTML引用例子
│   └── index.html
├── package.json
└── src # ES6源码
    └── index.js

安装对应编译的npm模块

npm i --save-dev rollup 
npm i --save-dev @rollup/plugin-buble

• rollup 模块是rollup编译的核心模块
• @rollup/plugin-buble 模块是rollup的ES6编译插件
  • 功能和babel类似，是简化版的babel
  • 由于是简化版，编译速度比babel快一些
  • 对于其他复杂的ES6+的语法使用，后续再讲讲其他扩展插件

步骤2: rollup配置

• 编译配置文件路径 ./build/rollup.config.js
• 编译配置文件

const path = require('path');
const buble = require('@rollup/plugin-buble');

const resolve = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

module.exports = {
  input: resolve('src/index.js'),
  output: {
    file: resolve('dist/index.js'),
    format: 'iife'
  },
  plugins: [
    buble()
  ],
}

• 在./package.json配置编译执行脚本

  {
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.js"
  },
  }
  

步骤3: 待编译ES6源码

• 源码路径 ./src/index.js
• 源码内容

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const result = [...arr1, ...arr2];
console.log(result);

步骤4: 编译结果

• 在项目目录下执行 npm run build
• 编译结果在目录 ./dist/ 下
• 编译成ES5结果为

(function () {
    'use strict';

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];

    var result = arr1.concat( arr2);
    console.log(result);

}());

后记

本篇只是最简单的ES6语法编译，但是实际项目中肯定会用到ES6+以上的语法。同时本篇的@rollup/plugin-buble插件只是能编译简单的ES6语法，对于更加复杂的ES6+(包括ES7,ES8)等语法，就需要@rollup/plugin-babel插件结合babel原生编译插件去处理，在下一章会做详细的编译配置介绍。