Merge pull request #498 from Esri/rollup-tree-shaking

Rollup treeshaking and tslib
Esri · Mar 29, 2019 · f9ad63d · f9ad63d
2 parents 6bd5557 + 6ec7ca3
commit f9ad63d
Show file tree

Hide file tree

Showing 20 changed files with 2,398 additions and 137 deletions.
diff --git a/demos/tree-shaking-rollup/.babelrc b/demos/tree-shaking-rollup/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/env", { "modules": false }]]
+}
diff --git a/demos/tree-shaking-rollup/README.md b/demos/tree-shaking-rollup/README.md
@@ -0,0 +1,9 @@
+# Running this demo
+
+This demo shows how to have rollup [tree shake](https://rollupjs.org/guide/en#tree-shaking) `@esri/rest-js` and only include methods that are actually being called in its output bundle.
+
+1. Make sure you run `npm run bootstrap` in the root folder to setup the dependencies
+1. cd into `/demos/tree-shaking-rollup/`
+1. Run `npm run build`
+
+
diff --git a/demos/tree-shaking/index.html → demos/tree-shaking-rollup/index.html b/demos/tree-shaking/index.html → demos/tree-shaking-rollup/index.html
diff --git a/demos/tree-shaking-rollup/package-lock.json b/demos/tree-shaking-rollup/package-lock.json
diff --git a/demos/tree-shaking-rollup/package.json b/demos/tree-shaking-rollup/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@esri/arcgis-rest-tree-shaking-rollup",
+  "version": "1.19.0",
+  "private": true,
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
+    "babel-loader": "^8.0.5",
+    "rollup": "^1.7.4",
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-babel": "^4.3.2"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-items": "^1.19.0",
+    "@esri/arcgis-rest-request": "^1.19.0"
+  }
+}
diff --git a/demos/tree-shaking-rollup/rollup.config.js b/demos/tree-shaking-rollup/rollup.config.js
@@ -0,0 +1,17 @@
+// rollup.config.js
+import resolve from "rollup-plugin-node-resolve";
+import babel from "rollup-plugin-babel";
+
+export default {
+  input: "src/index.js",
+  output: {
+    file: "dist/bundle.js",
+    format: "iife"
+  },
+  plugins: [
+    resolve(),
+    babel({
+      exclude: "node_modules/**" // only transpile our source code
+    })
+  ]
+};
diff --git a/demos/tree-shaking-rollup/src/index.js b/demos/tree-shaking-rollup/src/index.js
@@ -0,0 +1,8 @@
+import { searchItems } from "@esri/arcgis-rest-items";
+
+let element = document.createElement("div");
+document.body.appendChild(element);
+
+searchItems("water").then(response => {
+  element.innerHTML = JSON.stringify(response); // false
+});
diff --git a/demos/tree-shaking-webpack/README.md b/demos/tree-shaking-webpack/README.md
@@ -0,0 +1,9 @@
+# Running this demo
+
+This demo shows how to have webpack [tree shake](https://rollupjs.org/guide/en#tree-shaking) `@esri/rest-js` and only include methods that are actually being called in its output bundle.
+
+1. Make sure you run `npm run bootstrap` in the root folder to setup the dependencies
+1. cd into `/demos/tree-shaking-webpack/`
+1. Run `npm run build`
+
+
diff --git a/demos/tree-shaking-webpack/index.html b/demos/tree-shaking-webpack/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>shaking the tree</title>
+</head>
+<body>
+  <script src="dist/bundle.js"></script>
+</body>
+</html>
diff --git a/demos/tree-shaking/package-lock.json → demos/tree-shaking-webpack/package-lock.json b/demos/tree-shaking/package-lock.json → demos/tree-shaking-webpack/package-lock.json
diff --git a/demos/tree-shaking/package.json → demos/tree-shaking-webpack/package.json b/demos/tree-shaking/package.json → demos/tree-shaking-webpack/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@esri/arcgis-rest-webpack-demo",
+  "name": "@esri/arcgis-rest-tree-shaking-webpack",
   "version": "1.19.0",
   "private": true,
   "description": "",

diff --git a/demos/tree-shaking/src/index.js → demos/tree-shaking-webpack/src/index.js b/demos/tree-shaking/src/index.js → demos/tree-shaking-webpack/src/index.js
diff --git a/demos/tree-shaking/webpack.config.js → demos/tree-shaking-webpack/webpack.config.js b/demos/tree-shaking/webpack.config.js → demos/tree-shaking-webpack/webpack.config.js
diff --git a/demos/tree-shaking/README.md b/demos/tree-shaking/README.md
diff --git a/demos/vue/package-lock.json b/demos/vue/package-lock.json