rollup 编译 .vue
在Vue.js的生态系统中，.vue文件是最常用的文件扩展名之一。.vue文件作为一个单文件组件的构成部分，包含了该组件的所有相关代码，包括HTML模板，JavaScript逻辑和CSS样式。
在开发大型项目时，为了提高代码的可读性和可维护性，可能需要使用类似于webpack或者rollup这样的打包工具进行编译。当使用rollup进行编译时，需要安装以下几个依赖包：
npm install --save-dev rollup rollup-plugin-vue rollup-plugin-babel @babel/core @babel/preset-env
其中，rollup是打包工具本身，rollup-plugin-vue和rollup-plugin-babel则提供了针对.vue文件和babel的插件。
安装好依赖包后，在项目的根目录下创建rollup.config.js文件，用于配置rollup打包的细节：
import vue from 'rollup-plugin-vue'
import babel from 'rollup-plugin-babel'
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [
vue(),
babel({
exclude: 'node_modules/**'
})
]
}
其中，input指定了入口文件路径，output则指定了打包输出的文件路径和格式。同时，插件的使用顺序是精致的：由于.rollup-plugin-babel生成的ES5代码不能直接输入.rollup-plugin-vue，因此必须首先将所有代码转换为ES5代码。
最后，执行以下命令即可对.vue文件进行编译：
rollup -c rollup.config.js