示例
这些示例涵盖了最常见或有趣的用例，并逐步解释了更复杂的细节。我们的目标是超越简单的入门示例，并展示更广泛适用的概念，以及一些方法的注意事项。
最小化
rollup-plugin-vue 作为零配置解决方案提供，用于打包 .vue 文件。
import vue from 'rollup-plugin-vue'
export default {
input: 'src/MyComponent.vue',
output: {
format: 'esm',
file: 'dist/MyComponent.js'
},
plugins: [
vue()
]
}
源代码：cookbook/minimal
提取 CSS
设置 { css: false } 将 <style> 块转换为导入语句，以便像 rollup-plugin-css-only 这样的样式插件可以提取 .vue 文件中的样式。
import vue from 'rollup-plugin-vue'
import css from 'rollup-plugin-css-only'
export default {
input: 'src/MyComponent.vue',
output: {
format: 'esm',
file: 'dist/MyComponent.js'
},
plugins: [
css(),
vue({ css: false })
]
}
Typescript
import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript'
export default {
input: 'src/MyComponent.vue',
output: {
format: 'esm',
file: 'dist/MyComponent.js'
},
external: ['vue'],
plugins: [
typescript({
tsconfig: false,
experimentalDecorators: true,
module: 'es2015'
}),
vue()
]
}
源代码：cookbook/typescript-simple
SSR
import vue from 'rollup-plugin-vue'
export default {
input: 'src/MyComponent.vue',
output: {
format: 'esm',
file: 'dist/MyComponent.js'
},
plugins: [
vue({ template: { optimizeSSR: true } })
]
}
源代码：cookbook/ssr
组件库
import vue from 'rollup-plugin-vue'
export default [
// ESM build to be used with webpack/rollup.
{
input: 'src/index.js',
output: {
format: 'esm',
file: 'dist/library.esm.js'
},
plugins: [
vue()
]
},
// SSR build.
{
input: 'src/index.js',
output: {
format: 'cjs',
file: 'dist/library.ssr.js'
},
plugins: [
vue({ template: { optimizeSSR: true } })
]
},
// Browser build.
{
input: 'src/wrapper.js',
output: {
format: 'iife',
file: 'dist/library.js'
},
plugins: [
vue()
]
}
]
源代码：cookbook/library