美文网首页
Rollup.js学习之配置文件rollup.config.js

Rollup.js学习之配置文件rollup.config.js

作者: yunshengz | 来源:发表于2020-06-30 11:35 被阅读0次

Rollup的配置文件是一个es6模块,对外暴露的是一个对象;在这个对象里可以配置一些需要的选项。

这是一个最基本的配置项,以上项都是必须的

Input:是打包时的入口文件

Output:配置打包后的输出文件

其中:file是出口文件地址,format是生成包的文件格式

通过以上简单的配置就可已在命令行中通过命令rollup -c(rollup --config)即可按以上配置文件来打包。

当然配置文件不仅仅只有以上几项,此外还有以下几种选项。

output中的配置项

1. format:输出的文件可以还可以是amd,umd,cjs,es,iife;
es格式是保存为es模块;iife是生成一个自动执行的函数

2. name:包名,format设置为iife/umd时,需要配置该项;配置后在同一页面上的其他脚本可以通过这个名字访问它

以下是配置format和name的截图和运行结果截图

配置config 执行配置打包生成的文件 在页面上执行stu

3. globals:对象形式的键值对,用于umd/iife包
首先安装jquery:npm i jquery -D
其次配置jquery模块等同于变量$; ↓

配置jquery模块等同于变量

Jquery在代码中的使用↓

Jquery在代码中的使用

运行效果↓

运行效果

4. banner,footer,intro,outro
banner:在打包好的文件外部的顶部插入内容;
footer:在打包好的文件外部的底部插入内容;
intro:在打包好的文件内部的顶部插入内容;
outro:在打包好的文件内部的底部插入内容;

config配置
打包生成的文件展示

5. Sourcemap:为true创建单独的sourcemap文件,为inline,sourcemap作为数据URI附加到生成的output文件中。

配置为true↓

配置为true

生成bundle.js.map↓

生成bundle.js.map

设置为inline,生成文件中带有URI↓

设置为inline,生成文件中带有URI

另外plugins,external和output中的paths放到插件安装配置相关中学习

相关文章

网友评论

      本文标题:Rollup.js学习之配置文件rollup.config.js

      本文链接:https://www.haomeiwen.com/subject/zfntqktx.html