A Rollup configuration to help you build modern web applications.
The configuration works extremely well with the libraries lit-html and lit-element. I wanted to share it so you can use it too or build on top of it.
- An extensible
create-rollup-config.jsfor using Rollup with sweet features as for example SCSS imports, Service Worker generation with Workbox, live reloading, coping resources, chunking, treeshaking, Typescript, production minifying and compression with brotli and gzip. - An extensible
create-karma-config.jsto help with your Karma testing setup - A
tsconfig.jsonfile to configure your Typescript - A
tslint.jsonfile to configure your linting - A
typings.d.tsfile to configure your typings - A
.browserslistrcfile to configure how your files are transpiled - A
.gitignorefile you can use as inspiration for your own.gitignorefile rollup-plugin-compress- A Rollup plugin that compresses the files in the bundle after buildingrollup-plugin-copy- A Rollup plugin that copies resources from one location to anotherrollup-plugin-html-template- A Rollup plugin that injects the bundle entry points into a HTML filerollup-plugin-import-styles- A Rollup plugin that makes it possible to import style files using postcssrollup-plugin-live-reload- A Rollup plugin that live reload files as they changesrollup-plugin-minify-lit-html- A Rollup plugin that minifies lit-html templatesrollup-plugin-replace- A Rollup plugin that replaces an import with another importrollup-plugin-workbox- A Rollup plugin that uses workbox to generate a service workerrollup-plugin-budget- A Rollup plugin that compares the sizes of the files to a specified budgetrollup-plugin-clean- A Rollup plugin that clean directories before rebuilding
- ➤ Step 1 - Installation
- ➤ Step 2 - Setup
rollup.config.ts - ➤ Step 3 - Setup
.eslintrc.json - ➤ Step 4 - Setup
tsconfig.json - ➤ Step 5 - Setup
.browserslistrc - ➤ Step 6 - Setup
karma.conf.js - ➤ Step 7 - Add start and build scripts to
package.json - ➤ Step 8 - Setup
prettier.config.js - ➤ How to load stylesheets
- ➤ Contributors
- ➤ License
The fastest way to get started is to use the CLI. Run the following command to setup your project from scratch. If you choose to use the CLI you can skip the rest of the steps in this README file.
$ npm init web-config new <dir>To use it in your project you can install it like this.
$ npm i @appnest/web-config --D
Here's an example on what your Rollup configuration file could look like:
import {resolve, join} from "path";
import pkg from "./package.json";
import {
defaultExternals,
defaultOutputConfig,
defaultPlugins,
defaultProdPlugins,
defaultServePlugins,
isLibrary,
isProd,
isServe
} from "@appnest/web-config";
const folders = {
dist: resolve(__dirname, "dist"),
src: resolve(__dirname, "src/demo"),
src_assets: resolve(__dirname, "src/demo/assets"),
dist_assets: resolve(__dirname, "dist/assets")
};
const files = {
main: join(folders.src, "main.ts"),
src_index: join(folders.src, "index.html"),
dist_index: join(folders.dist, "index.html")
};
export default {
input: {
main: files.main
},
output: [
defaultOutputConfig({
dir: folders.dist,
format: "esm"
})
],
plugins: [
...defaultPlugins({
copyConfig: {
resources: [[folders.src_assets, folders.dist_assets]],
},
cleanerConfig: {
targets: [
folders.dist
]
},
htmlTemplateConfig: {
template: files.src_index,
target: files.dist_index,
include: /main(-.*)?\.js$/
},
importStylesConfig: {
globals: ["main.scss"]
}
}),
// Serve
...(isServe ? [
...defaultServePlugins({
dist: folders.dist
})
] : []),
// Production
...(isProd ? [
...defaultProdPlugins({
dist: folders.dist
})
] : [])
],
treeshake: isProd,
context: "window"
}
{
"extends": "./node_modules/@appnest/web-config/eslint.js"
}
{
"extends": "./node_modules/@appnest/web-config/tsconfig.json"
}
The tools transpiling your code are using browserslist to figure out what is supported. Your .browserslistrc could look like this.
last 2 Chrome versions
last 2 Safari versions
last 2 Firefox versions
const {defaultResolvePlugins, defaultKarmaConfig} = require("@appnest/web-config");
module.exports = (config) => {
config.set({
...defaultKarmaConfig({
rollupPlugins: defaultResolvePlugins()
}),
basePath: "src",
logLevel: config.LOG_INFO
});
};
Here an example on what scripts you could add to your package.json file.
{
...
scripts: {
"b:dev": "rollup -c --environment NODE_ENV:dev",
"b:prod": "rollup -c --environment NODE_ENV:prod",
"s:dev": "rollup -c --watch --environment NODE_ENV:dev",
"s:prod": "rollup -c --watch --environment NODE_ENV:prod",
"s": "npm run s:dev"
...
}
...
}
module.exports = {
...require("../node_modules/@appnest/web-config/rettier.config.js")
};
This is to make Typescript not complaining about SCSS, CSS and JSON imports.
/// <reference path="node_modules/@appnest/web-config/typings.d.ts" />Step 1: Import your stylesheet using the ES6 import syntax
import "./main.scss";Step 2: Include the name of the stylesheet in your Rollup config
export default {
...
defaultPlugins({
...
importStylesConfig: {
globals: ["main.scss"]
},
...
}),
...
}import css from "./my-component.scss";
 |
|
|---|---|
| Andreas Mehlsen | You? |
Licensed under MIT.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent