Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

build: use object for webpack externals configuration #501

Merged
merged 7 commits into from
Aug 10, 2020
Merged

build: use object for webpack externals configuration #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4bbdf7f
build: use object for webpack externals configuration
thijstriemstra Aug 10, 2020
2132802
add changelog entry
thijstriemstra Aug 10, 2020
b245d7c
doc: remove webpack external alias from webpack guide
thijstriemstra Aug 10, 2020
3cf1af2
doc: remove webpack external alias from vue guide
thijstriemstra Aug 10, 2020
6115950
doc: remove webpack external alias from umijs guide
thijstriemstra Aug 10, 2020
ae02942
doc: remove webpack external alias from react guide
thijstriemstra Aug 10, 2020
be7f8bc
doc: remove webpack external alias from angular guide
thijstriemstra Aug 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGES.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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