Playground: use UMD to load storage as global (#722)

* Playground: use UMD to load storage as global

It appears that `expose-loader` is not compatible with WebPack's UMD
exporter, so the VM playground broke when I converted `scratch-storage`
to use UMD. This change causes the playground to load `scratch-storage`
as an independent script and relies on its UMD loader to expose it as a
global. Bonus points: we get better source mapping this way.

* Playground: tell eslint about global ScratchStorage

src/playground/index.html

@@ -66,7 +66,9 @@
 
     <!-- FPS counter, Syntax highlighter, Blocks, Renderer -->
     <script src="./vendor.js"></script>
-    <!-- VM Worker -->
+    <!-- Storage module -->
+    <script src="./scratch-storage.js"></script>
+    <!-- VM -->
     <script src="./scratch-vm.js"></script>
     <!-- Playground -->
     <script src="./playground.js"></script>

src/playground/playground.js

@@ -46,7 +46,7 @@ window.onload = function () {
     const vm = new window.VirtualMachine();
     Scratch.vm = vm;
 
-    const storage = new Scratch.Storage();
+    const storage = new ScratchStorage(); /* global ScratchStorage */
     const AssetType = storage.AssetType;
     storage.addWebSource([AssetType.Project], getProjectUrl);
     storage.addWebSource([AssetType.ImageVector, AssetType.ImageBitmap, AssetType.Sound], getAssetUrl);

webpack.config.js

@@ -77,9 +77,7 @@ module.exports = [
                 // Audio
                 'scratch-audio',
                 // Renderer
-                'scratch-render',
+                'scratch-render'
-                // Storage
-                'scratch-storage'
             ]
         },
         output: {
@@ -111,10 +109,6 @@ module.exports = [
                 {
                     test: require.resolve('scratch-render'),
                     loader: 'expose-loader?RenderWebGL'
-                },
-                {
-                    test: require.resolve('scratch-storage'),
-                    loader: 'expose-loader?Scratch.Storage'
                 }
             ])
         },
@@ -124,6 +118,8 @@ module.exports = [
                 to: 'media'
             }, {
                 from: 'node_modules/highlightjs/styles/zenburn.css'
+            }, {
+                from: 'node_modules/scratch-storage/dist/web'
             }, {
                 from: 'src/playground'
             }])