您的位置:

了解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作为标准,体积小,性能好。与其它打包工具比较,它的代码更可读性好,且生成的代码量更少。

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

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