Merge b2b31dc into 2b1b327

CHANGES.md

@@ -1,5 +1,13 @@
 # videojs-wavesurfer changelog
 
+
+## 4.0.0 - unreleased
+
+- Fixed webpack externals configuration: it's no longer needed to use additional webpack
+  configuration in React/Angular projects (#109)
+- Bump required wavesurfer.js version to 4.0.1 or newer
+
+
 ## 3.2.0 - 2020/05/19
 
 **Backwards-incompatible changes** (when upgrading from a previous version):

build-config/fragments/common.js

@@ -49,11 +49,22 @@ module.exports = {
     },
     // specify dependencies for the library that are not resolved by webpack,
     // but become dependencies of the output: they are imported from the
-    // environment during runtime.
-    externals: [
-        {'video.js': 'videojs'},
-        {'wavesurfer.js': 'WaveSurfer'}
-    ],
+    // environment during runtime and never directly included in the
+    // videojs-record library.
+    externals: {
+        'video.js': {
+            commonjs: 'video.js',
+            commonjs2: 'video.js',
+            amd: 'video.js',
+            root: 'videojs' // indicates global variable
+        },
+        'wavesurfer.js': {
+            commonjs: 'wavesurfer.js',
+            commonjs2: 'wavesurfer.js',
+            amd: 'wavesurfer.js',
+            root: 'WaveSurfer' // indicates global variable
+        }
+    },
     module: {
         rules: [
             {

docs/vue.md

@@ -26,30 +26,6 @@ cd videojs-wavesurfer-app
 npm install --save videojs-wavesurfer
 ```
 
-## Configuration
-
-Create `vue.config.js` with the following content:
-
-```javascript
-const webpack = require('webpack');
-
-module.exports = {
-  configureWebpack: {
-    resolve: {
-        alias: {
-            videojs: 'video.js',
-            WaveSurfer: 'wavesurfer.js'
-        }
-    },
-    plugins: [
-        new webpack.ProvidePlugin({
-            videojs: 'video.js/dist/video.cjs.js'
-        })
-    ]
-  }
-}
-```
-
 ## Application
 
 Create `src/components/VideoJSWavesurfer.vue`:
@@ -86,7 +62,7 @@ Create `src/components/VideoJSWavesurfer.vue`:
                             backend: 'MediaElement',
                             displayMilliseconds: true,
                             debug: true,
-                            waveColor: '#6f7982',
+                            waveColor: '#3b4045',
                             progressColor: 'black',
                             cursorColor: 'black',
                             hideScrollbar: true

docs/webpack.md

@@ -13,7 +13,7 @@ npm install webpack webpack-dev-server webpack-cli css-loader style-loader -D
 Install videojs-wavesurfer:
 
 ```console
-npm install videojs-wavesurfer
+npm install --save videojs-wavesurfer
 ```
 
 ## Configuration
@@ -22,7 +22,6 @@ Create the Webpack config file called `webpack.config.js`:
 
 ```javascript
 const path = require('path');
-const webpack = require('webpack');
 const basePath = path.resolve(__dirname);
 
 module.exports = {
@@ -39,17 +38,6 @@ module.exports = {
         contentBase: basePath,
         watchContentBase: true
     },
-    resolve: {
-        alias: {
-            videojs: 'video.js',
-            WaveSurfer: 'wavesurfer.js'
-        }
-    },
-    plugins: [
-        new webpack.ProvidePlugin({
-            videojs: 'video.js/dist/video.cjs.js'
-        })
-    ],
     module: {
         rules: [{
             test: /\.css$/,

karma.conf.js

@@ -172,7 +172,7 @@ module.exports = function(config) {
     };
 
     if (ci) {
-        configuration.browsers = ['Chrome_headless', 'Firefox_headless'];
+        configuration.browsers = ['Firefox_headless'];
         configuration.detectBrowsers.enabled = false;
         configuration.singleRun = true;