@appnest/web-config NPM

An extensible create-rollup-config.js for 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.js to help with your Karma testing setup
A tsconfig.json file to configure your Typescript
A tslint.json file to configure your linting
A typings.d.ts file to configure your typings
A .browserslistrc file to configure how your files are transpiled
A .gitignore file you can use as inspiration for your own .gitignore file
rollup-plugin-compress - A Rollup plugin that compresses the files in the bundle after building
rollup-plugin-copy - A Rollup plugin that copies resources from one location to another
rollup-plugin-html-template - A Rollup plugin that injects the bundle entry points into a HTML file
rollup-plugin-import-styles - A Rollup plugin that makes it possible to import style files using postcss
rollup-plugin-live-reload - A Rollup plugin that live reload files as they changes
rollup-plugin-minify-lit-html - A Rollup plugin that minifies lit-html templates
rollup-plugin-replace - A Rollup plugin that replaces an import with another import
rollup-plugin-workbox - A Rollup plugin that uses workbox to generate a service worker
rollup-plugin-budget - A Rollup plugin that compares the sizes of the files to a specified budget
rollup-plugin-clean - A Rollup plugin that clean directories before rebuilding

➤ Table of Contents

➤ Step 1 - Installation

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

➤ Step 2 - Setup `rollup.config.ts`

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"
}

➤ Step 3 - Setup `.eslintrc.json`

{
  "extends": "./node_modules/@appnest/web-config/eslint.js"
}

➤ Step 4 - Setup `tsconfig.json`

{
  "extends": "./node_modules/@appnest/web-config/tsconfig.json"
}

➤ Step 5 - Setup `.browserslistrc`

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

➤ Step 6 - Setup `karma.conf.js`

const {defaultResolvePlugins, defaultKarmaConfig} = require("@appnest/web-config");

module.exports = (config) => {
  config.set({
    ...defaultKarmaConfig({
      rollupPlugins: defaultResolvePlugins()
    }),
    basePath: "src",
    logLevel: config.LOG_INFO
  });
};

➤ Step 7 - Add start and build scripts to `package.json`

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"
    ...
  }
  ...
}

➤ Step 8 - Setup `prettier.config.js`

module.exports = {
   ...require("../node_modules/@appnest/web-config/rettier.config.js")
};

➤ How to load stylesheets

Add the following to your `typings.d.ts` file!

This is to make Typescript not complaining about SCSS, CSS and JSON imports.

/// <reference path="node_modules/@appnest/web-config/typings.d.ts" />

Load a global stylesheet (it will be added to the template file)

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"]
       },
       ...
    }),
  ...
}