add tree shaking example

sgratzl · May 19, 2020 · 889cfff · 889cfff
1 parent bb822a5
commit 889cfff
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ npm-debug.log*
 
 *.tgz
 /.vscode
+
+/sample_treeshake/build
diff --git a/package.json b/package.json
@@ -79,7 +79,8 @@
     "prepare": "npm run build:dev",
     "prepublishOnly": "npm run build:prod",
     "release": "release-it --disable-metrics --npm.skipChecks",
-    "release:pre": "release-it --disable-metrics --npm.skipChecks --preRelease=alpha --npm.tag=next"
+    "release:pre": "release-it --disable-metrics --npm.skipChecks --preRelease=alpha --npm.tag=next",
+    "sample": "cd sample_treeshake && rollup -c"
   },
   "dependenciesMeta": {
     "chart.js": {

diff --git a/sample_treeshake/babel.config.js b/sample_treeshake/babel.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+  ],
+  env: {
+    test: {
+      presets: [['@babel/preset-env']],
+    },
+  },
+  plugins: ['@babel/plugin-transform-runtime'],
+};
diff --git a/sample_treeshake/index.html b/sample_treeshake/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Box Plot Chart</title>
+  </head>
+  <body>
+    <div id="container" style="width: 75%;">
+      <canvas id="canvas"></canvas>
+    </div>
+    <script src="build/index.js"></script>
+  </body>
+</html>
diff --git a/sample_treeshake/rollup.config.js b/sample_treeshake/rollup.config.js
@@ -0,0 +1,18 @@
+// rollup.config.js
+import pnp from 'rollup-plugin-pnp-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+
+export default [
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'build/index.js',
+      name: 'BoxPlotExample',
+      format: 'umd',
+    },
+    external: [],
+    plugins: [commonjs(), pnp(), resolve(), babel({ babelHelpers: 'runtime' })],
+  },
+];
diff --git a/sample_treeshake/src/index.js b/sample_treeshake/src/index.js
@@ -0,0 +1,17 @@
+import { BoxPlotChart } from '../../src';
+
+new BoxPlotChart(document.getElementById('canvas'), {
+  data: {
+    labels: ['A'],
+    datasets: [
+      {
+        label: 'Test',
+        data: [
+          Array(100)
+            .fill(0)
+            .map(() => Math.random()),
+        ],
+      },
+    ],
+  },
+});
diff --git a/samples/default_esm.html b/samples/default_esm.html
@@ -17,7 +17,6 @@
       }
     </script>
     <script type="module-shim">
-      import Chart from 'chart.js';
       import { BoxPlotChart } from '@sgratzl/chartjs-chart-boxplot';
 
       const chart = new BoxPlotChart(document.getElementById('canvas'), {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@ npm-debug.log*

		*.tgz
		/.vscode

		/sample_treeshake/build