rollupjs 基本试用

最新推荐文章于 2025-09-11 10:39:32 发布

weixin_34056162

最新推荐文章于 2025-09-11 10:39:32 发布

阅读量133

点赞数

文章标签： json 前端 ViewUI

本文介绍了前端构建工具Rollup.js的安装与基本使用方法，包括如何通过配置文件进行打包优化，以及如何利用插件增强其功能。通过示例展示了ES6模块导入导出的用法及如何将代码打包成不同格式。

备注：

前端构建工具

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. 参考文档