Rollup了解(一)

Rollup

Rollup 是什么

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。

且Rollup比Webpack更早地使用了Tree Shaking。

Rollup 与Webpack

Rollup 与 Webpack 在以前是可以称为“库开发用Rollup,应用开发用Webpack”，
鉴于打包工具之间功能插件越来越少，Rollup也支持了HMR，Webpack也支持Tree Shaking.

区别

特性:
rollup 所有资源放同一个地方，一次性加载,利用 tree-shake特性来 剔除未使用的代码，减少冗余
webpack 拆分代码、按需加载 webpack2已经逐渐支持tree-shake
rollup:
1.打包你的 js 文件的时候如果发现你的无用变量，会将其删掉。
2.可以将你的 js 中的代码，编译成你想要的格式：IFE, AMD, CJS, UMD, ESM等
webpack:
1.代码拆分
2.静态资源导入（如 js、css、图片、字体等）
拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码。

基本使用

全局安装

npm install -g rollup

创建工程

mkdir -p my-rollup-project/src
cd my-rollup-project

工程结构

├── dist
│ └── bundle.js
├── package.json
├── readme.md
├── rollup.config.js
└── src
└── index.js

rollup.config.js

export default {
  input: ["./src/index.js"],
  output: {
    file: "./dist/bundle.js",
    format: "umd",
    name: "experience",
  },
};

rollup常用插件

• resolve 插件
• external 属性
• commonjs 插件
• babel
• json

参考

rollup.js 中文文档

一文带你快速上手Rollup

Why I use Rollup, and not Webpack

rollup和webpack

rollup-starter-app

rollup-starter-lib