Skip to content

Commit

Permalink
build: use object for webpack externals configuration (#501)
Browse files Browse the repository at this point in the history 
* build: use object for webpack externals configuration

* add changelog entry

* doc: remove webpack external alias from webpack guide

* doc: remove webpack external alias from vue guide

* doc: remove webpack external alias from umijs guide

* doc: remove webpack external alias from react guide

* doc: remove webpack external alias from angular guide
  • Loading branch information
@thijstriemstra
thijstriemstra committed Aug 10, 2020
1 parent 363858f commit 6826eb4
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 266 deletions.
3 changes: 3 additions & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## 4.1.0 - unreleased

- Fixed webpack externals configuration: it's no longer needed to
use additional webpack configuration in React/Angular/Vue projects
(#487, #493, #497)
- ffmpeg.js plugin: handle `abort` errors (#481)
- Bump required version for:
- videojs-wavesurfer (3.3.0 or newer)
Expand Down
30 changes: 22 additions & 8 deletions build-config/fragments/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,28 @@ 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: [
// mandatory
{'video.js': 'videojs'},
// optional
{'wavesurfer.js': 'WaveSurfer'},
{'recordrtc': 'RecordRTC'}
],
// 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
},
'recordrtc': {
commonjs: 'recordrtc',
commonjs2: 'recordrtc',
amd: 'recordrtc',
root: 'RecordRTC' // indicates global variable
}
},
module: {
rules: [
{
Expand Down
180 changes: 33 additions & 147 deletions docs/frameworks/angular.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,112 +7,49 @@ for Angular.

## Installation

Create a project directory, e.g. `angular-videojs-record`.

Create a `package.json` file inside that project directory that lists the project
dependencies:

```json
{
"name": "angular-videojs-record",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --mode development"
},
"dependencies": {
"@angular/common": "^9.1.6",
"@angular/compiler": "^9.1.6",
"@angular/core": "^9.1.6",
"@angular/forms": "^9.1.6",
"@angular/platform-browser": "^9.1.6",
"@angular/platform-browser-dynamic": "^9.1.6",
"@angular/router": "^9.1.6",
"core-js": "^3.6.5",
"rxjs": "^6.5.5",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@types/node": "^13.13.5",
"html-webpack-plugin": "^4.3.0",
"raw-loader": "^4.0.1",
"ts-loader": "^7.0.4",
"typescript": "^3.8.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
Install the [Angular CLI](https://cli.angular.io) globally:

```console
npm install -g @angular/cli
```

Install the dependencies:
Create a new application, e.g. `videojs-record-angular`:

```console
npm install
ng new videojs-record-angular
```

Install `videojs-record` and `@types/video.js`:

```console
cd videojs-record-angular
npm install --save videojs-record @types/video.js
```

## Configuration
## Application

Create `tsconfig.json`:
Create a new Angular component:

```json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "ES5"
}
}
```console
ng generate component videojs-record
```

Create a Webpack config file called `webpack.config.js`:
Replace the content of `src/app/videojs-record/videojs-record.component.css` with:

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js'],
alias: {
videojs: 'video.js',
WaveSurfer: 'wavesurfer.js',
RecordRTC: 'recordrtc'
}
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader']
},
{
test: /\.(html|css)$/,
use: 'raw-loader'
}
]
},
plugins: [
new ProvidePlugin({
videojs: 'video.js/dist/video.cjs.js',
RecordRTC: 'recordrtc'
}),
new HtmlWebpackPlugin({ template: './src/index.html' })
]
```css
/* change player background color */
.video-js video {
background-color: #42f489;
}
```

## Application
Replace the content of `src/app/videojs-record/videojs-record.component.html` with:

```html
<video id="video_{{idx}}" class="video-js vjs-default-skin" playsinline></video>
```

Create the `src/app/` directories and add a new Angular component for videojs-record
in `src/app/videojs.record.component.ts`:
Replace the content of `src/app/videojs-record/videojs-record.component.ts` with:

```ts
import {
Expand Down Expand Up @@ -140,19 +77,11 @@ import * as Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
import * as Record from 'videojs-record/dist/videojs.record.js';

@Component({
selector: 'videojs-record',
template: `
<style>
/* change player background color */
.video-js video {
background-color: #42f489;
}
</style>
<video id="video_{{idx}}" class="video-js vjs-default-skin" playsinline></video>
`
selector: 'app-videojs-record',
templateUrl: './videojs-record.component.html',
styleUrls: ['./videojs-record.component.css']
})

export class VideoJSRecordComponent implements OnInit, OnDestroy {
export class VideojsRecordComponent implements OnInit, OnDestroy {

// reference to the element itself: used to access events and methods
private _elementRef: ElementRef
Expand Down Expand Up @@ -275,60 +204,17 @@ export class VideoJSRecordComponent implements OnInit, OnDestroy {
}
```

Create the Angular app module in `src/app/app.module.ts`:
Replace content of `src/app/app.component.html` with:

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { VideoJSRecordComponent } from './videojs.record.component';

@NgModule({
imports: [BrowserModule],
declarations: [VideoJSRecordComponent],
bootstrap: [VideoJSRecordComponent]
})
export class AppModule { }
```

Create an Angular polyfills file in `src/polyfills.ts`:

```ts
import 'core-js/features/reflect';
import 'zone.js/dist/zone';
```

Create the Angular main file in `src/main.ts`:

```ts
import './polyfills';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
```html
<app-videojs-record></app-videojs-record>
```

And finally, create the main index HTML file in `src/index.html`:
Add the following to `src/styles.css`:

```html
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>Angular videojs-record example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- styles -->
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<!-- videojs.wavesurfer.css is only required when recording audio-only
<link href="node_modules/videojs-wavesurfer/dist/css/videojs.wavesurfer.css" rel="stylesheet">
-->
<link href="node_modules/videojs-record/dist/css/videojs.record.css" rel="stylesheet">
</head>
<body>
<videojs-record></videojs-record>
</body>
</html>
```css
@import '~video.js/dist/video-js.css';
@import '~videojs-record/dist/css/videojs.record.css';
```

## Run
Expand All @@ -339,4 +225,4 @@ Start the development server:
npm start
```

And open http://localhost:8080/ in a browser.
And open http://localhost:4200/ in a browser.
50 changes: 3 additions & 47 deletions docs/frameworks/react.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,63 +9,19 @@ for React.

## Installation

Create an example React application called `record-app`:
Create an example React application called `videojs-record-react`:

```console
npx create-react-app record-app
npx create-react-app videojs-record-react
```

Install videojs-record:

```console
cd record-app
cd videojs-record-react
npm install --save videojs-record
```

Install [react-app-wired](https://github.com/timarney/react-app-rewired) used
to configure Webpack:

```console
npm install react-app-rewired --save-dev
```

## Configuration

Create a `config-overrides.js` file in the root directory:

```javascript
const webpack = require("webpack");

module.exports = function override(config, env) {
// Extend the config to work with videojs-record without ejecting create react app.
// Reference: https://collab-project.github.io/videojs-record/#/react
const videojsPlugin = new webpack.ProvidePlugin({
videojs: "video.js/dist/video.cjs.js",
RecordRTC: "recordrtc"
});
const videojsAlias = {
videojs: "video.js",
WaveSurfer: "wavesurfer.js",
RecordRTC: "recordrtc"
};
config.resolve.alias = { ...config.resolve.alias, ...videojsAlias };
config.plugins.push(videojsPlugin);
return config;
};
```

Change the existing calls to `react-scripts` in the `scripts` section of `package.json`
for `start`, `build` and `test`:

```json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
```

## Application

Edit `src/index.js`:
Expand Down
23 changes: 0 additions & 23 deletions docs/frameworks/umijs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,6 @@ Install videojs-record:
npm install --save videojs-record
```

## Configuration

Change `.umirc.ts`:

```ts
import { defineConfig } from 'umi';

export default defineConfig({
chainWebpack(config) {
// Set alias for videojs-record
config.resolve.alias.set('videojs', 'video.js');
config.resolve.alias.set('WaveSurfer', 'wavesurfer.js');
config.resolve.alias.set('RecordRTC', 'recordrtc');
},
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
],
});
```

## Application

Edit `src/pages/index.js`:
Expand Down

0 comments on commit 6826eb4

Please sign in to comment.