add backpack

package.json

@@ -7,6 +7,7 @@
     "@blockly/field-slider": "^2.1.30",
     "@blockly/plugin-scroll-options": "^1.0.4",
     "@blockly/plugin-typed-variable-modal": "^3.1.29",
+    "@blockly/workspace-backpack": "^1.0.12",
     "@blockly/zoom-to-fit": "^2.0.9",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -47,16 +48,11 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": {
-    "production": [
+  "browserslist": 
+    [
       ">0.2%",
       "not dead",
       "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
     ]
-  }
+  
 }

src/components/Blockly/BlocklyWindow.js

@@ -12,6 +12,7 @@ import "./generator/index";
 import { ZoomToFitControl } from "@blockly/zoom-to-fit";
 import { initialXml } from "./initialXml.js";
 import { getMaxInstances } from "./helpers/maxInstances";
+import { Backpack } from "@blockly/workspace-backpack";
 
 class BlocklyWindow extends Component {
   constructor(props) {
@@ -35,6 +36,9 @@ class BlocklyWindow extends Component {
     Blockly.svgResize(workspace);
     const zoomToFit = new ZoomToFitControl(workspace);
     zoomToFit.init();
+    // Initialize plugin.
+    const backpack = new Backpack(workspace);
+    backpack.init();
   }
 
   componentDidUpdate(props) {