Merge branch 'adopt-es-module-syntax' into 'master'

Adopt ES module syntax

See merge request !9567

101 files changed, 290 insertions, 315 deletions

diff --git a/.eslintrc b/.eslintrc
index aba8112c5a9..73cd7ecf66d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -27,6 +27,7 @@
   },
   "rules": {
     "filenames/match-regex": [2, "^[a-z0-9_]+$"],
+    "import/no-commonjs": "error",
     "no-multiple-empty-lines": ["error", { "max": 1 }],
     "promise/catch-or-return": "error"
   }
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 88eb4251339..e0a6f64dd42 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -6,23 +6,22 @@ import Vue from 'vue';
 import VueResource from 'vue-resource';
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
-
-require('./models/issue');
-require('./models/label');
-require('./models/list');
-require('./models/milestone');
-require('./models/assignee');
-require('./stores/boards_store');
-require('./stores/modal_store');
-require('./services/board_service');
-require('./mixins/modal_mixins');
-require('./mixins/sortable_default_options');
-require('./filters/due_date_filters');
-require('./components/board');
-require('./components/board_sidebar');
-require('./components/new_list_dropdown');
-require('./components/modal/index');
-require('../vue_shared/vue_resource_interceptor');
+import './models/issue';
+import './models/label';
+import './models/list';
+import './models/milestone';
+import './models/assignee';
+import './stores/boards_store';
+import './stores/modal_store';
+import './services/board_service';
+import './mixins/modal_mixins';
+import './mixins/sortable_default_options';
+import './filters/due_date_filters';
+import './components/board';
+import './components/board_sidebar';
+import './components/new_list_dropdown';
+import './components/modal/index';
+import '../vue_shared/vue_resource_interceptor';
 
 Vue.use(VueResource);
 
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 0d23bdeeb99..9ba84489910 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -3,9 +3,7 @@
 import Vue from 'vue';
 import boardList from './board_list';
 import boardBlankState from './board_blank_state';
-
-require('./board_delete');
-require('./board_list');
+import './board_delete';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
index f591134c548..079fb6438b9 100644
--- a/app/assets/javascripts/boards/components/board_card.js
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -1,4 +1,4 @@
-require('./issue_card_inner');
+import './issue_card_inner';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 9e2102eb077..386102032cb 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -7,11 +7,9 @@
 
 import Vue from 'vue';
 import eventHub from '../../sidebar/event_hub';
-
 import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
-
-require('./sidebar/remove_issue');
+import './sidebar/remove_issue';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index ccd270b27da..fe7ab2db85d 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -2,8 +2,7 @@
 /* global Flash */
 
 import Vue from 'vue';
-
-require('./lists_dropdown');
+import './lists_dropdown';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
index e2b3f9ae7e2..31f59d295bf 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import modalFilters from './filters';
-
-require('./tabs');
+import './tabs';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 507f16f3f06..6356c266ee2 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -3,11 +3,10 @@
 import Vue from 'vue';
 import queryData from '../../utils/query_data';
 import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
-
-require('./header');
-require('./list');
-require('./footer');
-require('./empty_state');
+import './header';
+import './list';
+import './footer';
+import './empty_state';
 
 const ModalStore = gl.issueBoards.ModalStore;
 
diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
index 570799c030e..459cdd53f9b 100644
--- a/app/assets/javascripts/copy_as_gfm.js
+++ b/app/assets/javascripts/copy_as_gfm.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this, object-shorthand, no-unused-vars, no-use-before-define, no-new, max-len, no-restricted-syntax, guard-for-in, no-continue */
 
-require('./lib/utils/common_utils');
+import './lib/utils/common_utils';
 
 const gfmRules = {
   // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index c8e53cb554e..44791a93936 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -4,18 +4,16 @@ import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../vue_shared/translate';
 import LimitWarningComponent from './components/limit_warning_component';
-
-require('./components/stage_code_component');
-require('./components/stage_issue_component');
-require('./components/stage_plan_component');
-require('./components/stage_production_component');
-require('./components/stage_review_component');
-require('./components/stage_staging_component');
-require('./components/stage_test_component');
-require('./components/total_time_component');
-require('./cycle_analytics_service');
-require('./cycle_analytics_store');
-require('./default_event_objects');
+import './components/stage_code_component';
+import './components/stage_issue_component';
+import './components/stage_plan_component';
+import './components/stage_production_component';
+import './components/stage_review_component';
+import './components/stage_staging_component';
+import './components/stage_test_component';
+import './components/total_time_component';
+import './cycle_analytics_service';
+import './cycle_analytics_store';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
index 50bd394e90e..991f8c1f6fd 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
-import { __ } from '../locale';
 
-require('../lib/utils/text_utility');
-const DEFAULT_EVENT_OBJECTS = require('./default_event_objects');
+import { __ } from '../locale';
+import '../lib/utils/text_utility';
+import DEFAULT_EVENT_OBJECTS from './default_event_objects';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
diff --git a/app/assets/javascripts/cycle_analytics/default_event_objects.js b/app/assets/javascripts/cycle_analytics/default_event_objects.js
index cfaf9835bf8..57f9019d2f8 100644
--- a/app/assets/javascripts/cycle_analytics/default_event_objects.js
+++ b/app/assets/javascripts/cycle_analytics/default_event_objects.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   issue: {
     created_at: '',
     url: '',
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 5aa3eb46a69..725ec7b9c70 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 
-require('./lib/utils/url_utility');
+import './lib/utils/url_utility';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index fdd27534e0e..a2d33b0936e 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -2,19 +2,18 @@
 /* global ResolveCount */
 
 import Vue from 'vue';
-
-require('./models/discussion');
-require('./models/note');
-require('./stores/comments');
-require('./services/resolve');
-require('./mixins/discussion');
-require('./components/comment_resolve_btn');
-require('./components/jump_to_discussion');
-require('./components/resolve_btn');
-require('./components/resolve_count');
-require('./components/resolve_discussion_btn');
-require('./components/diff_note_avatars');
-require('./components/new_issue_for_discussion');
+import './models/discussion';
+import './models/note';
+import './stores/comments';
+import './services/resolve';
+import './mixins/discussion';
+import './components/comment_resolve_btn';
+import './components/jump_to_discussion';
+import './components/resolve_btn';
+import './components/resolve_count';
+import './components/resolve_discussion_btn';
+import './components/diff_note_avatars';
+import './components/new_issue_for_discussion';
 
 $(() => {
   const projectPath = document.querySelector('.merge-request').dataset.projectPath;
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index ba4f6d36fcb..807ab11d292 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -3,11 +3,7 @@
 /* global CommentsStore */
 
 import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-require('../../vue_shared/vue_resource_interceptor');
-
-Vue.use(VueResource);
+import '../../vue_shared/vue_resource_interceptor';
 
 window.gl = window.gl || {};
 
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 360a1a237f7..a27abee5431 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -34,7 +34,6 @@
 /* global ShortcutsWiki */
 
 import Issue from './issue';
-
 import BindInOut from './behaviors/bind_in_out';
 import DeleteModal from './branches/branches_delete_modal';
 import Group from './group';
@@ -54,8 +53,7 @@ import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
-
-const ShortcutsBlob = require('./shortcuts_blob');
+import ShortcutsBlob from './shortcuts_blob';
 
 (function() {
   var Dispatcher;
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 988c484ed85..266cd3966c6 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, prefer-arrow-callback */
 /* global Dropzone */
 
-require('./preview_markdown');
+import './preview_markdown';
 
 window.DropzoneInput = (function() {
   function DropzoneInput(form) {
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 5e9434fd48f..5d92d29c399 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -1,6 +1,5 @@
 import Filter from '~/droplab/plugins/filter';
-
-require('./filtered_search_dropdown');
+import './filtered_search_dropdown';
 
 class DropdownHint extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, filter) {
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index 982dc4b61be..f20193eecba 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -2,8 +2,7 @@
 
 import Ajax from '~/droplab/plugins/ajax';
 import Filter from '~/droplab/plugins/filter';
-
-require('./filtered_search_dropdown');
+import './filtered_search_dropdown';
 
 class DropdownNonUser extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, filter, endpoint, symbol) {
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 74cec3d75fe..42538780e50 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -1,8 +1,7 @@
 /* global Flash */
 
 import AjaxFilter from '~/droplab/plugins/ajax_filter';
-
-require('./filtered_search_dropdown');
+import './filtered_search_dropdown';
 
 class DropdownUser extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, filter) {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_bundle.js b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
index 856eb6590ee..5d48b8aacb2 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_bundle.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
@@ -1,10 +1,10 @@
-require('./dropdown_hint');
-require('./dropdown_non_user');
-require('./dropdown_user');
-require('./dropdown_utils');
-require('./filtered_search_dropdown_manager');
-require('./filtered_search_dropdown');
-require('./filtered_search_manager');
-require('./filtered_search_token_keys');
-require('./filtered_search_tokenizer');
-require('./filtered_search_visual_tokens');
+import './dropdown_hint';
+import './dropdown_non_user';
+import './dropdown_user';
+import './dropdown_utils';
+import './filtered_search_dropdown_manager';
+import './filtered_search_dropdown';
+import './filtered_search_manager';
+import './filtered_search_token_keys';
+import './filtered_search_tokenizer';
+import './filtered_search_visual_tokens';
diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
index 2808e4b238a..aa513b3aeae 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
@@ -1,4 +1,4 @@
-require('./filtered_search_token_keys');
+import './filtered_search_token_keys';
 
 class FilteredSearchTokenizer {
   static processTokens(input) {
diff --git a/app/assets/javascripts/gl_field_errors.js b/app/assets/javascripts/gl_field_errors.js
index ca3cec07a88..4f226ff96ea 100644
--- a/app/assets/javascripts/gl_field_errors.js
+++ b/app/assets/javascripts/gl_field_errors.js
@@ -1,6 +1,6 @@
 /* eslint-disable comma-dangle, class-methods-use-this, max-len, space-before-function-paren, arrow-parens, no-param-reassign */
 
-require('./gl_field_error');
+import './gl_field_error';
 
 const customValidationFlag = 'gl-field-error-ignore';
 
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 694c6177a07..0860e237ce1 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,11 +1,11 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
- /* global Flash */
-import CreateMergeRequestDropdown from './create_merge_request_dropdown';
+/* global Flash */
 
-require('./flash');
-require('~/lib/utils/text_utility');
-require('vendor/jquery.waitforimages');
-require('./task_list');
+import 'vendor/jquery.waitforimages';
+import '~/lib/utils/text_utility';
+import './flash';
+import './task_list';
+import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 
 class Issue {
   constructor() {
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 82dcbdc26c8..b2f48049bb4 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -1,9 +1,10 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, max-len */
-/* global timeago */
-/* global dateFormat */
 
-window.timeago = require('timeago.js');
-window.dateFormat = require('vendor/date.format');
+import timeago from 'timeago.js';
+import dateFormat from 'vendor/date.format';
+
+window.timeago = timeago;
+window.dateFormat = dateFormat;
 
 (function() {
   (function(w) {
@@ -101,8 +102,7 @@ window.dateFormat = require('vendor/date.format');
     };
 
     w.gl.utils.updateTimeagoText = function(el) {
-      const timeago = gl.utils.getTimeago();
-      const formattedDate = timeago.format(el.getAttribute('datetime'), 'gl_en');
+      const formattedDate = gl.utils.getTimeago().format(el.getAttribute('datetime'), 'gl_en');
 
       if (el.textContent !== formattedDate) {
         el.textContent = formattedDate;
diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js
index bc109a69c20..415e50f32ae 100644
--- a/app/assets/javascripts/lib/utils/http_status.js
+++ b/app/assets/javascripts/lib/utils/http_status.js
@@ -2,9 +2,7 @@
  * exports HTTP status codes
  */
 
-const statusCodes = {
+export default {
   NO_CONTENT: 204,
   OK: 200,
 };
-
-module.exports = statusCodes;
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index fecd531328d..b43c1c3aac6 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, no-empty, max-len, consistent-return, no-unused-vars, no-return-assign, max-len, vars-on-top */
-require('vendor/latinise');
+
+import 'vendor/latinise';
 
 var base;
 var w = window;
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index 517f03d5aba..7400c22543f 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -4,8 +4,6 @@
 //
 // Handles single- and multi-line selection and highlight for blob views.
 //
-require('vendor/jquery.scrollTo');
-
 //
 // ### Example Markup
 //
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 9b9fc31ae93..f0958972130 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -170,7 +170,7 @@ import './visibility_select';
 import './wikis';
 import './zen_mode';
 
-// eslint-disable-next-line global-require
+// eslint-disable-next-line global-require, import/no-commonjs
 if (process.env.NODE_ENV !== 'production') require('./test_utils/');
 
 document.addEventListener('beforeunload', function () {
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
index 15992460146..17030c3e4d3 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@@ -2,14 +2,13 @@
 /* global Flash */
 
 import Vue from 'vue';
-
-require('./merge_conflict_store');
-require('./merge_conflict_service');
-require('./mixins/line_conflict_utils');
-require('./mixins/line_conflict_actions');
-require('./components/diff_file_editor');
-require('./components/inline_conflict_lines');
-require('./components/parallel_conflict_lines');
+import './merge_conflict_store';
+import './merge_conflict_service';
+import './mixins/line_conflict_utils';
+import './mixins/line_conflict_actions';
+import './components/diff_file_editor';
+import './components/inline_conflict_lines';
+import './components/parallel_conflict_lines';
 
 $(() => {
   const INTERACTIVE_RESOLVE_MODE = 'interactive';
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index d1cdcadf87d..f93feeec1c2 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,9 +1,9 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, max-len, prefer-arrow-callback */
 /* global MergeRequestTabs */
 
-require('vendor/jquery.waitforimages');
-require('./task_list');
-require('./merge_request_tabs');
+import 'vendor/jquery.waitforimages';
+import './task_list';
+import './merge_request_tabs';
 
 (function() {
   this.MergeRequest = (function() {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 79293fe2d4a..a981b61f942 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -6,15 +6,17 @@
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
+import autosize from 'vendor/autosize';
+import Dropzone from 'dropzone';
+import 'vendor/jquery.caret'; // required by jquery.atwho
+import 'vendor/jquery.atwho';
 import CommentTypeToggle from './comment_type_toggle';
+import './autosave';
+import './dropzone_input';
+import './task_list';
 
-require('./autosave');
-window.autosize = require('vendor/autosize');
-window.Dropzone = require('dropzone');
-require('./dropzone_input');
-require('vendor/jquery.caret'); // required by jquery.atwho
-require('vendor/jquery.atwho');
-require('./task_list');
+window.autosize = autosize;
+window.Dropzone = Dropzone;
 
 const normalizeNewlines = function(str) {
   return str.replace(/\r\n/g, '\n');
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
index 5f6bc902cf8..0ef20af9260 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -1,5 +1,5 @@
-require('~/lib/utils/common_utils');
-require('~/lib/utils/url_utility');
+import '~/lib/utils/common_utils';
+import '~/lib/utils/url_utility';
 
 (() => {
   const ENDLESS_SCROLL_BOTTOM_PX = 400;
diff --git a/app/assets/javascripts/profile/profile_bundle.js b/app/assets/javascripts/profile/profile_bundle.js
index 15d32825583..ff35a9bcb83 100644
--- a/app/assets/javascripts/profile/profile_bundle.js
+++ b/app/assets/javascripts/profile/profile_bundle.js
@@ -1,2 +1,2 @@
-require('./gl_crop');
-require('./profile');
+import './gl_crop';
+import './profile';
diff --git a/app/assets/javascripts/protected_branches/protected_branches_bundle.js b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
index 849c1e31623..874d70a1431 100644
--- a/app/assets/javascripts/protected_branches/protected_branches_bundle.js
+++ b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
@@ -1,5 +1,5 @@
-require('./protected_branch_access_dropdown');
-require('./protected_branch_create');
-require('./protected_branch_dropdown');
-require('./protected_branch_edit');
-require('./protected_branch_edit_list');
+import './protected_branch_access_dropdown';
+import './protected_branch_create';
+import './protected_branch_dropdown';
+import './protected_branch_edit';
+import './protected_branch_edit_list';
diff --git a/app/assets/javascripts/shortcuts_blob.js b/app/assets/javascripts/shortcuts_blob.js
index bfe90aef71e..ccbf7c59165 100644
--- a/app/assets/javascripts/shortcuts_blob.js
+++ b/app/assets/javascripts/shortcuts_blob.js
@@ -1,14 +1,14 @@
 /* global Mousetrap */
 /* global Shortcuts */
 
-require('./shortcuts');
+import './shortcuts';
 
 const defaults = {
   skipResetBindings: false,
   fileBlobPermalinkUrl: null,
 };
 
-class ShortcutsBlob extends Shortcuts {
+export default class ShortcutsBlob extends Shortcuts {
   constructor(opts) {
     const options = Object.assign({}, defaults, opts);
     super(options.skipResetBindings);
@@ -25,5 +25,3 @@ class ShortcutsBlob extends Shortcuts {
     }
   }
 }
-
-module.exports = ShortcutsBlob;
diff --git a/app/assets/javascripts/shortcuts_find_file.js b/app/assets/javascripts/shortcuts_find_file.js
index a27ac264a5c..b18b6139b35 100644
--- a/app/assets/javascripts/shortcuts_find_file.js
+++ b/app/assets/javascripts/shortcuts_find_file.js
@@ -2,7 +2,7 @@
 /* global Mousetrap */
 /* global ShortcutsNavigation */
 
-require('./shortcuts_navigation');
+import './shortcuts_navigation';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
diff --git a/app/assets/javascripts/shortcuts_issuable.js b/app/assets/javascripts/shortcuts_issuable.js
index fe58e98cee5..b07b3a4d3a5 100644
--- a/app/assets/javascripts/shortcuts_issuable.js
+++ b/app/assets/javascripts/shortcuts_issuable.js
@@ -3,8 +3,8 @@
 /* global ShortcutsNavigation */
 /* global sidebar */
 
-require('mousetrap');
-require('./shortcuts_navigation');
+import 'mousetrap';
+import './shortcuts_navigation';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index c74ab0afd0c..55bae0c08a1 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -1,9 +1,9 @@
 /* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign */
 /* global Mousetrap */
 /* global Shortcuts */
-import findAndFollowLink from './shortcuts_dashboard_navigation';
 
-require('./shortcuts');
+import findAndFollowLink from './shortcuts_dashboard_navigation';
+import './shortcuts';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
diff --git a/app/assets/javascripts/shortcuts_network.js b/app/assets/javascripts/shortcuts_network.js
index 4c2bf8bf001..cc44082efa9 100644
--- a/app/assets/javascripts/shortcuts_network.js
+++ b/app/assets/javascripts/shortcuts_network.js
@@ -2,7 +2,7 @@
 /* global Mousetrap */
 /* global ShortcutsNavigation */
 
-require('./shortcuts_navigation');
+import './shortcuts_navigation';
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index b1402c0a880..3392cb9da29 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,5 +1,6 @@
 /* global Flash */
-require('vendor/task_list');
+
+import 'vendor/task_list';
 
 class TaskList {
   constructor(options = {}) {
diff --git a/app/assets/javascripts/terminal/terminal_bundle.js b/app/assets/javascripts/terminal/terminal_bundle.js
index 13cf3a10a38..134522ef961 100644
--- a/app/assets/javascripts/terminal/terminal_bundle.js
+++ b/app/assets/javascripts/terminal/terminal_bundle.js
@@ -1,7 +1,9 @@
-require('vendor/xterm/encoding-indexes.js');
-require('vendor/xterm/encoding.js');
-window.Terminal = require('vendor/xterm/xterm.js');
-require('vendor/xterm/fit.js');
-require('./terminal.js');
+import 'vendor/xterm/encoding-indexes';
+import 'vendor/xterm/encoding';
+import Terminal from 'vendor/xterm/xterm';
+import 'vendor/xterm/fit';
+import './terminal';
+
+window.Terminal = Terminal;
 
 $(() => new gl.Terminal({ selector: '#terminal' }));
diff --git a/app/assets/javascripts/users/users_bundle.js b/app/assets/javascripts/users/users_bundle.js
index 580e2d84be5..a38ce4eb25e 100644
--- a/app/assets/javascripts/users/users_bundle.js
+++ b/app/assets/javascripts/users/users_bundle.js
@@ -1 +1 @@
-require('./calendar');
+import './calendar';
diff --git a/app/assets/javascripts/version_check_image.js b/app/assets/javascripts/version_check_image.js
index d4f716acb72..88ba991af47 100644
--- a/app/assets/javascripts/version_check_image.js
+++ b/app/assets/javascripts/version_check_image.js
@@ -1,4 +1,4 @@
-class VersionCheckImage {
+export default class VersionCheckImage {
   static bindErrorEvent(imageElement) {
     imageElement.off('error').on('error', () => imageElement.hide());
   }
@@ -6,5 +6,3 @@ class VersionCheckImage {
 
 window.gl = window.gl || {};
 gl.VersionCheckImage = VersionCheckImage;
-
-module.exports = VersionCheckImage;
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index cfd34970f11..f8b3fb748ae 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,4 +1,4 @@
-require('../../lib/utils/text_utility');
+import '../../lib/utils/text_utility';
 
 export default {
   name: 'MRWidgetHeader',
diff --git a/app/assets/javascripts/wikis.js b/app/assets/javascripts/wikis.js
index 75fd1394a03..4194c1bc08d 100644
--- a/app/assets/javascripts/wikis.js
+++ b/app/assets/javascripts/wikis.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
 /* global Breakpoints */
 
-require('./breakpoints');
-require('vendor/jquery.nicescroll');
+import 'vendor/jquery.nicescroll';
+import './breakpoints';
 
 ((global) => {
   class Wikis {
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index ce626cf7b46..b7fe552dec2 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,5 +1,4 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, max-len */
-/* global Dropzone */
 /* global Mousetrap */
 
 // Zen Mode (full screen) textarea
@@ -7,10 +6,12 @@
 /*= provides zen_mode:enter */
 /*= provides zen_mode:leave */
 
-require('vendor/jquery.scrollTo');
-window.Dropzone = require('dropzone');
-require('mousetrap');
-require('mousetrap/plugins/pause/mousetrap-pause');
+import 'vendor/jquery.scrollTo';
+import Dropzone from 'dropzone';
+import 'mousetrap';
+import 'mousetrap/plugins/pause/mousetrap-pause';
+
+window.Dropzone = Dropzone;
 
 //
 // ### Events
diff --git a/spec/javascripts/abuse_reports_spec.js b/spec/javascripts/abuse_reports_spec.js
index 76b370b345b..069d857eab6 100644
--- a/spec/javascripts/abuse_reports_spec.js
+++ b/spec/javascripts/abuse_reports_spec.js
@@ -1,5 +1,5 @@
-require('~/lib/utils/text_utility');
-require('~/abuse_reports');
+import '~/lib/utils/text_utility';
+import '~/abuse_reports';
 
 ((global) => {
   describe('Abuse Reports', () => {
diff --git a/spec/javascripts/activities_spec.js b/spec/javascripts/activities_spec.js
index e6a6fc36ca1..e8c5f721423 100644
--- a/spec/javascripts/activities_spec.js
+++ b/spec/javascripts/activities_spec.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-unused-expressions, no-prototype-builtins, no-new, no-shadow, max-len */
 
-require('vendor/jquery.endless-scroll.js');
-require('~/pager');
-require('~/activities');
+import 'vendor/jquery.endless-scroll';
+import '~/pager';
+import '~/activities';
 
 (() => {
   window.gon || (window.gon = {});
diff --git a/spec/javascripts/ajax_loading_spinner_spec.js b/spec/javascripts/ajax_loading_spinner_spec.js
index a68bccb16f4..1518ae68b0d 100644
--- a/spec/javascripts/ajax_loading_spinner_spec.js
+++ b/spec/javascripts/ajax_loading_spinner_spec.js
@@ -1,7 +1,7 @@
-require('~/extensions/array');
-require('jquery');
-require('jquery-ujs');
-require('~/ajax_loading_spinner');
+import '~/extensions/array';
+import 'jquery';
+import 'jquery-ujs';
+import '~/ajax_loading_spinner';
 
 describe('Ajax Loading Spinner', () => {
   const fixtureTemplate = 'static/ajax_loading_spinner.html.raw';
diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js
index 68ad5f66676..3fc03324d16 100644
--- a/spec/javascripts/awards_handler_spec.js
+++ b/spec/javascripts/awards_handler_spec.js
@@ -3,7 +3,7 @@
 import Cookies from 'js-cookie';
 import AwardsHandler from '~/awards_handler';
 
-require('~/lib/utils/common_utils');
+import '~/lib/utils/common_utils';
 
 (function() {
   var awardsHandler, lazyAssert, urlRoot, openAndWaitForEmojiMenu;
diff --git a/spec/javascripts/behaviors/autosize_spec.js b/spec/javascripts/behaviors/autosize_spec.js
index 3deaf258cae..67afba19190 100644
--- a/spec/javascripts/behaviors/autosize_spec.js
+++ b/spec/javascripts/behaviors/autosize_spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable space-before-function-paren, no-var, comma-dangle, no-return-assign, max-len */
 
-require('~/behaviors/autosize');
+import '~/behaviors/autosize';
 
 (function() {
   describe('Autosize behavior', function() {
diff --git a/spec/javascripts/behaviors/quick_submit_spec.js b/spec/javascripts/behaviors/quick_submit_spec.js
index 4820ce41ade..f56b99f8a16 100644
--- a/spec/javascripts/behaviors/quick_submit_spec.js
+++ b/spec/javascripts/behaviors/quick_submit_spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable space-before-function-paren, no-var, no-return-assign, comma-dangle, jasmine/no-spec-dupes, new-cap, max-len */
 
-require('~/behaviors/quick_submit');
+import '~/behaviors/quick_submit';
 
 (function() {
   describe('Quick Submit behavior', function() {
diff --git a/spec/javascripts/behaviors/requires_input_spec.js b/spec/javascripts/behaviors/requires_input_spec.js
index 3a84013a2ed..f9fa814b801 100644
--- a/spec/javascripts/behaviors/requires_input_spec.js
+++ b/spec/javascripts/behaviors/requires_input_spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable space-before-function-paren, no-var */
 
-require('~/behaviors/requires_input');
+import '~/behaviors/requires_input';
 
 (function() {
   describe('requiresInput', function() {
diff --git a/spec/javascripts/blob/create_branch_dropdown_spec.js b/spec/javascripts/blob/create_branch_dropdown_spec.js
index 9f0d373cb81..6dbaa47c544 100644
--- a/spec/javascripts/blob/create_branch_dropdown_spec.js
+++ b/spec/javascripts/blob/create_branch_dropdown_spec.js
@@ -1,6 +1,6 @@
-require('~/gl_dropdown');
-require('~/blob/create_branch_dropdown');
-require('~/blob/target_branch_dropdown');
+import '~/gl_dropdown';
+import '~/blob/create_branch_dropdown';
+import '~/blob/target_branch_dropdown';
 
 describe('CreateBranchDropdown', () => {
   const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
diff --git a/spec/javascripts/blob/target_branch_dropdown_spec.js b/spec/javascripts/blob/target_branch_dropdown_spec.js
index 76ed3dc1a2d..99c9537d2ec 100644
--- a/spec/javascripts/blob/target_branch_dropdown_spec.js
+++ b/spec/javascripts/blob/target_branch_dropdown_spec.js
@@ -1,6 +1,6 @@
-require('~/gl_dropdown');
-require('~/blob/create_branch_dropdown');
-require('~/blob/target_branch_dropdown');
+import '~/gl_dropdown';
+import '~/blob/create_branch_dropdown';
+import '~/blob/target_branch_dropdown';
 
 describe('TargetBranchDropdown', () => {
   const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
diff --git a/spec/javascripts/boards/board_card_spec.js b/spec/javascripts/boards/board_card_spec.js
index 376e706d1db..447b244c71f 100644
--- a/spec/javascripts/boards/board_card_spec.js
+++ b/spec/javascripts/boards/board_card_spec.js
@@ -8,11 +8,11 @@
 import Vue from 'vue';
 import '~/boards/models/assignee';
 
-require('~/boards/models/list');
-require('~/boards/models/label');
-require('~/boards/stores/boards_store');
-const boardCard = require('~/boards/components/board_card').default;
-require('./mock_data');
+import '~/boards/models/list';
+import '~/boards/models/label';
+import '~/boards/stores/boards_store';
+import boardCard from '~/boards/components/board_card';
+import './mock_data';
 
 describe('Issue card', () => {
   let vm;
diff --git a/spec/javascripts/boards/board_new_issue_spec.js b/spec/javascripts/boards/board_new_issue_spec.js
index 4999933c0c1..45d12e252c4 100644
--- a/spec/javascripts/boards/board_new_issue_spec.js
+++ b/spec/javascripts/boards/board_new_issue_spec.js
@@ -6,8 +6,8 @@
 import Vue from 'vue';
 import boardNewIssue from '~/boards/components/board_new_issue';
 
-require('~/boards/models/list');
-require('./mock_data');
+import '~/boards/models/list';
+import './mock_data';
 
 describe('Issue boards new issue form', () => {
   let vm;
diff --git a/spec/javascripts/commits_spec.js b/spec/javascripts/commits_spec.js
index 05260760c43..187db7485a5 100644
--- a/spec/javascripts/commits_spec.js
+++ b/spec/javascripts/commits_spec.js
@@ -1,8 +1,8 @@
 /* global CommitsList */
 
-require('vendor/jquery.endless-scroll');
-require('~/pager');
-require('~/commits');
+import 'vendor/jquery.endless-scroll';
+import '~/pager';
+import '~/commits';
 
 (() => {
   // TODO: remove this hack!
diff --git a/spec/javascripts/datetime_utility_spec.js b/spec/javascripts/datetime_utility_spec.js
index d5eec10be42..e347c980c78 100644
--- a/spec/javascripts/datetime_utility_spec.js
+++ b/spec/javascripts/datetime_utility_spec.js
@@ -1,4 +1,4 @@
-require('~/lib/utils/datetime_utility');
+import '~/lib/utils/datetime_utility';
 
 (() => {
   describe('Date time utils', () => {
diff --git a/spec/javascripts/diff_comments_store_spec.js b/spec/javascripts/diff_comments_store_spec.js
index 66ece7e4f41..d6fc6b56b82 100644
--- a/spec/javascripts/diff_comments_store_spec.js
+++ b/spec/javascripts/diff_comments_store_spec.js
@@ -1,9 +1,9 @@
 /* eslint-disable jasmine/no-global-setup, dot-notation, jasmine/no-expect-in-setup-teardown, max-len */
 /* global CommentsStore */
 
-require('~/diff_notes/models/discussion');
-require('~/diff_notes/models/note');
-require('~/diff_notes/stores/comments');
+import '~/diff_notes/models/discussion';
+import '~/diff_notes/models/note';
+import '~/diff_notes/stores/comments';
 
 function createDiscussion(noteId = 1, resolved = true) {
   CommentsStore.create({
diff --git a/spec/javascripts/extensions/array_spec.js b/spec/javascripts/extensions/array_spec.js
index 4b871fe967d..b1b81b4efc2 100644
--- a/spec/javascripts/extensions/array_spec.js
+++ b/spec/javascripts/extensions/array_spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable space-before-function-paren, no-var */
 
-require('~/extensions/array');
+import '~/extensions/array';
 
 (function() {
   describe('Array extensions', function() {
diff --git a/spec/javascripts/filtered_search/dropdown_user_spec.js b/spec/javascripts/filtered_search/dropdown_user_spec.js
index 3f92fe4701e..0d8bdf4c8e7 100644
--- a/spec/javascripts/filtered_search/dropdown_user_spec.js
+++ b/spec/javascripts/filtered_search/dropdown_user_spec.js
@@ -1,7 +1,7 @@
-require('~/filtered_search/dropdown_utils');
-require('~/filtered_search/filtered_search_tokenizer');
-require('~/filtered_search/filtered_search_dropdown');
-require('~/filtered_search/dropdown_user');
+import '~/filtered_search/dropdown_utils';
+import '~/filtered_search/filtered_search_tokenizer';
+import '~/filtered_search/filtered_search_dropdown';
+import '~/filtered_search/dropdown_user';
 
 describe('Dropdown User', () => {
   describe('getSearchInput', () => {
diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js b/spec/javascripts/filtered_search/dropdown_utils_spec.js
index c820c955172..a68e315e3e4 100644
--- a/spec/javascripts/filtered_search/dropdown_utils_spec.js
+++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js
@@ -1,7 +1,7 @@
-require('~/extensions/array');
-require('~/filtered_search/dropdown_utils');
-require('~/filtered_search/filtered_search_tokenizer');
-require('~/filtered_search/filtered_search_dropdown_manager');
+import '~/extensions/array';
+import '~/filtered_search/dropdown_utils';
+import '~/filtered_search/filtered_search_tokenizer';
+import '~/filtered_search/filtered_search_dropdown_manager';
 
 describe('Dropdown Utils', () => {
   describe('getEscapedText', () => {
diff --git a/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js
index 17bf8932489..c92a147b937 100644
--- a/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js
@@ -1,7 +1,7 @@
-require('~/extensions/array');
-require('~/filtered_search/filtered_search_visual_tokens');
-require('~/filtered_search/filtered_search_tokenizer');
-require('~/filtered_search/filtered_search_dropdown_manager');
+import '~/extensions/array';
+import '~/filtered_search/filtered_search_visual_tokens';
+import '~/filtered_search/filtered_search_tokenizer';
+import '~/filtered_search/filtered_search_dropdown_manager';
 
 describe('Filtered Search Dropdown Manager', () => {
   describe('addWordToInput', () => {
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 063d547d00c..7c7def3470d 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -1,14 +1,13 @@
 import * as recentSearchesStoreSrc from '~/filtered_search/stores/recent_searches_store';
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesServiceError from '~/filtered_search/services/recent_searches_service_error';
-
-require('~/lib/utils/url_utility');
-require('~/lib/utils/common_utils');
-require('~/filtered_search/filtered_search_token_keys');
-require('~/filtered_search/filtered_search_tokenizer');
-require('~/filtered_search/filtered_search_dropdown_manager');
-require('~/filtered_search/filtered_search_manager');
-const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper');
+import '~/lib/utils/url_utility';
+import '~/lib/utils/common_utils';
+import '~/filtered_search/filtered_search_token_keys';
+import '~/filtered_search/filtered_search_tokenizer';
+import '~/filtered_search/filtered_search_dropdown_manager';
+import '~/filtered_search/filtered_search_manager';
+import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper';
 
 describe('Filtered Search Manager', () => {
   let input;
diff --git a/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js b/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js
index 6f9fa434c35..1a7631994b4 100644
--- a/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js
@@ -1,5 +1,5 @@
-require('~/extensions/array');
-require('~/filtered_search/filtered_search_token_keys');
+import '~/extensions/array';
+import '~/filtered_search/filtered_search_token_keys';
 
 describe('Filtered Search Token Keys', () => {
   describe('get', () => {
diff --git a/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js
index 3e2e577f115..9561580c839 100644
--- a/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js
@@ -1,6 +1,6 @@
-require('~/extensions/array');
-require('~/filtered_search/filtered_search_token_keys');
-require('~/filtered_search/filtered_search_tokenizer');
+import '~/extensions/array';
+import '~/filtered_search/filtered_search_token_keys';
+import '~/filtered_search/filtered_search_tokenizer';
 
 describe('Filtered Search Tokenizer', () => {
   describe('processTokens', () => {
diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
index 8b750561eb7..c5fa2b17106 100644
--- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
@@ -1,7 +1,7 @@
 import AjaxCache from '~/lib/utils/ajax_cache';
 
-require('~/filtered_search/filtered_search_visual_tokens');
-const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper');
+import '~/filtered_search/filtered_search_visual_tokens';
+import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper';
 
 describe('Filtered Search Visual Tokens', () => {
   let tokensContainer;
diff --git a/spec/javascripts/gfm_auto_complete_spec.js b/spec/javascripts/gfm_auto_complete_spec.js
index d0f15c902b5..ad0c7264616 100644
--- a/spec/javascripts/gfm_auto_complete_spec.js
+++ b/spec/javascripts/gfm_auto_complete_spec.js
@@ -2,8 +2,8 @@
 
 import GfmAutoComplete from '~/gfm_auto_complete';
 
-require('vendor/jquery.caret');
-require('vendor/jquery.atwho');
+import 'vendor/jquery.caret';
+import 'vendor/jquery.atwho';
 
 describe('GfmAutoComplete', function () {
   const gfmAutoCompleteCallbacks = GfmAutoComplete.prototype.getDefaultCallbacks.call({
diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js
index 8f90ed69e64..3292590b9ed 100644
--- a/spec/javascripts/gl_dropdown_spec.js
+++ b/spec/javascripts/gl_dropdown_spec.js
@@ -1,8 +1,8 @@
 /* eslint-disable comma-dangle, no-param-reassign, no-unused-expressions, max-len */
 
-require('~/gl_dropdown');
-require('~/lib/utils/common_utils');
-require('~/lib/utils/url_utility');
+import '~/gl_dropdown';
+import '~/lib/utils/common_utils';
+import '~/lib/utils/url_utility';
 
 (() => {
   const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
diff --git a/spec/javascripts/gl_field_errors_spec.js b/spec/javascripts/gl_field_errors_spec.js
index 733023481f5..fa24aa426b6 100644
--- a/spec/javascripts/gl_field_errors_spec.js
+++ b/spec/javascripts/gl_field_errors_spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable space-before-function-paren, arrow-body-style */
 
-require('~/gl_field_errors');
+import '~/gl_field_errors';
 
 ((global) => {
   preloadFixtures('static/gl_field_errors.html.raw');
diff --git a/spec/javascripts/gl_form_spec.js b/spec/javascripts/gl_form_spec.js
index 5ed18d0a76b..837feacec1d 100644
--- a/spec/javascripts/gl_form_spec.js
+++ b/spec/javascripts/gl_form_spec.js
@@ -1,9 +1,9 @@
-/* global autosize */
+import autosize from 'vendor/autosize';
+import '~/gl_form';
+import '~/lib/utils/text_utility';
+import '~/lib/utils/common_utils';
 
-window.autosize = require('vendor/autosize');
-require('~/gl_form');
-require('~/lib/utils/text_utility');
-require('~/lib/utils/common_utils');
+window.autosize = autosize;
 
 describe('GLForm', () => {
   const global = window.gl || (window.gl = {});
@@ -27,7 +27,7 @@ describe('GLForm', () => {
         $.prototype.off.calls.reset();
         $.prototype.on.calls.reset();
         $.prototype.css.calls.reset();
-        autosize.calls.reset();
+        window.autosize.calls.reset();
         done();
       });
     });
@@ -51,7 +51,7 @@ describe('GLForm', () => {
       });
 
       it('should autosize the textarea', () => {
-        expect(autosize).toHaveBeenCalledWith(jasmine.any(Object));
+        expect(window.autosize).toHaveBeenCalledWith(jasmine.any(Object));
       });
 
       it('should set the resize css property to vertical', () => {
@@ -81,7 +81,7 @@ describe('GLForm', () => {
           spyOn($.prototype, 'data');
           spyOn($.prototype, 'outerHeight').and.returnValue(200);
           spyOn(window, 'outerHeight').and.returnValue(400);
-          spyOn(autosize, 'destroy');
+          spyOn(window.autosize, 'destroy');
 
           this.glForm.destroyAutosize();
         });
@@ -95,7 +95,7 @@ describe('GLForm', () => {
         });
 
         it('should call autosize destroy', () => {
-          expect(autosize.destroy).toHaveBeenCalledWith(this.textarea);
+          expect(window.autosize.destroy).toHaveBeenCalledWith(this.textarea);
         });
 
         it('should set the data-height attribute', () => {
@@ -114,9 +114,9 @@ describe('GLForm', () => {
       it('should return undefined if the data-height equals the outerHeight', () => {
         spyOn($.prototype, 'outerHeight').and.returnValue(200);
         spyOn($.prototype, 'data').and.returnValue(200);
-        spyOn(autosize, 'destroy');
+        spyOn(window.autosize, 'destroy');
         expect(this.glForm.destroyAutosize()).toBeUndefined();
-        expect(autosize.destroy).not.toHaveBeenCalled();
+        expect(window.autosize.destroy).not.toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/javascripts/header_spec.js b/spec/javascripts/header_spec.js
index b5dde5525e5..0e01934d3a3 100644
--- a/spec/javascripts/header_spec.js
+++ b/spec/javascripts/header_spec.js
@@ -1,7 +1,7 @@
 /* eslint-disable space-before-function-paren, no-var */
 
-require('~/header');
-require('~/lib/utils/text_utility');
+import '~/header';
+import '~/lib/utils/text_utility';
 
 (function() {
   describe('Header', function() {
diff --git a/spec/javascripts/helpers/class_spec_helper.js b/spec/javascripts/helpers/class_spec_helper.js
index 61db27a8fcc..7a60d33b471 100644
--- a/spec/javascripts/helpers/class_spec_helper.js
+++ b/spec/javascripts/helpers/class_spec_helper.js
@@ -1,4 +1,4 @@
-class ClassSpecHelper {
+export default class ClassSpecHelper {
   static itShouldBeAStaticMethod(base, method) {
     return it('should be a static method', () => {
       expect(Object.prototype.hasOwnProperty.call(base, method)).toBeTruthy();
@@ -7,5 +7,3 @@ class ClassSpecHelper {
 }
 
 window.ClassSpecHelper = ClassSpecHelper;
-
-module.exports = ClassSpecHelper;
diff --git a/spec/javascripts/helpers/class_spec_helper_spec.js b/spec/javascripts/helpers/class_spec_helper_spec.js
index a1cfc8ba820..686b8eaed31 100644
--- a/spec/javascripts/helpers/class_spec_helper_spec.js
+++ b/spec/javascripts/helpers/class_spec_helper_spec.js
@@ -1,6 +1,6 @@
 /* global ClassSpecHelper */
 
-require('./class_spec_helper');
+import './class_spec_helper';
 
 describe('ClassSpecHelper', () => {
   describe('itShouldBeAStaticMethod', function () {
diff --git a/spec/javascripts/helpers/filtered_search_spec_helper.js b/spec/javascripts/helpers/filtered_search_spec_helper.js
index b8d4a93b1ab..0d7092a2357 100644
--- a/spec/javascripts/helpers/filtered_search_spec_helper.js
+++ b/spec/javascripts/helpers/filtered_search_spec_helper.js
@@ -1,4 +1,4 @@
-class FilteredSearchSpecHelper {
+export default class FilteredSearchSpecHelper {
   static createFilterVisualTokenHTML(name, value, isSelected) {
     return FilteredSearchSpecHelper.createFilterVisualToken(name, value, isSelected).outerHTML;
   }
@@ -53,5 +53,3 @@ class FilteredSearchSpecHelper {
     `;
   }
 }
-
-module.exports = FilteredSearchSpecHelper;
diff --git a/spec/javascripts/issuable_spec.js b/spec/javascripts/issuable_spec.js
index 26d87cc5931..49fa2cb8367 100644
--- a/spec/javascripts/issuable_spec.js
+++ b/spec/javascripts/issuable_spec.js
@@ -1,7 +1,7 @@
 /* global Issuable */
 
-require('~/lib/utils/url_utility');
-require('~/issuable');
+import '~/lib/utils/url_utility';
+import '~/issuable';
 
 (() => {
   const BASE_URL = '/user/project/issues?scope=all&state=closed';
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 763f5ee9e50..df97a100b0d 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -1,7 +1,7 @@
 /* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
 import Issue from '~/issue';
 
-require('~/lib/utils/text_utility');
+import '~/lib/utils/text_utility';
 
 describe('Issue', function() {
   let $boxClosed, $boxOpen, $btnClose, $btnReopen;
diff --git a/spec/javascripts/labels_issue_sidebar_spec.js b/spec/javascripts/labels_issue_sidebar_spec.js
index 53aba191b19..c99f379b871 100644
--- a/spec/javascripts/labels_issue_sidebar_spec.js
+++ b/spec/javascripts/labels_issue_sidebar_spec.js
@@ -2,14 +2,14 @@
 /* global IssuableContext */
 /* global LabelsSelect */
 
-require('~/gl_dropdown');
-require('select2');
-require('vendor/jquery.nicescroll');
-require('~/api');
-require('~/create_label');
-require('~/issuable_context');
-require('~/users_select');
-require('~/labels_select');
+import '~/gl_dropdown';
+import 'select2';
+import 'vendor/jquery.nicescroll';
+import '~/api';
+import '~/create_label';
+import '~/issuable_context';
+import '~/users_select';
+import '~/labels_select';
 
 (() => {
   let saveLabelCount = 0;
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 42a9067ade5..e9bffd74d90 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable promise/catch-or-return */
 
-require('~/lib/utils/common_utils');
+import '~/lib/utils/common_utils';
 
 (() => {
   describe('common_utils', () => {
diff --git a/spec/javascripts/lib/utils/text_utility_spec.js b/spec/javascripts/lib/utils/text_utility_spec.js
index daef9b93fa5..ca1b1b7cc3c 100644
--- a/spec/javascripts/lib/utils/text_utility_spec.js
+++ b/spec/javascripts/lib/utils/text_utility_spec.js
@@ -1,4 +1,4 @@
-require('~/lib/utils/text_utility');
+import '~/lib/utils/text_utility';
 
 describe('text_utility', () => {
   describe('gl.text.getTextWidth', () => {
diff --git a/spec/javascripts/line_highlighter_spec.js b/spec/javascripts/line_highlighter_spec.js
index b1b08989028..aee274641e8 100644
--- a/spec/javascripts/line_highlighter_spec.js
+++ b/spec/javascripts/line_highlighter_spec.js
@@ -1,7 +1,7 @@
 /* eslint-disable space-before-function-paren, no-var, no-param-reassign, quotes, prefer-template, no-else-return, new-cap, dot-notation, no-return-assign, comma-dangle, no-new, one-var, one-var-declaration-per-line, jasmine/no-spec-dupes, no-underscore-dangle, max-len */
 /* global LineHighlighter */
 
-require('~/line_highlighter');
+import '~/line_highlighter';
 
 (function() {
   describe('LineHighlighter', function() {
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index fd97dced870..1173fa40947 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -1,7 +1,7 @@
 /* eslint-disable space-before-function-paren, no-return-assign */
 /* global MergeRequest */
 
-require('~/merge_request');
+import '~/merge_request';
 
 (function() {
   describe('MergeRequest', function() {
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 254a41db160..3d1706aab68 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -1,13 +1,13 @@
 /* eslint-disable no-var, comma-dangle, object-shorthand */
 
-require('~/merge_request_tabs');
-require('~/commit/pipelines/pipelines_bundle.js');
-require('~/breakpoints');
-require('~/lib/utils/common_utils');
-require('~/diff');
-require('~/single_file_diff');
-require('~/files_comment_button');
-require('vendor/jquery.scrollTo');
+import '~/merge_request_tabs';
+import '~/commit/pipelines/pipelines_bundle';
+import '~/breakpoints';
+import '~/lib/utils/common_utils';
+import '~/diff';
+import '~/single_file_diff';
+import '~/files_comment_button';
+import 'vendor/jquery.scrollTo';
 
 (function () {
   // TODO: remove this hack!
diff --git a/spec/javascripts/new_branch_spec.js b/spec/javascripts/new_branch_spec.js
index 90a429beeca..c57f44dae17 100644
--- a/spec/javascripts/new_branch_spec.js
+++ b/spec/javascripts/new_branch_spec.js
@@ -1,7 +1,7 @@
 /* eslint-disable space-before-function-paren, one-var, no-var, one-var-declaration-per-line, no-return-assign, quotes, max-len */
 /* global NewBranchForm */
 
-require('~/new_branch_form');
+import '~/new_branch_form';
 
 (function() {
   describe('Branch', function() {
diff --git a/spec/javascripts/pager_spec.js b/spec/javascripts/pager_spec.js
index d966226909b..1d3e1263371 100644
--- a/spec/javascripts/pager_spec.js
+++ b/spec/javascripts/pager_spec.js
@@ -1,6 +1,6 @@
 /* global fixture */
 
-require('~/pager');
+import '~/pager';
 
 describe('pager', () => {
   const Pager = window.Pager;
diff --git a/spec/javascripts/pretty_time_spec.js b/spec/javascripts/pretty_time_spec.js
index a4662cfb557..de99e7e3894 100644
--- a/spec/javascripts/pretty_time_spec.js
+++ b/spec/javascripts/pretty_time_spec.js
@@ -1,4 +1,4 @@
-require('~/lib/utils/pretty_time');
+import '~/lib/utils/pretty_time';
 
 (() => {
   const prettyTime = gl.utils.prettyTime;
diff --git a/spec/javascripts/project_title_spec.js b/spec/javascripts/project_title_spec.js
index 5c51e855401..3dba2e817ff 100644
--- a/spec/javascripts/project_title_spec.js
+++ b/spec/javascripts/project_title_spec.js
@@ -1,11 +1,11 @@
 /* eslint-disable space-before-function-paren, no-unused-expressions, no-return-assign, no-param-reassign, no-var, new-cap, wrap-iife, no-unused-vars, quotes, jasmine/no-expect-in-setup-teardown, max-len */
 /* global Project */
 
-require('select2/select2.js');
-require('~/gl_dropdown');
-require('~/api');
-require('~/project_select');
-require('~/project');
+import 'select2/select2';
+import '~/gl_dropdown';
+import '~/api';
+import '~/project_select';
+import '~/project';
 
 (function() {
   describe('Project Title', function() {
diff --git a/spec/javascripts/search_autocomplete_spec.js b/spec/javascripts/search_autocomplete_spec.js
index fa52a8a0dd2..a53f58b5d0d 100644
--- a/spec/javascripts/search_autocomplete_spec.js
+++ b/spec/javascripts/search_autocomplete_spec.js
@@ -1,9 +1,9 @@
 /* eslint-disable space-before-function-paren, max-len, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign, comma-dangle, object-shorthand, prefer-template, quotes, new-parens, vars-on-top, new-cap, max-len */
 
-require('~/gl_dropdown');
-require('~/search_autocomplete');
-require('~/lib/utils/common_utils');
-require('vendor/fuzzaldrin-plus');
+import '~/gl_dropdown';
+import '~/search_autocomplete';
+import '~/lib/utils/common_utils';
+import 'vendor/fuzzaldrin-plus';
 
 (function() {
   var addBodyAttributes, assertLinks, dashboardIssuesPath, dashboardMRsPath, groupIssuesPath, groupMRsPath, groupName, mockDashboardOptions, mockGroupOptions, mockProjectOptions, projectIssuesPath, projectMRsPath, projectName, userId, widget;
diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js
index 757b8d595a4..3515dfbc60b 100644
--- a/spec/javascripts/shortcuts_issuable_spec.js
+++ b/spec/javascripts/shortcuts_issuable_spec.js
@@ -1,8 +1,8 @@
 /* eslint-disable space-before-function-paren, no-return-assign, no-var, quotes */
 /* global ShortcutsIssuable */
 
-require('~/copy_as_gfm');
-require('~/shortcuts_issuable');
+import '~/copy_as_gfm';
+import '~/shortcuts_issuable';
 
 (function() {
   describe('ShortcutsIssuable', function() {
diff --git a/spec/javascripts/signin_tabs_memoizer_spec.js b/spec/javascripts/signin_tabs_memoizer_spec.js
index 5b4f5933b34..0a32797c3e2 100644
--- a/spec/javascripts/signin_tabs_memoizer_spec.js
+++ b/spec/javascripts/signin_tabs_memoizer_spec.js
@@ -1,6 +1,6 @@
 import AccessorUtilities from '~/lib/utils/accessor';
 
-require('~/signin_tabs_memoizer');
+import '~/signin_tabs_memoizer';
 
 ((global) => {
   describe('SigninTabsMemoizer', () => {
diff --git a/spec/javascripts/smart_interval_spec.js b/spec/javascripts/smart_interval_spec.js
index 4366ec2a5b8..7833bf3fb04 100644
--- a/spec/javascripts/smart_interval_spec.js
+++ b/spec/javascripts/smart_interval_spec.js
@@ -1,4 +1,4 @@
-require('~/smart_interval');
+import '~/smart_interval';
 
 (() => {
   const DEFAULT_MAX_INTERVAL = 100;
diff --git a/spec/javascripts/syntax_highlight_spec.js b/spec/javascripts/syntax_highlight_spec.js
index cea223bd243..946f98379ce 100644
--- a/spec/javascripts/syntax_highlight_spec.js
+++ b/spec/javascripts/syntax_highlight_spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable space-before-function-paren, no-var, no-return-assign, quotes */
 
-require('~/syntax_highlight');
+import '~/syntax_highlight';
 
 (function() {
   describe('Syntax Highlighter', function() {
diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js
index 0464b5d2329..13827a26571 100644
--- a/spec/javascripts/test_bundle.js
+++ b/spec/javascripts/test_bundle.js
@@ -1,13 +1,15 @@
-// enable test fixtures
-require('jasmine-jquery');
+import $ from 'jquery';
+import _ from 'underscore';
+import 'jasmine-jquery';
+import '~/commons';
 
+// enable test fixtures
 jasmine.getFixtures().fixturesPath = '/base/spec/javascripts/fixtures';
 jasmine.getJSONFixtures().fixturesPath = '/base/spec/javascripts/fixtures';
 
-// include common libraries
-require('~/commons/index.js');
-window.$ = window.jQuery = require('jquery');
-window._ = require('underscore');
+// globalize common libraries
+window.$ = window.jQuery = $;
+window._ = _;
 
 // stub expected globals
 window.gl = window.gl || {};
diff --git a/spec/javascripts/todos_spec.js b/spec/javascripts/todos_spec.js
index 66e4fbd6304..cd74aba4a4e 100644
--- a/spec/javascripts/todos_spec.js
+++ b/spec/javascripts/todos_spec.js
@@ -1,5 +1,5 @@
-require('~/todos');
-require('~/lib/utils/common_utils');
+import '~/todos';
+import '~/lib/utils/common_utils';
 
 describe('Todos', () => {
   preloadFixtures('todos/todos.html.raw');
diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js
index af2d02b6b29..a160c86308d 100644
--- a/spec/javascripts/u2f/authenticate_spec.js
+++ b/spec/javascripts/u2f/authenticate_spec.js
@@ -2,11 +2,11 @@
 /* global MockU2FDevice */
 /* global U2FAuthenticate */
 
-require('~/u2f/authenticate');
-require('~/u2f/util');
-require('~/u2f/error');
-require('vendor/u2f');
-require('./mock_u2f_device');
+import '~/u2f/authenticate';
+import '~/u2f/util';
+import '~/u2f/error';
+import 'vendor/u2f';
+import './mock_u2f_device';
 
 (function() {
   describe('U2FAuthenticate', function() {
diff --git a/spec/javascripts/u2f/register_spec.js b/spec/javascripts/u2f/register_spec.js
index 3960759f7cb..a445c80f2af 100644
--- a/spec/javascripts/u2f/register_spec.js
+++ b/spec/javascripts/u2f/register_spec.js
@@ -2,11 +2,11 @@
 /* global MockU2FDevice */
 /* global U2FRegister */
 
-require('~/u2f/register');
-require('~/u2f/util');
-require('~/u2f/error');
-require('vendor/u2f');
-require('./mock_u2f_device');
+import '~/u2f/register';
+import '~/u2f/util';
+import '~/u2f/error';
+import 'vendor/u2f';
+import './mock_u2f_device';
 
 (function() {
   describe('U2FRegister', function() {
diff --git a/spec/javascripts/version_check_image_spec.js b/spec/javascripts/version_check_image_spec.js
index 83ffeca253a..9637bd0414a 100644
--- a/spec/javascripts/version_check_image_spec.js
+++ b/spec/javascripts/version_check_image_spec.js
@@ -1,6 +1,5 @@
-const ClassSpecHelper = require('./helpers/class_spec_helper');
-const VersionCheckImage = require('~/version_check_image');
-require('jquery');
+import VersionCheckImage from '~/version_check_image';
+import ClassSpecHelper from './helpers/class_spec_helper';
 
 describe('VersionCheckImage', function () {
   describe('bindErrorEvent', function () {
diff --git a/spec/javascripts/visibility_select_spec.js b/spec/javascripts/visibility_select_spec.js
index b26ed41f27a..c2eaea7c2ed 100644
--- a/spec/javascripts/visibility_select_spec.js
+++ b/spec/javascripts/visibility_select_spec.js
@@ -1,4 +1,4 @@
-require('~/visibility_select');
+import '~/visibility_select';
 
 (() => {
   const VisibilitySelect = gl.VisibilitySelect;
diff --git a/spec/javascripts/zen_mode_spec.js b/spec/javascripts/zen_mode_spec.js
index 99515f2e5f2..4399c8b2025 100644
--- a/spec/javascripts/zen_mode_spec.js
+++ b/spec/javascripts/zen_mode_spec.js
@@ -3,7 +3,7 @@
 /* global Mousetrap */
 /* global ZenMode */
 
-require('~/zen_mode');
+import '~/zen_mode';
 
 (function() {
   var enterZen, escapeKeydown, exitZen;