了解Rollup函数: 高效的模块打包工具

一、功能简介

Rollup 是一个 JavaScript 模块打包器，可以把小块代码编译成大块复杂的代码，它特别适合于 ES6 模块化的打包。与其他模块打包工具不同，它使用的是ES6的标准语法进行打包。生成的代码可读性高，并且体积小，可以有效地减少代码的加载时间，提升性能。

二、基本使用

1、全局安装rollup

$ npm install -g rollup

2、新建main.js和foo.js两个 JavaScript文件，main.js使用ES6模块导入foo.js文件

// main.js
import foo from './foo.js';
console.log(foo());
 
// foo.js
export default function () {
    return 'hello world!';
}

3、使用rollup进行打包

$rollup main.js --file bundle.js --format iife

参数说明:

–file – 指定打包后生成的文件名

–format – 指定生成代码的格式，我这里指定了iife。iife即一个自动执行的函数，这样就可以在页面中使用打包后的代码，而不需要担心变量污染问题

三、高级使用

1.Rollup插件

Rollup 有很多插件，可以帮助我们完成一些高级的功能。

1）、rollup-plugin-babel: 将ES6及以上版本的JavaScript代码转成ES5版本

$npm install --save-dev rollup-plugin-babel@latest

配置方式：

// rollup.config.js
import babel from 'rollup-plugin-babel';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'cjs'
    },
    plugins: [
        babel({
            exclude: 'node_modules/**' // 排除node_modules下的文件
        })
    ]
};

2）、rollup-plugin-commonjs: 将CommonJS模块转成ES6模块

$npm install --save-dev rollup-plugin-commonjs@latest

配置方式：

// rollup.config.js 
import commonjs from 'rollup-plugin-commonjs';

export default [{
    input: 'src/index.js',
    output: {
        file: 'dist/bundle-cjs.js',
        format: 'cjs',
        exports: 'named'
    },
    plugins: [
        commonjs({
            include: /node_modules/
        })
    ]
}];

3）、rollup-plugin-node-resolve: 解析导入模块

$npm install --save-dev rollup-plugin-node-resolve@latest

配置方式：

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';

export default [{
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'es'
    },
    plugins: [
        resolve({
            jsnext: true,
            main: true,
            browser: true
        })
    ]
}];

2.Rollup配置文件

当打包的模块较多，或者需要引入多个插件时，可以使用配置文件，将常用配置放到配置文件中，方便代码的维护。

// rollup.config.js
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'cjs'
    },
    plugins: [
        babel(), // 配置babel
        commonjs(), // 配置CommonJS
        resolve() // 配置模块导入
    ],
    external: [
        'react',
        'react-dom'
    ]
};

四、总结

通过本文的介绍，我们可以看到rollup是一个高效的 JavaScript模块打包工具，它使用ES6作为标准，体积小，性能好。与其它打包工具比较，它的代码更可读性好，且生成的代码量更少。

同时，我们还可以了解到一些高级功能，例如：插件的使用，配置文件的使用等等。

因此，在实际工作中，我们应该灵活地选择不同的工具来完成我们的工作，并尽可能熟悉它们的使用方式，这样才能使我们的代码更优雅，更好维护。