Rollup.js打包工具(支持typescript)无坑教程

Rollup.js


    JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序

    比webpack要轻量许多,用于弥补gulp的无tree-shaking是很好的选择,最大的用途是打包生产一个库文件

    打出来的包干净,没有其他冗余代码

安装


npm install --global rollup

安装成功后,运行 rollup,若打印出使用说明则安装成功

常用命令


rollup [待打包文件路径] -f [指定格式]

例 rollup src/main.js -f cjs

-f 选项(--output.format 的缩写)指定了所创建 bundle 的类型

bundle类型 --amd(异步模块定义),cjs(commonjs),es(将软件包保存为es模块文件),iife(适合作为<script>标签),umd(以amd、cjs、iife为一体)

rollup [待打包文件路径] -o [包文件路径] -f [指定格式]

例 rollup src/main.js -o

      bundle.js -f cjs

配置文件


简单命令

在项目中创建一个名为rollup.config.js的文件,增加如下代码

    export default 

            { 

                input: 'src/main.js',

                 output: { 

                                file: 'bundle.js', 

                                format: 'cjs' 

                            }

             }

使用 rollup -c 或 rollup --config ,自动寻找      rollup.config.js配置文件

同样的命令行选项会覆盖配置文件中的选项

可指定其他配置文件

rollup --config rollup.config.dev.js

具体配置项

input

入口文件路径

output--{} or [{}]

file--string

输出文件

format--string

输出格式--amd/ es6 / iife / umd / cjs

name--string

当format为iife和umd时必须提供,将作为全局变量挂在window(浏览器环境)下:若name:"A"则window.A=...

sourcemap--boolean

生成bundle.map.js文件,方便调试

plugins--string[]

插件配置,常用插件列表参考下文

external--string[]

告诉rollup不要将指定的包打包,而作为外部依赖

global--{}

例 {'jquery':'$' } //告诉rollup全局变量$即是jquery

插件


通过相对路径,将一个入口文件和一个模块创建成了一个简单的 bundle。随着构建更复杂的 bundle,通常需要更大的灵活性——引入 npm 安装的模块、通过      Babel 编译代码、和      JSON 文件打交道等。

常用插件

rollup-plugin-json

    从json文件中读取数据

rollup-plugin-node-resolve

    识别node_modules中的包

rollup-plugin-commonjs

     将commonjs模块转换为es6

     node_modules中的包大部分都是commonjs格式的,要在rollup中使用必须先转为ES6语法

rollup-plugin-babel

rollup-plugin-typescript2

    打包typescript项目

    注意有坑--网上教程大多数写的使用rollup-plugin-typescript,但rollup-plugin-typescript使用后存在各种问题

rollup-plugin-replace

    替换待打包文件里的一些变量

rollup-plugin-uglify

    压缩包

    只支持es5

    不支持es6 +

rollup-plugin-terser

    压缩包

    支持es6+

package.json

    scripts

        "build": "rollup -c"  //配置指定的rollup执行命令

        运行 npm run build,不用每次输入一长串rollup命令

rollup.watch

    Rollup 提供了 rollup.watch 函数,当它检测到磁盘上单个模块已经改变,它会重新构建你的文件束。 当你通过命令行运行 Rollup,并带上 --watch 标记时,此函数会被内部使用

    使用

        命令行 rollup -c --watch

        package.json 中配置scripts

参考文档

https://www.rollupjs.com/rollup.js中文网

https://www.rollupjs.org/guide/en/官网

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