Rollup简单入门

RollupJavaScript打包工具简单入门

Posted by wang chong on February 15, 2019

rollup

rollup是一个模块打包工具,可以将小块代码编译成大块复杂的代码。rollup的特点可以将代码打包成任意模块的代码。同时内置强大的tree-shaking,让代码更简洁。

打包命令

rollup的打包命令也是相当的丰富。

-i, --input                 要打包的文件(必须)
-o, --output.file           输出的文件 (如果没有这个参数,则直接输出到控制台)
-f, --output.format [es]    输出的文件类型 (amd, cjs, es, iife, umd)
-e, --external              将模块ID的逗号分隔列表排除
-g, --globals               以`module ID:Global` 键值对的形式,用逗号分隔开 
                              任何定义在这里模块ID定义添加到外部依赖
-n, --name                  生成UMD模块的名字
-m, --sourcemap             生成 sourcemap (`-m inline` for inline map)
--amd.id                    AMD模块的ID,默认是个匿名函数
--amd.define                使用Function来代替`define`
--no-strict                 在生成的包中省略`"use strict";`
--no-conflict               对于UMD模块来说,给全局变量生成一个无冲突的方法
--intro                     在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro                     在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner                    在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer                    在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop                   包含公共的模块(这个选项是默认添加的)

开始

在项目根目录下创建src目录,并分别创建main.js和maths.js,内容如下:

//maths.js
export function square(x) {
    return x * x;
}
export function cube(x){
    return x * x * x;
}
//main.js
import {cube} from "./maths";

console.log(cube(2));

上面代码是在maths中定义了两个方法并导出,然后在main.js中引用。使用命令行启动编译

rollup src/main.js -o ./build/bundle.js -f cjs

上面命令是把src下的main.js编译到build目录下的bundle.js文件,使用了模块类型是CommonJS。

使用配置文件编译

rollup的配置文件也是很语义化。下面列一个总的,但是实际上用到的也不多。

export default {
  // 核心选项
  input,     // 必须
  external,
  plugins,

  // 额外选项
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个,可以是一个数组)
    // 核心选项
    file,    // 必须  
    format,  // 必须
    name,
    globals,

    // 额外选项
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
};

我们来写下配置文件

export default {
    input : 'src/main.js',
    output : {
        file : './build/bundle.js',
        format : 'amd',
        sourcemap:true,
    },
}
  1. input是主入口,
  2. output是输出的文件。

    1. file是指输出的文件(文件名)。
    2. format是指代码编译成什么模块。
    3. sourcema是指是否要生成的sourcemap源。

使用配置文件编译执行以下命令

rollup -c 或者 rollup –config

也可以指定特定的配置文件进行编译

rollup –config rollup.config.dev.js

使用插件

我们可以用 插件(plugins) 在打包的关键过程中更改 Rollup 的行为

安装插件

npm install –save-dev rollup-plugin-json

修改src代码

// src/main.js
import { version } from '../package.json';

export default function () {
  console.log('version ' + version);
}

修改rollup.config.js代码,加入JSON插件

import json from 'rollup-plugin-json';
export default {
    input : 'src/main.js',
    output : {
        file : './build/bundle.js',
        format : 'amd',
        sourcemap:true,
    },
    pulgins :[
        json(),
}

启动编译 把启动项在package.json中的scripts中添加

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "rollup -c"
  }

执行

npm run dev