Fix rollup build (#18)

* Declare ES "module" in package.json
* Provide CommonJS output as fall-back
* Declare all dependencies as external to allow tree-shaking by consumers

Author: CarstenWickner

CHANGELOG.MD

@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- declaration of ES module in package.json
+- provide CommonJS output as fall-back
 
 ## [3.0.0] - 2019-10-09
 ### Changed

package.json

@@ -19,6 +19,7 @@
         "prepublishOnly": "rm -rf build && npm run lint && npm run test --bail && npm run build"
     },
     "main": "build/index.js",
+    "module": "build/index.es.js",
     "files": [
         "/build"
     ],
@@ -61,9 +62,9 @@
         "rollup-plugin-babel": "~4.3.3",
         "rollup-plugin-commonjs": "~10.1.0",
         "rollup-plugin-node-resolve": "~5.2.0",
-        "rollup-plugin-peer-deps-external": "~2.2.0",
         "rollup-plugin-postcss": "~2.0.3",
         "rollup-plugin-terser": "~5.1.2",
+        "rollup-plugin-uglify": "~6.0.3",
         "sass-loader": "~8.0.0",
         "style-loader": "~1.0.0",
         "stylelint": "~11.1.1",

rollup.config.js

@@ -1,33 +1,64 @@
 import babel from "rollup-plugin-babel";
 import commonjs from "rollup-plugin-commonjs";
-import external from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
 import resolve from "rollup-plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
+import { uglify } from "rollup-plugin-uglify";
 
 import packageJSON from "./package.json";
 
+const input = "./src/index.js";
+const external = [
+    // ensure peer dependencies are declared as externals
+    ...Object.keys(packageJSON.peerDependencies),
+    // same for actual dependencies, to allow for dependency resolution/de-duplication by consumers
+    ...Object.keys(packageJSON.dependencies)
+];
+const postcssOptions = {
+    extract: false,
+    extensions: [".scss"],
+    minimize: true
+};
+const babelOptions = {
+    exclude: "node_modules/**"
+};
+
 export default [
+    // CommonJS
     {
-        input: "./src/index.js",
+        input,
         output: {
             file: packageJSON.main,
+            format: "cjs"
+        },
+        external,
+        plugins: [
+            // collect styles from SCSS, minimise them and include them in the JS module (i.e. not as separate .css file)
+            postcss(postcssOptions),
+            // transpile for compatibility
+            babel(babelOptions),
+            // resolve dependencies that are ES modules
+            resolve(),
+            // resolve dependencies that are (legacy) CommonJS modules
+            commonjs(),
+            // minify to reduce size
+            uglify()
+        ]
+    },
+    // ES Module
+    {
+        input,
+        output: {
+            file: packageJSON.module,
             format: "es",
             exports: "named"
         },
+        external,
         plugins: [
-            // ensure peer dependencies are declared as externals
-            external(),
             // collect styles from SCSS, minimise them and include them in the JS module (i.e. not as separate .css file)
-            postcss({
-                extract: false,
-                extensions: [".scss"],
-                minimize: true
-            }),
+            postcss(postcssOptions),
             // transpile for compatibility
-            babel({
-                exclude: "node_modules/**"
-            }),
+            babel(babelOptions),
             // resolve dependencies that are ES modules
             resolve(),
             // resolve dependencies that are (legacy) CommonJS modules