Rollup 是一個(gè) JavaScript 模塊打包器，采用 es6 module 標(biāo)準(zhǔn)，支持 Tree-Shaking、Scope-Hoisting 等優(yōu)化特性，可以有效地減小打包后的代碼體積，使頁(yè)面加載速度更快。

Babel 是一種 JavaScript 編譯器，可以將高版本的 JavaScript 代碼轉(zhuǎn)換成低版本的 JavaScript 代碼，以兼容舊的瀏覽器。在使用 Rollup 進(jìn)行打包時(shí)，我們可以通過 Babel 將 es6 語(yǔ)法轉(zhuǎn)換成 es5 語(yǔ)法，以便打包后的代碼能夠在大部分瀏覽器中運(yùn)行。

Vue 是一款流行的前端框架，支持組件化開發(fā)、響應(yīng)式數(shù)據(jù)綁定、單文件組件等高級(jí)特性，可以讓開發(fā)者更高效地開發(fā) Web 應(yīng)用。在使用 Rollup 打包 Vue 組件時(shí)，我們需要借助 rollup-plugin-vue 插件，以支持單文件組件的解析和打包。

// rollup.config.js
import babel from 'rollup-plugin-babel';
import vue from 'rollup-plugin-vue';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
exclude: 'node_modules/**'
}),
vue({
css: true,
compileTemplate: true
})
]
}

在上面的 rollup.config.js 文件中，我們首先引入了 rollup-plugin-babel 和 rollup-plugin-vue 兩個(gè)插件，分別用于處理 es6 語(yǔ)法和 Vue 單文件組件。在 plugins 字段中，我們分別對(duì)這兩個(gè)插件進(jìn)行了配置。在 babel 中，我們指定了要排除的目錄，即 node_modules，以免將這些庫(kù)中的代碼也進(jìn)行轉(zhuǎn)換。在 vue 中，我們開啟了 css 和 compileTemplate 兩個(gè)選項(xiàng)，以便支持在單文件組件中引入樣式和模板。