Bundle web components made with LitElement using Rollup, Babel and Broccoli

⚠️ This is an experimental project for learning purposes.

Challenges

• Generate a bundle that can be consumed by legacy browsers.
• Include in the bundle the required transpiled dependencies (node_modules).
• Minify the output.
• Include sourcemaps.
• Generate two bundles for legacy and modern browsers and use <script type="module"> and <script nomodule>.
• Allow to import .css files in components.
• Support dynamic imports.
• Use env variables to serve or build with Broccoli to avoid using BrowserSync when building.

Resources and inspiration

• Eat Your Greens - A Broccoli.js Tutorial
• Polymer 3 WebPack Starter
• LitElement with Rollup, Babel and Karma
• Open WC - building-rollup package - modern-and-legacy-config.js
• rollup-plugin-inline-lit-element
• rollup-plugin-lit-css
• Lit Components
• Aybolit - UI components made with LitElement