Build dist into examples dir during local dev

markcellus · Mar 13, 2021 · 6c782fb · 6c782fb
1 parent 47649f3
commit 6c782fb
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 47 deletions.
diff --git a/examples/scroll-to-element.html b/examples/scroll-to-element.html
@@ -53,7 +53,7 @@
 
         <!-- update the path to scroll script below -->
         <script type="module">
-            import { scrollTo, scrollIntoView } from '../dist/scroll.min.js';
+            import { scrollTo, scrollIntoView } from './dist/scroll.min.js';
             const scrollButton = document.getElementById('scroll-btn');
             const greenBox = document.querySelector('.green');
             const pink = document.querySelector('.pink');

diff --git a/examples/vertical-scroll.html b/examples/vertical-scroll.html
@@ -51,7 +51,7 @@
 
         <!-- update the path to scroll script below -->
         <script type="module">
-            import { scrollTo } from '../dist/scroll.min.js';
+            import { scrollTo } from './dist/scroll.min.js';
             const scrollButton = document.getElementById('scroll-btn');
 
             // when the scroll button is clicked, scroll down 2000 pixels

diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "preversion": "npm test",
     "build": "rm -rf dist/* && rollup -c",
     "banner": "banner-cli dist/*.js",
-    "start": "rollup -c --watch",
+    "start": "rm -rf examples/dist/* && rollup -c --watch",
     "lint": "npm run lint:scripts && npm run lint:format",
     "lint:scripts": "eslint '**/*.{js,ts}'",
     "lint:format": "prettier --check '**/*'",

diff --git a/rollup.config.js b/rollup.config.js
@@ -5,50 +5,54 @@ import serve from 'rollup-plugin-serve';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 
-export default [
-    {
-        input: 'src/scroll.ts',
-        output: {
-            format: 'esm',
-            file: 'dist/scroll.js',
+export default function (commandOptions) {
+    const distPath = commandOptions.watch ? 'examples/dist' : 'dist';
+    return [
+        {
+            input: 'src/scroll.ts',
+            output: {
+                format: 'esm',
+                file: `${distPath}/scroll.js`,
+            },
+            plugins: [typescript()],
+            watch: {
+                include: 'src/**',
+            },
         },
-        plugins: [typescript()],
-        watch: {
-            include: 'src/**',
-        },
-    },
-    {
-        input: 'dist/scroll.js',
-        output: {
-            format: 'umd',
-            name: 'Scroll',
-            file: 'dist/scroll.common.js',
-        },
-        plugins: [
-            resolve({ browser: true }),
-            commonjs(),
-            babel({
-                extensions: ['.js'],
-            }),
-        ],
-    },
-    {
-        input: 'dist/scroll.js',
-        output: {
-            format: 'esm',
-            file: 'dist/scroll.min.js',
+        {
+            input: `${distPath}/scroll.js`,
+            output: {
+                format: 'umd',
+                name: 'Scroll',
+                file: `${distPath}/scroll.common.js`,
+            },
+            plugins: [
+                resolve({ browser: true }),
+                commonjs(),
+                babel({
+                    extensions: ['.js'],
+                }),
+            ],
         },
-        plugins: [
-            terser({
-                compress: true,
-                mangle: true,
-            }),
-            process.env.ROLLUP_WATCH &&
-                serve({
-                    historyApiFallback: true,
-                    contentBase: '',
-                    port: 9383,
+        {
+            input: `${distPath}/scroll.js`,
+            output: {
+                format: 'esm',
+                file: `${distPath}/scroll.min.js`,
+            },
+            plugins: [
+                terser({
+                    compress: true,
+                    mangle: true,
                 }),
-        ],
-    },
-];
+                commandOptions.watch &&
+                    serve({
+                        open: true,
+                        historyApiFallback: true,
+                        contentBase: 'examples',
+                        port: 9383,
+                    }),
+            ],
+        },
+    ];
+}