Rollup是一個(gè)用于打包JavaScript模塊的工具，它可以處理ES6語(yǔ)法及其它高級(jí)特性的模塊，將它們轉(zhuǎn)化成瀏覽器能夠理解的代碼。在使用Vue的時(shí)候，我們可以用Rollup將Vue的源碼打包成瀏覽器可用的版本。

下面是Rollup打包Vue的示例：

// rollup.config.js
import vue from 'rollup-plugin-vue';
import buble from '@rollup/plugin-buble';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
export default {
input: './src/main.js',
output: {
file: './dist/bundle.js',
chunckFileNames: "[name].js",
format: 'iife',
sourcemap: true
},
plugins: [
resolve(),
commonjs(),
vue({
template: { optimizeSSR: true }
}),
buble({
transforms: { dangerousForOf: true }
})
],
onwarn: function (warning, warn) {
if (warning.code === 'CIRCULAR_DEPENDENCY') return;
warn(warning);
},
treeshake: true
}

其中，我們使用了一些插件來(lái)支持Vue：

• rollup-plugin-vue：這個(gè)插件可以將Vue的單文件組件轉(zhuǎn)換成純JavaScript代碼
• @rollup/plugin-buble：這個(gè)插件可以處理一些高級(jí)語(yǔ)法，如箭頭函數(shù)、擴(kuò)展操作符等
• @rollup/plugin-commonjs：這個(gè)插件可以將CommonJS模塊轉(zhuǎn)換成ES6模塊，這樣它們才能被Rollup處理
• @rollup/plugin-node-resolve：這個(gè)插件可以幫助Rollup解析外部依賴

最后，在命令行中執(zhí)行以下命令即可打包Vue：

rollup -c rollup.config.js

通過(guò)以上步驟，我們就可以將Vue的源碼打包成瀏覽器可用的版本，繼而開始編寫Vue應(yīng)用了。