Set up VueJS with Webpack

In order to use ES6 with VueJS, Webpack has been installed as the build tool.
Alias added to Webpack config for Vue -- see [this issue](vuejs-templates/webpack#215).

Compiled ES5 file no longer tracked.

In future, update config so that compiled script does not include Vue and instead load it from CDN.

.gitignore

@@ -56,3 +56,6 @@ typings/
 
 # dotenv environment variables file
 .env
+
+# Compiled ES5 script
+bigmoneyES5.js

README.md

@@ -7,11 +7,11 @@ From the root folder of this repo:
 `http-server .`
 
 ## A note on ES6
-This project uses ES6 and Babel to compile to ES5. Scripts with names ending in 'ES5' are autogenerated by Babel and will be overwritten.
+This project uses ES6, Babel and Webpack to compile to ES5. Scripts with names ending in 'ES5' are autogenerated by Babel and will be overwritten; therefore they are no longer included in version control.
 
 To modify or add scripts:
 - Run `npm install` to install node modules.
 - Create or edit your script `script.js`
-- Run `babel script.js --out-file scriptES5.js`
+- Run `webpack -w` to have Webpack compile in watch mode
 
-Note that Babel may need to be installed globally for the compilation command to work properly.
+Note that Webpack may need to be installed globally for the compilation command to work properly.

bigmoney.js

@@ -1,3 +1,5 @@
+import Vue from "vue";
+
 var stagingURL = "http://bigmoney-staging.bhga6ezash.us-west-2.elasticbeanstalk.com/";
 var localURL = "http://localhost:8000/";
 var endpoint = "api/donations/";
@@ -12,3 +14,11 @@ $.getJSON(localURL+endpoint, queryData)
   .fail((err) => {
     console.log(err);
   });
+
+
+  new Vue({
+    el: '#test',
+    data: {
+      message: "This is a test!",
+    }
+  });

index.html

@@ -49,6 +49,7 @@ <h1>Ban Big Money in B.C. Politics</h1>
           <div class="col-md-10 col-md-offset-1">
             <div class="content-container">
               <div class="secondary-content">
+                <p id="test">{{ message }}</p>
                 <pre id="results"></pre>
               </div>
             </div>
@@ -64,7 +65,6 @@ <h1>Ban Big Money in B.C. Politics</h1>
             <a class="footer-icon" href="https://dogwoodbc.ca"></a>
             <p class="copy">© 2017 Dogwood BC</p>
           </div>
-        </div>
       </div>
     </footer>
   </div>
@@ -75,5 +75,4 @@ <h1>Ban Big Money in B.C. Politics</h1>
 <!-- <script type="text/javascript" src="https://dogwoodbc.ca/wp-content/themes/dogwood/js/main.min.js?ver=1.0"></script> -->
 <script type="text/javascript" src="https://dogwoodbc.ca/wp-content/themes/dogwood/js/jasny-bootstrap.min.js?ver=1.0"></script>
 <script type="text/javascript" src="bigmoneyES5.js"></script>
-
 </html>

package.json

@@ -18,6 +18,13 @@
   "homepage": "https://github.com/DogwoodBC/bigmoney-ui#readme",
   "dependencies": {
     "babel-cli": "^6.24.0",
-    "babel-preset-es2015": "^6.24.0"
+    "babel-preset-es2015": "^6.24.0",
+    "vue": "^2.2.6"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.0",
+    "webpack": "^2.3.2"
   }
 }

webpack.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  entry: './bigmoney',
+  output: {
+    filename: 'bigmoneyES5.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+      query: {
+        presets: ['es2015']
+      }
+    }]
+  },
+  resolve: {
+    alias: {
+      vue: 'vue/dist/vue.js'
+    }
+  }
+};