rollup和webpack使用场景分析

简介

Rollup官方解析：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序

webpack官方解析：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

应用场景对比

使用Rollup的开源项目：

• vue
• vuex
• vue-router

使用webpack的项目：

• 饿了么UI
• mint-ui
• vue脚手架项目

从上面使用场景可以大概分析出，Rollup偏向应用于js库，webpack偏向应用于前端工程，UI库；如果你的应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。如果你的场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack。

Rollup入门

实现模块解析

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

// src/foo.js
export default 'hello world!';

// 执行命令 -o表示输出bundle.js文件 -f cjs表示使用commonjs标准输出
rollup src/main.js -o bundle.js -f cjs

// 输出bundle.js内容
'use strict';

var foo = 'hello world!';

var main = function () {
  console.log(foo);
};

module.exports = main;