In this section, we describe how to set the extra config for bundling up with rollup in our libraries at Masiv.
When you create a Rollup-based library you must be aware of some extra configurations in the rollup.config.js file for everything to be up and running.
❗Please note that any extra configuration should be added in the 3 objects for the different formats.
First install the following
npm install -g vue-sfc-rollup
Run sfc-init and set your project.
Now you just need to install dependencies.
npm i
To get started with a Rollup library, please follow the guide How to Create and Publish a Vue Component Library.
In order to Rollup fully works with Vue 2 please make sure that:
[ ] You’re using [email protected]
[ ] You need to install the following dev dependencies
npm i @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected]
Learn more about the System library at System.
You should save the **@rollup/plugin-json** as a dev dependency and then import and use it in the rollup config file as follows.
import json from '@rollup/plugin-json';
...
if (!argv.format || argv.format === 'es') {
plugins: [
json(), // Should be first, before any other plugin
...
]
}
// Repeat for plugins inside the config of cjs and iife formats
if (!argv.format || argv.format === 'cjs') {
plugins: [
json(), // Should be first, before any other plugin
vue({
...baseConfig.plugins.vue,
template: {
...baseConfig.plugins.vue.template,
optimizeSSR: false,
},
}),
...
]
}
...
if (!argv.format || argv.format === 'iife') {
plugins: [
json(), // Should be first, before any other plugin
...
]
}