rollup模块打包器入门

更新日期: 2020-05-07阅读: 1.7k标签: rollup

一、简介

rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,其源码中模块的导入导出采用的是ES6模块语法,即源码需要采用ES6语法进行编写

rollup与webpack的对比:

  • rollup只能处理js模块,而webpack可以处理任何资源,可以把所有的资源都当成模块进行处理。
  • rollup多适用于类库的打包,打包的代码需要供他人使用,webpack多适用于应用的打包
  • rollup一般不会产生额外的代码(除了必要的cjs, umd头外),所以rollup打包出来的代码执行更快、可读性更强,webpack由于功能强大,所以会产生很多额外的代码、打包出来的文件较大、执行较慢、可读性较差
  • rollup会将所有资源放同一个地方一次性加载,利用 tree-shake特性来剔除未使用的代码,减少冗余,而webpack则是拆分代码、按需加载

二、安装与基本使用

要使用rollup,需要在全局进行安装,如:

// 全局安装rollup
> sudo npm install --global rollup

rollup安装完成后,就可以通过rollup命令进行打包了:

① rollup 模块入口文件:

// 进入项目根目录下,并以src目录下的index.js作为模块入口进行打包
> rollup ./src/index.js

此时可以看到直接在控制台中输出了模块打包结果,因为没有指定将打包结果输出到哪个文件下,所以会直接输出打包结果到控制台中。

② 指定模块输出, --file

// 将打包结果输出到当前目录下的bundle.js文件中
> rollup ./src/index.js --file bundle.js

③ 指定打包后的模块输出格式,--format

// 将模块打包成iife格式,即将模块放到匿名自执行函数中执行
> rollup ./src/index.js --file bundle.js --format iife

如果没有指定format,那么默认会输出为es格式。rollup支持的模块输出格式为: escjsamdumdiifesystem。其中cjs就是CommonJS模块规范

④ 指定打包后模块的输出结果接收变量,--name
指定一个变量用于接收打包后的模块输出结果

// 用result变量来接收模块的输出结果
> rollup ./src/index.js --file bundle.js --format iife --name result

输出结果如下:

var result = (function () {
    'use strict';
    const foo = "foo";
    return foo;
}());

⑤ 源码中模块的导入导出必须使用es6模块语法
如果源码中模块的导入导出采用的是CommonJS模块语法,那么打包后仍然会包含require,如:

// foo.js
const foo = "foo";
module.exports = foo;
// index.js
const foo = require("./foo");
console.log(foo);
module.exports = foo;
> rollup ./src/index.js --file bundle.js --format cjs

打包后的输出结果中仍然包含require语法

'use strict';

const foo = require("./foo");
console.log(foo);
module.exports = foo;

从打包结果可以看到,源码中的require语句原封不动输出到了bundle.js中,由于bundle.js的路径不固定,故require("./foo")执行可能因为找不到模块而失败


三、使用配置文件打包

要使用配置文件进行打包,需要带上-c参数,后面接配置文件即可,配置文件默认位置在项目根目录下,默认文件名为rollup.config.js

① 在项目根目录下新建一个rollup.config.js文件

// rollup.config.js
export default {
    input: "src/index.js", // 指定模块入口
    output: {
        file: "bundle.js", // 指定模块输出文件路径
        format: "cjs" // 指定模块输出格式
    }
}

② 通过rollup -c 加载配置文件进行打包

// 使用项目根目录下的rollup.config.js配置文件进行打包
> rollup -c


四、使用插件

rollup也支持我们使用一些插件来为打包提供更大的灵活性。
① 使用babel插件编译我们的js文件

// 首先安装rollup-plugin-babel插件
> npm install rollup-plugin-babel --save-dev

② 在配置文件中引入babel插件

import bable from "rollup-plugin-babel"; // 引入babel插件

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

③ 添加.babelrc文件

// 安装babel预设
> npm install @babel/preset-env --save-dev

用@babel/preset-env模块中定义的预设进行处理,所以需要安装@babel/preset-env模块

{
    "presets": [
        "@babel/preset-env" // 添加安装好的预设
    ]
}

此时再打包,源码中的es6语法就能被转换为es5了。


链接: https://www.fly63.com/article/detial/9006

使用rollup.js打包javasript

rollup是一款小巧的javascript模块打包工具,更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化

使用Rollup打包并发布到npm

其实用 webpack 也可以打包库,不过根据create-react-app项目贡献者的说法:rollup适合发布 js 库,而webpack更适合做应用程序。简而言之就是:rollup 打包 js 比 webpack 方便,而 webpack 打包 css 比 rollup 方便,相信大家已经有所了解

前端组件/库打包利器rollup使用与配置实战

目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。

Rollup.js: 开源JS库的打包利器

Rollup 是一个 JavaScript 模块打包器,说到模块打包器,自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器,那么在 webpack 已经成为前端构建主流的今天,为什么还要用 Rollup 呢?

rollup配置及使用

业务线长期的积累产生了许许多多重复性的工具方法,业务功能模块等, 我们正好可以用 rollup 构建一个 npm 私服工具包,便于后期业务使用,减少重复性的代码编写。

Vue 是如何用 Rollup 打包的?

Rollup 是一个 JavaScript 模块打包器,它将小块的代码编译并合并成更大、更复杂的代码,比如打包一个库或应用程序。它使用的是 ES Modules 模块化标准,而不是之前的模块化方案

打包工具 rollup.js 入门教程

打包工具的作用是,将多个 JavaScript 脚本合并成一个脚本,供浏览器使用。浏览器需要脚本打包,主要原因有三个。rollup.js 的开发本意,是打造一款简单易用的 ES 模块打包工具,不必配置,直接使用。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!