rollup快速入门

1. rollup是什么

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。

2. 安装

npm install --global rollup

3. 使用示例

有如下代码,Person.js是独立模块,我们在main.js中使用它。具体代码如下:
/src/Person.js

function Person(){
    var name = 'default';

    function setName(n){
        name = n;
    }

    function getName(){
        return name;
    }

    return{
        setName:setName,
        getName:getName
    }
}

export {Person};

/src/main.js

import {Person} from './Person.js';

var p1 = Person();
p1.setName('ball');
console.log(p1.getName());

3.1 命令行打包方式

rollup src/main.js -o index.js -f iife
  • -f 指定输出文件类型:cjs(nodejs使用), iife(浏览器使用), umd(浏览器与nodejs同时使用)
  • -o 输出文件名

3.2 配置文件方式打包

配置文件rollup.config.js

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

执行:

rollup -c rollup.config.js
  • -c:配置文件名。不指定时,默认使用文件rollup.config.js。

测试:

node index.js 
ball

4. 参考

  • 更多命令行及配置文件参数,参考这里
  • import, export其实是属于es6的范畴,详细参考这里
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值