build src with rollup

demo/index.js

@@ -0,0 +1,11 @@
+import './styles.css';
+import '../src/index'
+
+document.getElementById('app').innerHTML = `
+<h1>Hello Vanilla!</h1>
+<div>
+  We use the same configuration as Parcel to bundle this sandbox, you can find more
+  info about Parcel
+  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
+</div>
+`;

package.json

@@ -2,15 +2,23 @@
   "name": "vanilla",
   "version": "1.0.0",
   "description": "JavaScript example starter project",
-  "main": "index.html",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.umd.js",
+  "source": "src/index.js",
   "scripts": {
-    "start": "parcel src/index.html --open -d build",
-    "build": "rm -rf build && parcel build src/index.html -d build"
+    "start": "parcel ./demo/index.html --open -d build",
+    "build": "rm -r dist && rollup -c"
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "7.2.0",
-    "parcel-bundler": "^1.6.1"
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.10.4",
+    "@rollup/plugin-babel": "^5.0.4",
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^8.1.0",
+    "parcel-bundler": "^1.6.1",
+    "rollup": "^2.18.2"
   },
   "keywords": [
     "javascript",

rollup.config.js

@@ -0,0 +1,31 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import pkg from './package.json';
+
+export default [
+  {
+    input: pkg.source,
+    output: [
+      { file: pkg.main, format: 'cjs' },
+      { file: pkg.module, format: 'es' },
+      { file: pkg.browser,
+        format: 'umd',
+        name: pkg.name,
+        plugins: [
+          getBabelOutputPlugin({
+            presets: [
+              ["@babel/env", { "modules": false }]
+            ],
+            allowAllFormats: true
+          })
+        ]
+      }
+    ],
+    plugins: [
+      resolve(),
+      commonjs()
+    ],
+    external: []
+  }
+];

src/index.js

@@ -1,10 +1,9 @@
-import "./styles.css";
 
-document.getElementById("app").innerHTML = `
-<h1>Hello Vanilla!</h1>
-<div>
-  We use the same configuration as Parcel to bundle this sandbox, you can find more
-  info about Parcel
-  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
-</div>
-`;
+const a = 1
+
+export default function() {
+  for (let i = 0; i < 8; i++) {
+    console.log('hello world', a);
+  }
+}
+