diff --git a/.babelrc.js b/.babelrc.js
index 693f6f8a3a..277f96ae74 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -10,6 +10,7 @@ module.exports = {
     ]
   ],
   plugins: [
-    process.env.PLUGINS && 'transform-es2015-modules-strip'
+    process.env.PLUGINS && 'transform-es2015-modules-strip',
+    '@babel/proposal-object-rest-spread'
   ].filter(Boolean)
 };
diff --git a/build/rollup.config.js b/build/rollup.config.js
index 44ffac7100..99bf637c0d 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -15,7 +15,8 @@ const plugins = [
     externalHelpersWhitelist: [ // include only required helpers
       'defineProperties',
       'createClass',
-      'inheritsLoose'
+      'inheritsLoose',
+      'extends'
     ]
   })
 ]
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 10ed2203ed..ea443f189f 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -223,7 +223,10 @@ const Carousel = (($) => {
     // private
 
     _getConfig(config) {
-      config = $.extend({}, Default, config)
+      config = {
+        ...Default,
+        ...config
+      }
       Util.typeCheckConfig(NAME, config, DefaultType)
       return config
     }
@@ -428,10 +431,16 @@ const Carousel = (($) => {
     static _jQueryInterface(config) {
       return this.each(function () {
         let data      = $(this).data(DATA_KEY)
-        const _config = $.extend({}, Default, $(this).data())
+        let _config = {
+          ...Default,
+          ...$(this).data()
+        }
 
         if (typeof config === 'object') {
-          $.extend(_config, config)
+          _config = {
+            ..._config,
+            ...config
+          }
         }
 
         const action = typeof config === 'string' ? config : _config.slide
@@ -468,7 +477,10 @@ const Carousel = (($) => {
         return
       }
 
-      const config     = $.extend({}, $(target).data(), $(this).data())
+      const config = {
+        ...$(target).data(),
+        ...$(this).data()
+      }
       const slideIndex = this.getAttribute('data-slide-to')
 
       if (slideIndex) {
diff --git a/js/src/collapse.js b/js/src/collapse.js
index f907aec54d..1456294f43 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -277,7 +277,10 @@ const Collapse = (($) => {
     // private
 
     _getConfig(config) {
-      config = $.extend({}, Default, config)
+      config = {
+        ...Default,
+        ...config
+      }
       config.toggle = Boolean(config.toggle) // coerce string values
       Util.typeCheckConfig(NAME, config, DefaultType)
       return config
@@ -338,12 +341,11 @@ const Collapse = (($) => {
       return this.each(function () {
         const $this   = $(this)
         let data      = $this.data(DATA_KEY)
-        const _config = $.extend(
-          {},
-          Default,
-          $this.data(),
-          typeof config === 'object' && config
-        )
+        const _config = {
+          ...Default,
+          ...$this.data(),
+          ...typeof config === 'object' && config
+        }
 
         if (!data && _config.toggle && /show|hide/.test(config)) {
           _config.toggle = false
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 57ee10ebdd..8affedc6ce 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -210,12 +210,11 @@ const Dropdown = (($) => {
     }
 
     _getConfig(config) {
-      config = $.extend(
-        {},
-        this.constructor.Default,
-        $(this._element).data(),
-        config
-      )
+      config = {
+        ...this.constructor.Default,
+        ...$(this._element).data(),
+        ...config
+      }
 
       Util.typeCheckConfig(
         NAME,
@@ -262,7 +261,10 @@ const Dropdown = (($) => {
       const offsetConf = {}
       if (typeof this._config.offset === 'function') {
         offsetConf.fn = (data) => {
-          data.offsets = $.extend({}, data.offsets, this._config.offset(data.offsets) || {})
+          data.offsets = {
+            ...data.offsets,
+            ...this._config.offset(data.offsets) || {}
+          }
           return data
         }
       } else {
diff --git a/js/src/modal.js b/js/src/modal.js
index 95565aabcc..be3105fa15 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -227,7 +227,10 @@ const Modal = (($) => {
     // private
 
     _getConfig(config) {
-      config = $.extend({}, Default, config)
+      config = {
+        ...Default,
+        ...config
+      }
       Util.typeCheckConfig(NAME, config, DefaultType)
       return config
     }
@@ -506,12 +509,11 @@ const Modal = (($) => {
     static _jQueryInterface(config, relatedTarget) {
       return this.each(function () {
         let data      = $(this).data(DATA_KEY)
-        const _config = $.extend(
-          {},
-          Modal.Default,
-          $(this).data(),
-          typeof config === 'object' && config
-        )
+        const _config = {
+          ...Modal.Default,
+          ...$(this).data(),
+          ...typeof config === 'object' && config
+        }
 
         if (!data) {
           data = new Modal(this, _config)
@@ -547,7 +549,10 @@ const Modal = (($) => {
     }
 
     const config = $(target).data(DATA_KEY) ?
-      'toggle' : $.extend({}, $(target).data(), $(this).data())
+      'toggle' : {
+        ...$(target).data(),
+        ...$(this).data()
+      }
 
     if (this.tagName === 'A' || this.tagName === 'AREA') {
       event.preventDefault()
diff --git a/js/src/popover.js b/js/src/popover.js
index 5534f44412..8beec963a2 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -26,19 +26,25 @@ const Popover = (($) => {
   const CLASS_PREFIX        = 'bs-popover'
   const BSCLS_PREFIX_REGEX  = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 
-  const Default = $.extend({}, Tooltip.Default, {
-    placement : 'right',
-    trigger   : 'click',
-    content   : '',
-    template  : '<div class="popover" role="tooltip">'
-              + '<div class="arrow"></div>'
-              + '<h3 class="popover-header"></h3>'
-              + '<div class="popover-body"></div></div>'
-  })
+  const Default = {
+    ...Tooltip.Default,
+    ...{
+      placement : 'right',
+      trigger   : 'click',
+      content   : '',
+      template  : '<div class="popover" role="tooltip">'
+                + '<div class="arrow"></div>'
+                + '<h3 class="popover-header"></h3>'
+                + '<div class="popover-body"></div></div>'
+    }
+  }
 
-  const DefaultType = $.extend({}, Tooltip.DefaultType, {
-    content : '(string|element|function)'
-  })
+  const DefaultType = {
+    ...Tooltip.DefaultType,
+    ...{
+      content : '(string|element|function)'
+    }
+  }
 
   const ClassName = {
     FADE : 'fade',
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 3a13d954ac..fd5197e383 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -171,7 +171,10 @@ const ScrollSpy = (($) => {
     // private
 
     _getConfig(config) {
-      config = $.extend({}, Default, config)
+      config = {
+        ...Default,
+        ...config
+      }
 
       if (typeof config.target !== 'string') {
         let id = $(config.target).attr('id')
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 7cefd0be6a..002dea4298 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -501,10 +501,13 @@ const Tooltip = (($) => {
       })
 
       if (this.config.selector) {
-        this.config = $.extend({}, this.config, {
-          trigger  : 'manual',
-          selector : ''
-        })
+        this.config = {
+          ...this.config,
+          ...{
+            trigger  : 'manual',
+            selector : ''
+          }
+        }
       } else {
         this._fixTitle()
       }
@@ -613,12 +616,11 @@ const Tooltip = (($) => {
     }
 
     _getConfig(config) {
-      config = $.extend(
-        {},
-        this.constructor.Default,
-        $(this.element).data(),
-        config
-      )
+      config = {
+        ...this.constructor.Default,
+        ...$(this.element).data(),
+        ...config
+      }
 
       if (typeof config.delay === 'number') {
         config.delay = {