rollup 配置

本文详细介绍了如何配置Rollup进行前端项目打包,包括初始化项目、试用Rollup打包、创建配置文件、配置多出口、结合Babel和PostCSS使用、配置压缩插件以及支持TypeScript的步骤。通过实例演示了从安装依赖到编写配置文件的全过程。
摘要由CSDN通过智能技术生成

初始化

安装
npm install --global rollup

使用下面的命令初始化一个项目

mkdir rollup-test
cd rollup-test
npm init
git init

试一试使用 rollup 打包

创建一个 main.js 作为入口文件,写一些代码,例如:

const a = 'remons'
module.export = a;

执行命令

rollup main.js --file bundle.js --format cjs

当然,也可以指定其他模块打包方式

rollup main.js --file bundle.js --format umd --name=remons

配置文件

当然,在实际情况中,很少有人直接在命令行执行打包,通常的解决方案是进行配置

创建配置文件

根目录创建rollup.config.js 文件
package.json 配置命令

"scripts": {
   
  "build": "rollup -c"
},
export default {
   
  input: 'main.js',
  output: {
   
      file: 'cjs/index.js',
      format: 'cjs'
    }
};

执行命令

npm run build

打包完成

配置多出口

通常,我们需要打包多个模块化版本,此时,output 可以是一个数组

output: [
  {
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值