Update rollup build config for demo deployment ; Updated release action

o0sh4d0w0o · Oct 20, 2023 · cfbc0ac · cfbc0ac
1 parent fd43fda
commit cfbc0ac
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 27 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -45,6 +45,9 @@ jobs:
         with:
           ref: gh-pages
           path: gh-pages
+      - name: Build demo folder for deployment
+        working-directory: base
+        run: npm run deploy
       - name: Copy latest build to gh-pages
         working-directory: gh-pages
         run: |

diff --git a/package.json b/package.json
@@ -8,18 +8,24 @@
         "dev": "rollup -c -w",
         "build": "rollup -c",
         "zip": "cd ./build && zip -r ../build.zip * && cd ..",
-        "release": "npm run build && npm run zip"
+        "release": "npm run build && npm run zip",
+        "deploy": "cross-env MODE=deploy rollup -c"
     },
     "build": {
         "input": {
             "path": {
                 "js": "src/js/svg-path-helper.js",
-                "css": "src/css/svg-path-helper.css"
+                "css": "src/css/svg-path-helper.css",
+                "demoJs": "demo/js/main.js",
+                "demoCss": "demo/css/style.css"
             }
         },
         "output": {
             "name": "svg-path-helper",
-            "path": "build/"
+            "path": "build/",
+            "demoPath": "demo/",
+            "demoJSName": "main",
+            "demoCSSName": "style"
         }
     },
     "repository": {
@@ -37,7 +43,11 @@
         "@babel/preset-env": "^7.23.2",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-terser": "^0.4.4",
+        "cross-env": "^7.0.3",
         "rollup": "^4.1.4",
         "rollup-plugin-postcss": "^4.0.2"
+    },
+    "dependencies": {
+        "@rollup/plugin-replace": "^5.0.4"
     }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,5 +1,6 @@
 import { babel } from "@rollup/plugin-babel";
 import terser from "@rollup/plugin-terser";
+import replace from "@rollup/plugin-replace";
 import postcss from "rollup-plugin-postcss";
 import pkg from "./package.json" assert { type: "json" };
 
@@ -15,47 +16,74 @@ const babelOptions = {
     babelHelpers: "bundled",
 };
 
-const jsInputPath = pkg.build.input.path.js;
-const cssInputPath = pkg.build.input.path.css;
-const outputName = pkg.build.output.name;
-const outputPath = pkg.build.output.path;
+const postcssOptions = { extract: true, minimize: true };
+const deployReplaceOptions = {
+    "../../build": "../build",
+    delimiters: ["", ""],
+    preventAssignment: true,
+};
+
+const isDeploy = process.env.MODE === "deploy";
+const buildProcess = [];
+const deployProcess = [];
+
+if (isDeploy) {
+    const outputCssName = pkg.build.output.demoCSSName;
+    const outputJsName = pkg.build.output.demoJSName;
+    const outputPath = pkg.build.output.demoPath;
+
+    deployProcess.push({
+        input: pkg.build.input.path.demoCss,
+        output: { file: `${outputPath}css/${outputCssName}.css`, format: "esm", banner, name: `${outputCssName}.css` },
+        plugins: [replace(deployReplaceOptions), postcss(postcssOptions)],
+    });
 
-export default [
-    {
+    deployProcess.push({
+        input: pkg.build.input.path.demoJs,
+        external: () => true,
+        output: { file: `${outputPath}js/${outputJsName}.js`, format: "esm", banner, name: `${outputJsName}.js` },
+        plugins: [replace(deployReplaceOptions), terser()],
+    });
+} else {
+    const jsInputPath = pkg.build.input.path.js;
+    const cssInputPath = pkg.build.input.path.css;
+    const outputName = pkg.build.output.name;
+    const outputPath = pkg.build.output.path;
+
+    buildProcess.push({
         input: cssInputPath,
         output: { file: `${outputPath}css/${outputName}.css`, format: "esm", banner, name: `${outputName}.css` },
-        plugins: [postcss({ extract: true, minimize: true })],
-    },
-    {
-        input: jsInputPath,
-        output: [
-            { file: `${outputPath}js/${outputName}.umd.js`, format: "umd", banner, name: `${outputName}.js` },
-            { file: `${outputPath}js/${outputName}.esm.js`, format: "esm", banner, name: `${outputName}.js` },
-        ],
-    },
-    {
+        plugins: [postcss(postcssOptions)],
+    });
+
+    buildProcess.push({
         input: jsInputPath,
         output: [
             { file: `${outputPath}js/${outputName}.umd.js`, format: "umd", banner, name: `${outputName}.js` },
             { file: `${outputPath}js/${outputName}.esm.js`, format: "esm", banner, name: `${outputName}.js` },
         ],
-    },
-    {
+    });
+
+    buildProcess.push({
         input: jsInputPath,
         output: [
             { file: `${outputPath}js/${outputName}.umd.min.js`, format: "umd", banner, name: `${outputName}.js` },
             { file: `${outputPath}js/${outputName}.esm.min.js`, format: "esm", banner, name: `${outputName}.js` },
         ],
         plugins: [terser()],
-    },
-    {
+    });
+
+    buildProcess.push({
         input: jsInputPath,
         output: { file: `${outputPath}js/${outputName}.es5.js`, format: "iife", banner, name: `${outputName}.js` },
         plugins: [babel(babelOptions)],
-    },
-    {
+    });
+
+    buildProcess.push({
         input: jsInputPath,
         output: { file: `${outputPath}js/${outputName}.es5.min.js`, format: "iife", banner, name: `${outputName}.js` },
         plugins: [babel(babelOptions), terser()],
-    },
-];
+    });
+}
+
+export default [...buildProcess, ...deployProcess];