rolluprollup和webpack的区别 Rollup也是一款ESModule打包器，可以将项目中的细小模块打包成

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

rollup

rollup和webpack的区别

Rollup也是一款ESModule打包器，可以将项目中的细小模块打包成整块代码，使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境。Rollup与Webpack作用非常类似，不过Rollup更为小巧。webpack结合插件可以完成前端工程化的绝大多数工作，而Rollup仅仅是一款ESM打包器，没有其他功能，例如Rollup中并不支持类似HMR这种高级特性。Rollup并不是要与Webpack全面竞争，而是提供一个充分利用ESM各项特性的高效打包器。

rollup最大的优势

tree-shaking

Rollup 还可以对所用的代码进行静态分析，并将未实际用到的代码剔除。这一特性将允许你放心的使用已有的工具和模块来创建应用而无需担心存在冗余的依赖和代码。

rollup的使用

Rollup 可以通过两种方式使用：使用命令行方式，可以为命令行传入一个可选的配置文件。或者使用 JavaScript API 方式。运行 rollup --help 可以查看可用的选项和参数。

用于浏览器：

# 编译为一个在 <script> 标签中可用的自运行函数 ('iife')
rollup main.js --file bundle.js --format iife

用于 Node.js：

# 编译为 CommonJS 模块 ('cjs')
rollup main.js --file bundle.js --format cjs

同时用于浏览器和 Node.js：

# 需要为 UMD 格式的包指定一个名称
rollup main.js --file bundle.js --format umd --name "myBundle"

rollup插件

Rollup自身的功能就是对ESM进行合并打包，如果需要更高级的功能，如加载其他类型资源模块，导入CommonJS模块，编译ES新特性，Rollup支持使用插件的方式扩展实现，插件是Rollup唯一的扩展方式。

通过导入json文件学习如何使用Rollup插件。

安装插件 rollup-plugin-json, 运行：yarn add rollup-plugin-json --dev

配置rollup.config.js

import json from 'rollup-plugin-json'

export default {
  input: './src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json()
  ]
}

rollup 加载npm依赖

Rollup不能像webpack那样通过模块名称加载npm模块，为了抹平差异，Rollup官方提供了一个插件 rollup-plugin-node-resolve，通过这个插件，就可以在代码中使用模块名称导入模块。

安装插件：yarn add rollup-plugin-node-resolve --dev