# Building >> Rollup ||20 Rollup configuration to help you get started building modern web applications. You write modern javascript using the latest browser features, rollup will optimize your code for production and ensure it runs on all supported browsers. ## Features - Set HTML or JS as input and/or output - Optimized for browsers which support modules - Optional separate build for legacy browsers - Loads polyfills using feature detection - Generates a service worker - Minifies JS - Minifies lit-html templates ## Automatic setup We recommend the open-wc [project generator](https://open-wc.org/guides/developing-components/getting-started/) for automated setup, for new projects or to upgrade existing projects. ## Manual setup Install the required dependencies:

View

```bash npm i -D rollup @open-wc/building-rollup rimraf deepmerge es-dev-server ```

Create a `rollup.config.js` file:

View

```js import merge from 'deepmerge'; // use createSpaConfig for bundling a Single Page App import { createSpaConfig } from '@open-wc/building-rollup'; // use createBasicConfig to do regular JS to JS bundling // import { createBasicConfig } from '@open-wc/building-rollup'; const baseConfig = createSpaConfig({ // use the outputdir option to modify where files are output // outputDir: 'dist', // if you need to support older browsers, such as IE11, set the legacyBuild // option to generate an additional build just for this browser // legacyBuild: true, // development mode creates a non-minified build for debugging or development developmentMode: process.env.ROLLUP_WATCH === 'true', // set to true to inject the service worker registration into your index.html injectServiceWorker: false, }); export default merge(baseConfig, { // if you use createSpaConfig, you can use your index.html as entrypoint, // any `, ), ], }, }); ```

### Customize polyfills [@open-wc/rollup-plugin-polyills-loader](https://github.com/open-wc/open-wc/tree/master/packages/rollup-plugin-polyfills-loader#readme) loads polyfills only when necessary based on feature detection. You can prevent certain polyfills from being loaded or add your own polyfills.

View example

```js const baseConfig = createSpaConfig({ polyfillsLoader: { polyfills: { webcomponents: false, intersectionObserver: true, resizeObserver: true, custom: [ { name: 'my-feature-polyfill', path: require.resolve('my-feature-polyfill'), test: "!('myFeature' in window)", minify: true, }, ], }, }, }); ```

### Customize built-in babel plugins We add some babel plugins by default. These can be overwritten with a different configuration from the config. For example to change the html template minification, or add other modules to be minified:

View example

```js const baseConfig = createSpaConfig({ babel: { plugins: [ [ require.resolve('babel-plugin-template-html-minifier'), { modules: { 'cool-html': ['html'], }, htmlMinifier: { removeComments: false, }, }, ], ], }, }); ```

## Extending the rollup config A rollup config is just a plain object. It's easy to extend it using javascript. We recommend using the `deepmerge` library because it is an easy way to merge objects and arrays:

View example

```javascript import merge from 'deepmerge'; import { createSpaConfig } from '@open-wc/building-rollup'; const baseConfig = createSpaConfig(); export default merge(baseConfig, { // add your own rollup configuration here input: './index.html', output: { sourcemap: false, }, plugins: [ // add new plugins myPlugin(), ], }); ```

If you have enabled the legacy build option, the `output` option is an array. In that case, you cannot use deepmerge if you need to make changes to the `output` option.

View example

```javascript import merge from 'deepmerge'; import { createSpaConfig } from '@open-wc/building-rollup'; const baseConfig = createSpaConfig({ legacyBuild: true, }); // set the sourcemap option on both outputs baseConfig.output[0].sourcemap = true; baseConfig.output[1].sourcemap = true; export default merge(baseConfig, { input: './index.html', plugins: [ // add new plugins myPlugin(), ], }); ```

#### Copying assets To copy over assets, such as images, css or json files, we recommend using [rollup-plugin-copy](https://www.npmjs.com/package/rollup-plugin-copy)

View example

```js import merge from 'deepmerge'; import { createSpaConfig } from '@open-wc/building-rollup'; import copy from 'rollup-plugin-copy'; const baseConfig = createSpaConfig(); export default merge(baseConfig, { input: './index.html', plugins: [ copy({ targets: [{ src: 'assets/**/*', dest: './dist' }], // set flatten to false to preserve folder structure flatten: false, }), ], }); ```

#### Support for CommonJs modules Rollup only supports standard es modules (using `import` and `export`). A lot of projects don't use this syntax yet, and instead use the CommonJs module format. This format uses `require` and `module.exports` statements, and is intended for NodeJs. To support this in Rollup, you can add the [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs) plugin.

View example

```js import merge from 'deepmerge'; import { createSpaConfig } from '@open-wc/building-rollup'; import commonjs from '@rollup/plugin-commonjs'; const baseConfig = createSpaConfig(); export default merge(baseConfig, { input: './index.html', plugins: [commonjs()], }); ```

#### Support for Typescript

View example

To support Typescript in rollup you have multiple options. You can run `tsc`, and then run rollup on the generated JS files. This is useful when you are already running `tsc` for use in other tools, such as a dev server. You can also use the [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript) plugin to integrate with rollup more directly. View their documentation for more information. ```js import merge from 'deepmerge'; import { createSpaConfig } from '@open-wc/building-rollup'; import typescript from '@rollup/plugin-typescript'; const baseConfig = createSpaConfig(); export default merge(baseConfig, { input: './index.html', plugins: [typescript()], }); ```

	Stars	Issues	Version	Updated	Created
@open-wc/building-rollup	2,007	145	2.2.2	12 days ago	4 years ago
@open-wc/testing			3.1.7	5 months ago	4 years ago
karma-chrome-launcher	461	69	3.1.1	a year ago	10 years ago

@open-wc/building-rollup vs @open-wc/testing vs karma-chrome-launcher

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past