Use webpack

app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6

 /* eslint-disable no-new, no-param-reassign */
 /* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
-//= require vue
-//= require_tree .
-
+window.Vue = require('vue');
+require('./pipelines_store');
+require('./pipelines_service');
+require('./pipelines_table');
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
  * Merge Request View > Pipelines Tab > Pipelines Table.

app/assets/javascripts/commit/pipelines/pipelines_service.js.es6

@@ -8,18 +8,8 @@
  * Uses Vue.Resource
  */
 class PipelinesService {
-  constructor(root) {
-    Vue.http.options.root = root;
-
-    this.pipelines = Vue.resource(root);
-
-    Vue.http.interceptors.push((request, next) => {
-      // needed in order to not break the tests.
-      if ($.rails) {
-        request.headers['X-CSRF-Token'] = $.rails.csrfToken();
-      }
-      next();
-    });
+  constructor(endpoint) {
+    this.pipelines = Vue.resource(endpoint);
   }
 
   /**
@@ -28,7 +18,7 @@ class PipelinesService {
    *
    * @return {Promise}
    */
-  all() {
+  get() {
     return this.pipelines.get();
   }
 }

app/assets/javascripts/commit/pipelines/pipelines_store.js.es6

@@ -5,25 +5,17 @@
  * Used to store the Pipelines rendered in the commit view in the pipelines table.
  */
 
-(() => {
-  window.gl = window.gl || {};
-  gl.commits = gl.commits || {};
-  gl.commits.pipelines = gl.commits.pipelines || {};
-
-  gl.commits.pipelines.PipelinesStore = {
-    state: {},
-
-    create() {
+class PipelinesStore {
+  constructor() {
+    this.state = {};
     this.state.pipelines = [];
+  }
 
-      return this;
-    },
-
-    store(pipelines = []) {
+  storePipelines(pipelines = []) {
     this.state.pipelines = pipelines;
 
     return pipelines;
-    },
+  }
 
   /**
    * Once the data is received we will start the time ago loops.
@@ -49,6 +41,7 @@
     const startIntervals = () => startTimeLoops();
 
     gl.VueRealtimeListener(removeIntervals, startIntervals);
-    },
-  };
-})();
+  }
+}
+
+return PipelinesStore;

app/assets/javascripts/commit/pipelines/pipelines_table.js.es6

 /* eslint-disable no-new, no-param-reassign */
 /* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
-//= require vue
-//= require vue-resource
-//= require vue_shared/vue_resource_interceptor
-//= require vue_shared/components/pipelines_table
-//= require vue_realtime_listener/index
+window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
+require('../../vue_shared/vue_resource_interceptor');
+require('../../vue_shared/components/pipelines_table');
+require('../vue_realtime_listener/index');
 
 /**
  *
@@ -38,13 +38,10 @@
     data() {
       const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
       const svgsData = document.querySelector('.pipeline-svgs').dataset;
-      const store = gl.commits.pipelines.PipelinesStore.create();
+      const store = new gl.commits.pipelines.PipelinesStore();
 
       // Transform svgs DOMStringMap to a plain Object.
-      const svgsObject = Object.keys(svgsData).reduce((acc, element) => {
-        acc[element] = svgsData[element];
-        return acc;
-      }, {});
+      const svgsObject = gl.utils.DOMStringMapToObject(svgsData);
 
       return {
         endpoint: pipelinesTableData.endpoint,
@@ -71,7 +68,7 @@
       return gl.pipelines.pipelinesService.all()
         .then(response => response.json())
         .then((json) => {
-          this.store.store(json);
+          this.store.storePipelines(json);
           this.store.startTimeAgoLoops.call(this, Vue);
           this.isLoading = false;
         })