Question

js / reactjs产品与janus webrtc网关接口。我正在尝试使用metecho janus-gateway源代码中提供的janus.js库，据我所知：

A：该库将检查浏览器是否与Janus兼容。 B：此库由核心团队维护并保持最新状态。

所以我知道我已经必须放弃JSX并使用jQuery或标准JavaScript来操纵react提供的空白。

我只需要知道如何导入旨在通过html中的script标签导入的脚本，它本身也具有依赖性。最好通过使用存根index.html文件尝试不将其加载到网站的每个页面上。该项目正变得越来越庞大和繁重。

最糟糕的是，我只需要使用其他API之一（例如metecho的Restful API）并亲自检查浏览器的兼容性。但是我宁愿不要重复所有的工作。而且也不必尝试在原型设计阶段的早期就解决webrtc连接的工作原理。

只需尝试使jQuery依赖关系首先起作用：

//import $ from '../Api/janus/jquery.min.js';

//import $ from 'jquery';
//import jQuery from 'jquery';
//import adapter from 'webrtc-adapter';
const jQuery = require('jquery');

import {Janus as JanusAPI} from "../Api/janus/janus.js";

错误日志：

./src/Api/janus/janus.js
  Line 55:    'error' is not defined    no-undef
  Line 56:    'error' is not defined    no-undef
  Line 57:   'error' is not defined    no-undef
  Line 98:   'adapter' is not defined  no-undef
  Line 161:  'jQuery' is not defined   no-undef
  Line 167:  'adapter' is not defined  no-undef

Search for the keywords to learn more about each error.

Answer 1

你以为我会回答我自己的帖子，因为我已经走得更远了。

如果您希望npm将Janus识别为模块，则此文档具有以下基础知识：

https://janus.conf.meetecho.com/docs/js-modules.html

您可能需要修改janus-gateway npm项目的实体点，以在npm汇总汇总模块之前导入所需的依赖关系。

然后，您将不得不修改汇总配置，以在模块中包含依赖关系，或者在导入模块的项目中寻找依赖关系，有关如何使用汇总执行此操作的一个很好的起点可以在这里找到：

https://engineering.mixmax.com/blog/rollup-externals

来自janus-gateway / npm项目的我的module.js

/* eslint-disable */
/*
 * Module shim for rollup.js to work with.
 * Simply re-export Janus from janus.js, the real 'magic' is in the rollup config.
 *
 * Since this counts as 'autogenerated' code, ESLint is instructed to ignore the contents of this file when linting your project.
 */
//var adapter = require('webrtc-adapter');
import adapter from 'webrtc-adapter';

@JANUS_CODE@

export default Janus;

和rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonJS from 'rollup-plugin-commonjs';

import replace from 'rollup-plugin-replace';
import * as fs from 'fs';

export default {
    name: 'Janus',
    input: 'module.js',
    output: {
        strict: false
    },
    plugins: [
        resolve(),
        commonJS({
//              namedExports: {
//
//              }
                include: 'node_modules/**'
        }),
        replace({
            JANUS_CODE: fs.readFileSync('../html/janus.js', 'utf-8'),
            delimiters: ['@','@'],
            includes: 'module.js'
        })
    ]
};

不必使用此方法用Janus实现任何UI，但我至少要使用默认依赖项来初始化API，并且可以创建/销毁会话并将插件附加到所述会话。

希望这会有所帮助：）

如何使用浏览器特定的Vanilla JS库来应对依赖关系

1 个答案: