下一代 ES 模块构建工具 Rollup

Rollup 官方声称是下一代 ES 模块打包工具。现在有很多打包工具,当然最为流行的是 Webpack,对于 Web 应用来说 Webpack 是不错的选择,但是对于开发类库来说 Rollup 是一个不错的选择。

安装

同样通过 NPM 很容易,我们也可以通过 Yarn 来安装

npm install --global rollup
OR
yarn global add rollup

使用

应用程序入口 main.js

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

依赖模块 foo.js

// foo.js
export default 'hello world!';

构建

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

上面的命令通过 -f 选项告诉编译器采用 CommonJS 方式构建输出到 bundle.js 文件中去:

'use strict';

var foo = 'hello world!';

var main = function () {
  console.log(foo);
};

module.exports = main;

rollup.config.js

对于复杂的构建,有太多的选项需要配置,这样一来通过命令行对我们来说太过复杂,我们可以通过配置文件来描述打包的过程:

在项目根目录创建文件 rollup.config.js

// rollup.config.js
export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};

通过命令 rollup -c Rollup 会执行上述配置。

插件

我们使用 rollup-plugin-json 插件来读取 JSON 文件。

安装插件

yarn add rollup-plugin-json -D

在代码中使用插件

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

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

使用插件

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

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    },
    plugins: [ json() ]
};

编译结果:

'use strict';

var version = "1.0.0";

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

module.exports = main;

注意:只有我们实际需要的数据——name 和 devDependencies 和 package.json 中的其它数据被忽略了。这是 tree-shaking 起了作用。

ES6

通常我们需要用高版本的语言来编写代码,Rollup 可以借助 rollup-plugin-babel 插件来完成:

安装插件及 babel

yarn add rollup-plugin-babel -D
yarn add babel-core babel-preset-env babel-preset-es2015 babel-preset-stage-2 -D

配置 rollup

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

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    },
    plugins: [ 
        json(),
        babel({
            exclude: 'node_modules/**' 
        }) 
    ]
};

配置 .babelrc

在项目根目录上增加配置 babel 配置文件:.babelrc

{
    "presets": ["es2015", "stage-2"]
}

这样一来,你就可以编译 ES6 语法了。

总结

Rollup 使用起来非常简单,另外它通过 Tree-shaking 技术去除无用代码,让整个项目更佳的高效,最后它是一个非常好的类库构建工具,如果再借助 Jest 进行单元测试,我们就非常好的开发 JS 类库了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 又见好多纹身年轻孩子! 纹身念想过几次! 当年是有心进到部队的熔炉里,压制住了火苗!最后是怕那玩意血液传播艾滋病,...
    纵情嬉戏天地间阅读 232评论 0 0
  • 今天的课程是陈秋兰老师《第38届指导师培训-寻根、求真、回家》。 参加此次培训等待了很久,看到大家参加指导师培训的...
    真泥阅读 360评论 0 0
  • 第二篇 女王被贬到人间之前失去了所有记忆,但格丽西亚不放心,就让一些可以隐形的女巫跟踪格丽娜尔和她在统治生化星的时...
    李笑然阅读 287评论 0 2
  • 在写这份情绪的时候,思考要给一个怎样的标题呢,想来想去,都觉得太过矫情。扭捏做作一向不是我的风格,自然也不讨人喜欢...
    微笑祝福阅读 421评论 0 0
  • 可以用import string来引入系统的标准string.py, 而用from pkg import stri...
    VIVAFT阅读 703评论 0 0