rollupjs 基本试用

备注：

   前端构建工具

 

1. 安装

yarn global add rollup

yarn global add rollup

2. 基本使用

touch index.js

index.js

console.log("this is dalong demo");

// build 

rollup  index.js --o app.js --f [iife| cjs umd]

 

3. 教程

a. es6 支持
main.js  foo.js
main.js

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

foo.js
export default "dalongdemo";

使用
rollup  main.js  --o rong.js --f umd --name "firstdemo"

b. config 支持
rollup.config.js

export default {
  input:"main.js",
  output:{
  file:"app.js",
  format:"umd",
  name:"mydemoapp"
  }
}
使用
rollup -c

c. plugins 使用
yarn add rollup-plugin-json --dev
main.js

import foo from "./foo.js"
import {version} from "./package.json"
export default function(){
 console.log(version,foo);
}

foo.js

export default "dalongdemo";

rollup.config.js 

import json from "rollup-plugin-json";
export default {
  input:"main.js",
  output:{
  file:"app.js",
  format:"umd",
  name:"mydemoapp"
  },
  plugins:[json()]
}
使用
rollup -c

4. 参考文档

https://rollupjs.org/#quick-start