chore(bundles): improve building bundles

berndartmueller · Sep 1, 2020 · a4db77e · a4db77e
1 parent ba5ec5b
commit a4db77e
Show file tree

Hide file tree

Showing 27 changed files with 996 additions and 51 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,3 +6,5 @@ website
 .eslintrc.js
 jest.config.js
 rollup.config.js
+build
+postcss.config.js
diff --git a/.gitattributes b/.gitattributes
@@ -2,4 +2,6 @@ docs/* linguist-documentation
 website/* linguist-documentation
 .eslintrc.js linguist-vendored
 jest.config.js linguist-vendored
+postcss.config.js linguist-vendored
 rollup.config.js linguist-vendored
+build/* linguist-vendored
diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ Virchual uses virtual slides to only render visible slides. No unnecessary DOM e
 Just add a link to the css file in your `<head>`:
 
 ```html
-<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/virchual@next/dist/index.css" />
+<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/virchual@next/dist/virchual.css" />
 ```
 
 Then, before your closing `<body>` tag add:

diff --git a/build/build.js b/build/build.js
@@ -0,0 +1,13 @@
+import typescript from 'rollup-plugin-typescript2';
+
+export default {
+  output: {
+    name: 'Virchual',
+    sourcemap: true,
+  },
+  plugins: [
+    typescript({
+      typescript: require('typescript'),
+    }),
+  ],
+};
diff --git a/build/build.min.js b/build/build.min.js
@@ -0,0 +1,26 @@
+import build from './build';
+import { terser } from 'rollup-plugin-terser';
+import bundleSize from 'rollup-plugin-bundle-size';
+
+export default Object.assign(build, {
+  plugins: build.plugins.concat([
+    terser({
+      compress: {
+        drop_console: true,
+        keep_fargs: false,
+        passes: 2,
+      },
+      keep_fnames: false,
+      ecma: 6,
+      mangle: {
+        properties: {
+          keep_quoted: true,
+          builtins: false,
+          reserved: ['next', 'prev', 'register', 'Virchual'],
+        },
+        toplevel: false,
+      },
+    }),
+    bundleSize(),
+  ]),
+});
diff --git a/build/esm.js b/build/esm.js
@@ -0,0 +1,10 @@
+import pkg from './../package.json';
+import build from './build';
+
+export default Object.assign(build, {
+  input: 'entry/entry-complete.ts',
+  output: Object.assign(build.output, {
+    file: pkg.module,
+    format: 'es',
+  }),
+});
diff --git a/build/esm.modular.js b/build/esm.modular.js
@@ -0,0 +1,10 @@
+import pkg from './../package.json';
+import build from './build';
+
+export default Object.assign(build, {
+  input: 'entry/entry-modular.ts',
+  output: Object.assign(build.output, {
+    file: pkg.module.split('.esm.js')[0] + '.modular.esm.js',
+    format: 'es',
+  }),
+});
diff --git a/build/umd.js b/build/umd.js
@@ -0,0 +1,10 @@
+import pkg from './../package.json';
+import build from './build';
+
+export default Object.assign(build, {
+  input: 'entry/entry-complete.ts',
+  output: Object.assign(build.output, {
+    file: pkg.browser,
+    format: 'umd',
+  }),
+});
diff --git a/build/umd.min.js b/build/umd.min.js
@@ -0,0 +1,10 @@
+import build from './build.min';
+import pkg from './../package.json';
+
+export default Object.assign(build, {
+  input: 'entry/entry-complete.ts',
+  output: Object.assign(build.output, {
+    file: pkg.browser.split('.js')[0] + '.min.js',
+    format: 'umd',
+  }),
+});
diff --git a/entry/entry-complete.ts b/entry/entry-complete.ts
@@ -0,0 +1,12 @@
+import { Virchual as VirchualCore, VirchualSettings } from './../src/virchual';
+import { Controls } from './../src/components/controls';
+import { Lazy } from './../src/components/lazy';
+
+export default class Virchual extends VirchualCore {
+  constructor(public container: HTMLElement, public settings: VirchualSettings = {}) {
+    super(container, settings);
+
+    this.register(Controls, { isEnabled: true });
+    this.register(Lazy, { threshold: 300 });
+  }
+}
diff --git a/entry/entry-modular.ts b/entry/entry-modular.ts
@@ -0,0 +1,8 @@
+import { Virchual } from './../src/virchual';
+
+export { Controls } from './../src/components/controls';
+export { Lazy } from './../src/components/lazy';
+
+export default {
+  Virchual,
+};
diff --git a/examples/src/index.ts b/examples/src/index.ts
@@ -1,7 +1,7 @@
 import { Lazy } from './../../src/components/lazy/lazy';
 import './../../dist/index.css';
 
-import { Virchual, Controls } from './../../src/index';
+import Virchual from './../../src/index';
 
 [].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {
   const instance = new Virchual(slider, {
@@ -33,7 +33,7 @@ import { Virchual, Controls } from './../../src/index';
     },
   });
 
-  instance.register(Controls, { isEnabled: true });
+  // instance.register(Controls, { isEnabled: true });
   instance.register(Lazy, { threshold: 300 });
 
   // instance.mount();