学习rollup.js模块文件打包

一:rollup 是什么?
Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码.

webpack 和 Rollup 对比不同点:

webpack支持在项目中使用对项目进行打包,webpack的核心功能包括 code-splitting(按需加载js)和 static assets(资源文件处理)。

rollup 适合使用在独立的js库中进行打包。但是目前还不支持 code-splitting 和 热更新,更趋向专注于构建分类的js库,也就是说大多
只会生成一个js文件来被其他项目依赖,更好地利用 es6 modules的优势来缩小和优化代码。

Tree-shaking
在rollup编译模块的过程中,通过Tree-shaking的方式来去掉模块中未使用到的代码,仅仅保留被我们调用到的代码来减少文件的大小。

rollup命令安装如下:
命令:npm install -g rollup 进行安装。

比如我们看一个demo代码如下:

新建文件夹 roll, 文件夹内有如下文件 main.js 和 index.js; 及 index.html文件;

main.js 代码如下:

export function aa(x) {
return x * x;
} export function bb(y) {
return y + y;
}

index.js 代码如下:

import { bb } from './main.js';

console.log(bb(5)); 

如上代码可以看到,main.js 内有两个函数 aa, 和 bb, 但是在index.js内,并没有使用aa这个函数,当我们使用 rollup进行模块打包
的时候,会把未调用到的函数会去掉,这样的话,可以使多余代码去掉,使得文件更小。

rollup 打包有以下几种方式:
1. 对于浏览器 可以有如下命令:

rollup index.js -o bundle2.js -f iife 

最后生成 bundle2.js 代码如下样子:

(function () {
'use strict'; function bb(y) {
return y + y;
} console.log(bb(5)); }());

2. 对于Node.js 代码如下样子:(编译成CommonJS的模块样子)
rollup index.js -o bundle.js -f cjs
如上命令 -f 是 (--output.format的缩写),指定了所创建的bundle的类型,这里是CommonJS(在Node.js中运行的)。
最后生成 bundle.js 代码如下样子:

'use strict';

function bb(y) {
return y + y;
} console.log(bb(5));

3. 对于浏览器和 Node.js(使用UMD format requires a bundle name):
rollup index.js -o bundle3.js -f umd --name 'myBundle'
最后生成 bundle3.js 代码如下样子:

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
typeof define === 'function' && define.amd ? define(factory) :
(factory());
}(this, (function () { 'use strict'; function bb(y) {
return y + y;
} console.log(bb(5)); })));

二:使用配置文件

rollup 也可以和webpack一样使用配置文件来进行打包了,rollup的默认配置文件就叫 rollup.config.js, 我在roll文件夹下 新建一个roll.config.js后,然后添加如下代码:

export default {
input: './main.js',
output: {
file: 'bundle4.js',
format: 'cjs'
}
}

然后在roll文件夹内, 运行命令 rollup -c 来使用配置文件,就会在roll项目文件夹内生成 bundle4.js文件,里面生成后的代码
如下:

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function aa(x) {
return x * x;
} function bb(y) {
return y + y;
} exports.aa = aa;
exports.bb = bb;

注意:Rollup本身会处理配置文件,所以可以使用 export default的语法,代码不会经过Babel等类似工具编译,所以只能使用
所用node.js版本支持es2015语法。

默认的配置文件叫 rollup.config.js, 我们也可以叫不同的名字,比如叫 rollup.config.dev.js或roll.config.prod.js,
因此我们允许命令的时候可以如下运行: rollup --config rollup.config.dev.js

rollup 配置选项如下:

input: 这个包的入口点 比如我上面包的入口点为 main.js

output: {
file: 'bundle4.js',
format: 'cjs',
name: 'MyBundle'
}

output.file: 要写入的文件,也可以用于生成的sourcemaps。
output.format 生成包的格式,有如下格式:

1. amd -- 异步模块定义,用于像RequestJS这样的模块加载器。
2. cjs -- CommonJS, 适用于Node或Browserify/webpack
3. es -- 将软件包保存为ES模块文件。
4. iife -- 一个自动执行的功能,适合作为 <script>标签这样的。
5. umd -- 通用模块定义,以amd, cjs, 和 iife 为一体。

output.name: 代表iife/umd 包,同一页上的其他的脚本可以访问,比如:配置文件如下:

export default {
input: './main.js',
output: {
file: 'bundle5.js',
format: 'iife',
name: 'MyBundle1'
}
}

最后生成 bundle5.js 代码变为如下:

var MyBundle1 = (function (exports) {
'use strict';
function aa(x) {
return x * x;
}
function bb(y) {
return y + y;
}
exports.aa = aa;
exports.bb = bb;
return exports;
}({}));

下面分别看看以 amd, cjs, es, iife 及 umd 打包生成后的文件进行对比下,看看他们打包后的代码分别是什么样的:

1-1 amd配置文件如下(rollup.config.js):

export default {
input: './main.js',
output: {
file: 'amd.js',
format: 'amd',
name: 'AMD'
}
}

打包后生成的amd.js如下:

define(['exports'], function (exports) { 'use strict';
function aa(x) {
return x * x;
}
function bb(y) {
return y + y;
}
exports.aa = aa;
exports.bb = bb;
Object.defineProperty(exports, '__esModule', { value: true });
});

1-2 cjs配置文件如下(rollup.config.js):

export default {
input: './main.js',
output: {
file: 'cjs.js',
format: 'cjs',
name: 'CJS'
}
}

打包后生成的cjs.js如下:

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function aa(x) {
return x * x;
} function bb(y) {
return y + y;
} exports.aa = aa;
exports.bb = bb;

1-3 es配置文件如下(rollup.config.js):

export default {
input: './main.js',
output: {
file: 'es.js',
format: 'es',
name: 'ES'
}
}

打包后生成的es.js如下:

function aa(x) {
return x * x;
} function bb(y) {
return y + y;
} export { aa, bb };

1-4 iife配置文件如下(rollup.config.js):

export default {
input: './main.js',
output: {
file: 'iife.js',
format: 'iife',
name: 'IIFE'
}
}

打包后生成的iife.js如下:

var IIFE = (function (exports) {
'use strict'; function aa(x) {
return x * x;
} function bb(y) {
return y + y;
} exports.aa = aa;
exports.bb = bb; return exports; }({}));

1-5 umd 配置文件如下(rollup.config.js):

export default {
input: './main.js',
output: {
file: 'umd.js',
format: 'umd',
name: 'UMD'
}
}

打包后生成的umd.js如下:

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.UMD = {})));
}(this, (function (exports) {
'use strict';
function aa(x) {
return x * x;
}
function bb(y) {
return y + y;
}
exports.aa = aa;
exports.bb = bb;
Object.defineProperty(exports, '__esModule', { value: true });
})));

所有的配置选项如下:

// rollup.config.js
export default {
// 核心选项
input, // 要打包的文件
external, // 将模块ID的逗号分隔列表排除
plugins, // 额外选项
onwarn, // danger zone
acorn,
context,
moduleContext,
legacy, output: {
// 如果需要输出多个,可以为数组 // 核心选项
file, // 输出的文件(如果没有这个参数,则直接输出到控制台)
format, // 输出的文件类型(amd, cjs, es, iife, umd)
name, // 生成UMD模块的名字
global, // 以`module ID:Global` 键值对的形式,用逗号分隔开 任何定义在这里模块ID定义添加到外部依赖 // 额外选项
paths,
banner, // 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
footer, // 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
intro, // 在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
outro, // 在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
sourcemap,
sourcemapFile,
interop, // 高危选项
exports,
amd,
indent,
strict
}
}

三:使用插件
目前为止,我们通过相对路径,将一个入口文件和一个模块创建了一个简单的bundle.js, 但是当构建非常复杂的时候,我们需要引入npm安装模块,通过Babel编译代码,和JSON文件打交道等。因此我们可以使用插件在打包过程中更改Rollup的行为。

3-1 rollup-plugin-json (使rollup从JSON文件中读取数据)
将 rollup-plugin-json 安装为开发依赖。命令如下:
npm install --save-dev rollup-plugin-json

安装之前,我们在项目中新建或安装一个 package.json; 具体安装不介绍(使用npm init一直回车键即可)。

我们先来更改 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: './main.js',
output: {
file: 'pluginjson.js',
format: 'cjs',
},
plugins: [ json() ]
}

最后会生成pluginjson文件代码如下:

'use strict';

var version = "1.0.0";

function main() {
console.log('version ' +version);
} module.exports = main;

3-2 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 插件
这两个插件可以让你加载 Node.js里面的CommonJS模块。
先安装这两个插件:
npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs

更多关于 rollup 可以看官网 http://www.rollupjs.com/

学习rollup.js模块文件打包的更多相关文章

  1. webpack 3.X学习之JS压缩与打包HTML文件

    js压缩 webpack自带一个插件uglifyjs-webpack-plugin来压缩js,所以不需要再次安装,当一切都准备妥当,引入uglifyjs-webpack-plugin模块: const ...

  2. linux学习(七)文件打包和压缩命令

    一.前言 在Windows操作系统下,我们会使用WinRAR或者快压等等的压缩软件来进行压缩或者解压. 在Linux下当然也存在压缩或解压的操作,下面我们就来学习一下在Linux下是怎么压缩和解压的! ...

  3. gulp实时编译less,压缩合并requirejs模块文件

    gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...

  4. windows下使用pyinstaller将多个目录的Python文件打包成exe可执行文件

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.引言 需要将一个工程涉及两个目录的模块文件打包成exe,打包环境如 ...

  5. js模块加载详解

    看着java中各种import加载,在回过头来看看javascript还在自己造轮子,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一 同步加 ...

  6. 冗余代码都走开——前端模块打包利器 Rollup.js 入门

    之前翻译过一篇文章,介绍了通过 ES2015 的解构赋值语法引入模块,可以让打包工具(browserify)最终编译出来的代码量最小化. 殊不知在 webpack 1.X 版本是无法利用该特性来避免引 ...

  7. 实用程序包utils - 基于Rollup打包输出各模块文件(二)

    上一次,我们讲到了如何去搭建一个前端工具库的工程,那么今天我们来聊一聊如何去将其打包输出. 需求 事情是这个样子的.我有一个这样的需求,或者是我发现有这么一个需求.就是有时候吧,我也不想搞的那么复杂, ...

  8. 深入学习rollup来进行打包

    深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 ...

  9. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

随机推荐

  1. Less 原理

    Less 原理 Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件. Less 并没有裁剪 CSS 原有的特性,更不 ...

  2. 使用 Bundle 在 Activity 之间交换数据

    [toc] 使用 Bundle 在 Activity 之间交换数据 场景 当一个 Activity 启动另一个 Activity 时,常常会有一些数据需要传过去.因为两个 Activity 之间本来就 ...

  3. MongoDB中聚合工具Aggregate等的介绍与使用

    Aggregate是MongoDB提供的众多工具中的比较重要的一个,类似于SQL语句中的GROUP BY.聚合工具可以让开发人员直接使用MongoDB原生的命令操作数据库中的数据,并且按照要求进行聚合 ...

  4. mssql执行计划查看的一些知识

    在MSSQL中,查看较慢语句的执行计划,就是一个比较直观的方式, 如果查看执行计划呢: 1.从右到左,从上到下的顺序阅读执行计划2.执行计划中每个图标代表一个运算符,总开销为100%3.数据从右向左在 ...

  5. Tomcat 日志分割

    一.前言 随着每天业务的增长,Tomcat 的catalina.out日志 变得越来越大,占用磁盘空间不说.要查看某个时候的日志的时候,庞大的日志让你顿时无从下手,所以日志的切割的变得刻不容缓.而且, ...

  6. 读懂源码:一步一步实现一个 Vue

    源码阅读:究竟怎样才算是读懂了? 市面上有很多源码分析的文章,就我看到的而言,基本的套路就是梳理流程,讲一讲每个模块的功能,整篇文章有一大半都是直接挂源码.我不禁怀疑,作者真的看懂了吗?为什么我看完后 ...

  7. 2017最新PHP初级经典面试题目汇总(下篇)

    17.isset.empty.is_null的区别 isset 判断变量是否定义或者是否为空 变量存在返回ture,否则返回false 变量定义不赋值返回false unset一个变量,返回false ...

  8. Keepalived实现双机热备

    第一步.安装.网上很多源码安装的步骤.咱们这里以最快的方式 . [Shell] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 ...

  9. 开源纯C#工控网关+组态软件(七)数据采集与归档

    一.   引子 在当前自动化.信息化.智能化的时代背景下,数据的作用日渐凸显.而工业发展到如今,科技含量和自动化水平均显著提高,但对数据的采集.利用才开始起步. 对工业企业而言,数据采集日益受到重视, ...

  10. phpcms的验证码替换 及 phpcms实现全站搜索功能

    在使用phpcms替换网页的时候,除了正常的替换栏目.内容页等,其他的什么验证码啦,提交表单了,搜索功能了,这些在替换的时候可能会对一些默认文件有一些小小 的改变 下面就是自己在失败中成功的过程,最后 ...