Use webpack to require files

Changes after review

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

@@ -2,8 +2,6 @@
 /* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
 window.Vue = require('vue');
-require('./pipelines_store');
-require('./pipelines_service');
 require('./pipelines_table');
 /**
  * Commits View > Pipelines Tab > Pipelines Table.

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

@@ -18,7 +18,7 @@ class PipelinesService {
    *
    * @return {Promise}
    */
-  get() {
+  all() {
     return this.pipelines.get();
   }
 }

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

@@ -44,4 +44,7 @@ class PipelinesStore {
   }
 }
 
-return PipelinesStore;
+window.gl = window.gl || {};
+gl.commits = gl.commits || {};
+gl.commits.pipelines = gl.commits.pipelines || {};
+gl.commits.pipelines.PipelinesStore = PipelinesStore;

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

@@ -3,9 +3,12 @@
 
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
+require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
 require('../../vue_shared/components/pipelines_table');
-require('../vue_realtime_listener/index');
+require('../../vue_realtime_listener/index');
+require('./pipelines_service');
+require('./pipelines_store');
 
 /**
  *
@@ -62,10 +65,10 @@ require('../vue_realtime_listener/index');
      *
      */
     created() {
-      gl.pipelines.pipelinesService = new PipelinesService(this.endpoint);
+      const pipelinesService = new gl.commits.pipelines.PipelinesService(this.endpoint);
 
       this.isLoading = true;
-      return gl.pipelines.pipelinesService.all()
+      return pipelinesService.all()
         .then(response => response.json())
         .then((json) => {
           this.store.storePipelines(json);

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -233,6 +233,9 @@
 
     /**
      * Transforms a DOMStringMap into a plain object.
+     *
+     * @param {DOMStringMap} DOMStringMapObject
+     * @returns {Object}
      */
     w.gl.utils.DOMStringMapToObject = DOMStringMapObject => Object.keys(DOMStringMapObject).reduce((acc, element) => {
       acc[element] = DOMStringMapObject[element];

app/assets/javascripts/vue_pipelines_index/index.js.es6

@@ -2,11 +2,11 @@
 /* global Vue, VueResource, gl */
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
+require('../lib/utils/common_utils');
 require('../vue_shared/vue_resource_interceptor');
 require('./pipelines');
 
-$(() => {
-  return new Vue({
+$(() => new Vue({
   el: document.querySelector('.vue-pipelines-index'),
 
   data() {
@@ -14,10 +14,7 @@ $(() => {
     const svgs = document.querySelector('.pipeline-svgs').dataset;
 
     // Transform svgs DOMStringMap to a plain Object.
-      const svgsObject = Object.keys(svgs).reduce((acc, element) => {
-        acc[element] = svgs[element];
-        return acc;
-      }, {});
+    const svgsObject = gl.utils.DOMStringMapToObject(svgs);
 
     return {
       scope: project.dataset.url,
@@ -36,5 +33,4 @@ $(() => {
     >
     </vue-pipelines>
   `,
-  });
-});
+}));

app/assets/javascripts/vue_shared/components/commit.js.es6

 /* global Vue */
 
-window.Vue = require('vue');
-
 (() => {
   window.gl = window.gl || {};
 

app/assets/javascripts/vue_shared/components/pipelines_table.js.es6

 /* eslint-disable no-param-reassign */
 /* global Vue */
 
-window.Vue = require('vue');
 require('./pipelines_table_row');
 /**
  * Pipelines Table Component.

app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6

 /* eslint-disable no-param-reassign */
 /* global Vue */
 
-window.Vue = require('vue');
 require('../../vue_pipelines_index/status');
 require('../../vue_pipelines_index/pipeline_url');
 require('../../vue_pipelines_index/stage');

app/views/projects/commit/_pipelines_list.haml

@@ -22,4 +22,4 @@
 } }
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('commit/pipelines/pipelines_bundle.js')
+  = page_specific_javascript_bundle_tag('commit_pipelines')

app/views/projects/pipelines/index.html.haml

@@ -60,5 +60,4 @@
 
       .vue-pipelines-index
 
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('vue_pipelines_index/index.js')
+= page_specific_javascript_bundle_tag('vue_pipelines')

config/webpack.config.js

@@ -19,6 +19,7 @@ var config = {
     boards:               './boards/boards_bundle.js',
     boards_test:          './boards/test_utils/simulate_drag.js',
     cycle_analytics:      './cycle_analytics/cycle_analytics_bundle.js',
+    commit_pipelines:     './commit/pipelines/pipelines_bundle.js',
     diff_notes:           './diff_notes/diff_notes_bundle.js',
     environments:         './environments/environments_bundle.js',
     filtered_search:      './filtered_search/filtered_search_bundle.js',