Rollup了解(一)
Rollup Rollup 是什么
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。且Rollup比Webpack更早地使用了Tree Shaking。
这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。
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
【Rollup了解(一)】工程结构
├── 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
Why I use Rollup, and not Webpack
rollup和webpack
rollup-starter-app
rollup-starter-lib
推荐阅读
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 开学第一天（下）
- 一个人的碎碎念
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 遇到一哭二闹三打滚的孩子，怎么办┃山伯教育
- 第326天
- Y房东的后半生14
- 奔向你的城市