Подключить виджет

154
25 июня 2019, 17:00

Всем привет, есть такой виджет как voxeet вот ссылка https://developer.voxeet.com/, есть пример этого приложения на https://github.com/voxeet/voxeet-web-conferencekit. Мне надо интегрировать его на php фреймворк symfony.

Сейчас у меня так выглядит package.json:

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "author": "author",
  "devDependencies": {
    "fs": "0.0.1-security",
    "glob": "^7.1.1",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^2.3.2",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-image": "^2.7.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-inline-css": "^3.1.0",
    "gulp-newer": "^1.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-uglify": "^2.1.0",
    "inky": "^1.3.7",
    "q": "^1.4.1",
    "zen-grids": "^2.0.3"
  }
}

В примере приложения package.json выглядит так:

{
  "name": "voxeet-web-conferencekit",
  "version": "1.0.4",
  "private": true,
  "main": "./dist/bundle.js",
  "scripts": {
    "start": "webpack-dev-server -d --hot --inline --content-base",
    "build": "webpack --config webpack.config.prod.js --progress -p"
  },
  "author": "Voxeet",
  "dependencies": {
    "@voxeet/react-components": "0.31.0-rc34",
    "@voxeet/voxeet-web-sdk": "1.8.5",
    "express": "^4.0.0",
    "react": "^16.0.0",
    "react-dom": "16.6.1",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "copy-webpack-plugin": "^4.2.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  },
  "peerDependencies": {
    "@voxeet/voxeet-web-sdk": "^1.7.4",
    "express": "^4.0.0"
  },
  "files": [
    "README.md",
    "dist/"
  ]
}

Вот мой gulpfile.js

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var fs = require('fs');
var Q = require('q');
var glob = require('glob');
var path = require('path');
var clean = require('gulp-clean');
var sass = require('gulp-sass');
var newer = require('gulp-newer');
var image = require('gulp-imagemin');
var inky = require('inky');
var yaml = require('js-yaml');
var util = require('gulp-util');
var config = {
  dev: !!util.env.dev
};
gulp.task('assets:js:clean-dest', function(){
    return gulp.src('./web/js')
            .pipe(clean({
                read: false, 
                force: true
            }))
    ;
});
gulp.task('assets:version', function(){
    var filePath = './app/config/config.yml';
    var doc = fs.readFileSync(filePath, 'utf8');
    var yml = null;
    yml = yaml.load(doc);    
    yml.framework.assets.version = new Date().getTime() + '';
    var updated = yaml.dump(yml);
    fs.writeFileSync(filePath, updated);
    return true;
});
gulp.task('assets:css:clean-dest', function(){
    return gulp.src('./web/css')
            .pipe(clean({
                read: false, 
                force: true
            }))
    ;
});
gulp.task('assets:js:minify', function(){
    var promises = [];
    glob.sync('./assets/js/*').forEach(function(dirPath){
        if(fs.statSync(dirPath).isDirectory()) {
            var defer = Q.defer();
            var pipeline = gulp.src(dirPath + '/**/*.js')
                    .pipe(
                      config.dev
                      ? util.noop()
                      : uglify({preserveComments: 'license'})
                    )
                    .on('error', function(err){console.log(err);})
                    .pipe(rename({
                        suffix: '.min'
                    }))
                    .pipe(gulp.dest('./assets/js_min/' + path.basename(dirPath)));
            pipeline.on('end', function(){
                defer.resolve();
            });
            promises.push(defer.promise);
        }
    });
    return Q.all(promises);
});
gulp.task('assets:js:concat', ['assets:js:clean-dest', 'assets:js:minify'], function(){
    var promises = [];
    glob.sync('./assets/js_min/*').forEach(function(dirPath){
        if(fs.statSync(dirPath).isDirectory()) {
            var defer = Q.defer();
            var pipeline = gulp.src(dirPath + '/**/*.js')
                    .pipe(concat(path.basename(dirPath) + '.min.js'))
                    .pipe(gulp.dest('./web/js/'));
            pipeline.on('end', function(){
                defer.resolve();
            });
            promises.push(defer.promise);
        }
    });
    return Q.all(promises);
});
gulp.task('assets:sass:compile', function(){
    var promises = [];
    glob.sync('./assets/scss/!(common)', {'ignore': ['common']}).forEach(function(dirPath){
        if(fs.statSync(dirPath).isDirectory()) {
            var defer = Q.defer();
            var pipeline = gulp.src(dirPath + '/*.scss')
                    .pipe(sass())
                    .pipe(gulp.dest('./assets/css/' + path.basename(dirPath)));
            pipeline.on('end', function(){
                defer.resolve();
            });
            promises.push(defer.promise);
        }
    });
    return Q.all(promises);
});
gulp.task('assets:css:minify', ['assets:sass:compile'], function(){
    var promises = [];
    glob.sync('./assets/css/*').forEach(function(dirPath){
        if(fs.statSync(dirPath).isDirectory()) {
            var defer = Q.defer();
            var pipeline = gulp.src(dirPath + '/**/*.css')
                    .pipe(cleanCSS())
                    .pipe(rename({
                        suffix: '.min'
                    }))
                    .pipe(gulp.dest('./assets/css_min/' + path.basename(dirPath)));
            pipeline.on('end', function(){
                defer.resolve();
            });
            promises.push(defer.promise);
        }
    });
    return Q.all(promises);
});
gulp.task('assets:css:concat', ['assets:css:minify', 'assets:css:clean-dest'], function(){
    var promises = [];
    glob.sync('./assets/css_min/*').forEach(function(dirPath){
        if(fs.statSync(dirPath).isDirectory()) {
            var defer = Q.defer();
            var pipeline = gulp.src(dirPath + '/**/*.css')
                    .pipe(concat(path.basename(dirPath) + '.min.css'))
                    .pipe(gulp.dest('./web/css/'));
            pipeline.on('end', function(){
                defer.resolve();
            });
            promises.push(defer.promise);
        }
    });
    return Q.all(promises);
});
gulp.task('assets:images:process', function(){
    return gulp.src('./assets/images/**')
            .pipe(newer('./web/images'))
            .pipe(image())
            .pipe(gulp.dest('./web/images'))
    ;
    return Q.all(promises);
});
gulp.task('assets:fonts:clean-dest', function(){
    return gulp.src('./web/fonts/*')
            .pipe(clean({
                read: false, 
                force: true
            }))
    ;
});
gulp.task('assets:fonts:copy', ['assets:fonts:clean-dest'], function(){
    return gulp.src('./assets/fonts/*')
            .pipe(gulp.dest('./web/fonts'))
    ;
});
gulp.task('assets:audio:copy', function(){
    return gulp.src('./assets/audio/*')
            .pipe(gulp.dest('./web/audio'))
    ;
});
gulp.task('inky:compile', [], function(){
    return gulp.src('./app/Resources/views/Mails/inky/*')
            .pipe(inky())
//            .pipe(inlineCSS())
            .pipe(gulp.dest('./app/Resources/views/Mails'));
});
gulp.task('default', ['js', 'images', 'fonts'], function(){
});
gulp.task('images', ['assets:images:process', 'assets:version'], function(){
});
gulp.task('audio', ['assets:audio:copy', 'assets:version'], function(){
});
gulp.task('fonts', ['assets:fonts:copy', 'assets:version'], function(){
});
gulp.task('js', ['assets:js:concat', 'assets:version'], function() {  
});
gulp.task('css', ['assets:css:concat', 'assets:version'], function(){
});

Подскажите пожалуйста, как мне правильно подключить этот виджет себе, если у меня есть gulp то мне же не стоит подключать babel? Еще в инструкции к этому приложению есть yarn install, мне и его обязательно ставить?

Простите за банальные вопросы, но во фронтенде я совсем новичок, а надо срочно подключить

READ ALSO
Фиксированный скролл сайдбара

Фиксированный скролл сайдбара

Как сделать фиксированный скролл сайдбара по аналогии с тем, как это сделано на vistaprint?

110
Cannot read property 'map' of undefined. Ошибка: пустой массив

Cannot read property 'map' of undefined. Ошибка: пустой массив

Знаю такой вопрос уже есть в англоязычной stackoverflowНо мне не помогло ответ

136
Открыть пункт меню в новом окне на PHP

Открыть пункт меню в новом окне на PHP

Ссылки меню открываются в новой ВКЛАДКЕЕсть задача открывать их в новом ОКНЕ

123
Что такое реактивная зависимость?

Что такое реактивная зависимость?

В документации vuejs встретился такой фрагмент:

101