Implement frontend dependency management

src/app/static/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

src/app/static/js/index.js

@@ -1,3 +1,8 @@
+import * as ace from 'brace';
+import 'brace/mode/python';
+import 'brace/theme/monokai';
+import * as showdown from 'showdown';
+
 let ws = new WebSocket('ws://' + document.location.host + '/ws');
 
 let converter = new showdown.Converter();

src/app/static/package.json

@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "bootstrap": "4.0.0-beta.2",
+    "brace": "^0.11.0",
+    "jquery": "^3.2.1",
+    "popper.js": "^1.12.3",
+    "showdown": "^1.8.5",
+    "webpack": "^3.10.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "uglifyjs-webpack-plugin": "^1.1.2"
+  }
+}

src/app/static/webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+    entry: './js/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: "babel-loader"
+            }
+        ]
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            jQuery: 'jquery',
+            'window.jQuery': 'jquery',
+            'window.$': 'jquery',
+        }),
+        new UglifyJsPlugin()
+    ]
+};

src/app/templates/index.html

@@ -38,12 +38,6 @@
         </div>
     </div>
 
-    <script src="{{ static_url('vendor/js/jquery-3.2.1.min.js') }}" defer></script>
-    <script src="{{ static_url('vendor/js/popper.min.js') }}" defer></script>
-    <script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script>
-    <script src="{{ static_url('vendor/js/highlight.min.js') }} defer"></script>
-    <script src="{{ static_url('vendor/js/showdown.min.js') }} defer"></script>
-    <script src="{{ static_url('vendor/js/ace/ace.js') }} defer"></script>
-    <script src="{{ static_url('ws_listener.js') }}" defer></script>
+    <script src="{{ static_url('dist/bundle.js') }}" defer></script>
 </body>
 </html>